PfJs for On Render

There is a JavaScript class called PfJs which is included when mini apps run. You can use these functions to more easily manipulate an app instead of having to write too much code from scratch.

The main functions are:

PfJs.modalShow ( content, noclose )

Shows content in modal window

pass noclose=true to remove the close icon

PfJs.modalHide()

Hides modal window

PfJs.autoSubmit(target)

Auto-submit a detail form saving the item and moving to the next screen without user interaction.

target = On Render target variable

PfJs.loadMore(maxClicks)

Auto-load more items on table/calendar/map/cards view. Mimics clicking on the "more" link automatically.

maxClicks = Maximum number of times to click on the "more" link

PfJs.addTabsToForm(target, tabs)

Separates a detail form into tabs

target = On Render target variable tabs = object array of tabs and fields

eg:

PfJs.addTabsToForm(target, [
  {name:"General",fields:["title","category","date"]},
  {name:"Detail",fields:["title","text","image"]},
  {name:"Other",fields:[]},
]);

PfJs.addMapToField(field)

Add a clickable image map to a location field

field = external id of field

PfJs.addGfFlowButton(target, label, c, p, flow_id, item_id, css_class, click_func)

Add a button to the page to trigger a GF Manual Flow

target = optional On Render target variable or DOM element to append to label = Label for button c & p = c & p values of GF hooks in Podio app (see developer section in Podio app) flow_id = ID of flow to trigger item_id = ID of item to trigger on css_class = optional CSS class to add to button click_func = optional function to call after success

PfJs.addGfHookButton(target, label, hook_catch_str, data, css_class, click_func)

Add a button to the page to trigger a GF Webhook

target = optional On Render target variable or DOM element to append to label = Label for button hook_catch_str = string ID of webhook (after /catch/ in URL) data = optional array of data to pass to webhook css_class = optional CSS class to add to button click_func = optional function to call after success

PfJs.embedScreen(divId, screenIdent)

Embed another screen in a div after Render (eg detail screen inside detail screen)

divId = ID of div to insert screen into screenIdent = text name or number of the screen to inject

PfJs.makeCheckboxTable(target)

Add checkboxes to table

target = On Render target variable returns id of table

PfJs.getCheckboxes(tabid)

Get checkbox ids from checkbox table

tabid = id of table (returned by makeCheckboxTable) returns array of ids

PfJs.ajaxCall(screenIdent, data, okfunc, errfunc)

Simulate ajax call to text screen

screenIdent = text name or id number of text screen data = data object to pass, eg {ids:[1,2]} - note that this data is passed as URL parameters okfunc = function to pass return to (will be text or object if proper JSON) errfunc = function to pass error string to

PfJs.dependentField(parent, options, markrequired)

create dependent fields in a mini app form

parent = name of field to depend on (parent) options = array of values in format {parent : comma-separated list of fields to show} markrequired = optional array of values in format {parent : comma-separated list of fields to make required if shown} eg:

PfJs.dependentField("item-source", {"Website":"show-website","Google":"show-google","Other (Please Specify)":"other-text,more-comments"});

PfJs.sqlSearchTable(target, idcol)

Add search inputs to all sql table headers

target = On Render target variable idcol = name of column with id

NOTE: The ID column (usually item_id) MUST be included in the screen fields.

PfJs.calendarColor(callback)

Set a function to change the color of calendar events.

callback = function to return color, with parameter event, which has:

title = title of event start = start date of event end = end date of event

eg (in screen footer):

<script>
PfJs.calendarColor(function(event){
  // mondays are green
	if ( event.start.getDay() == 1 ) return "#080";
  // events with an "h" are red
	if ( event.title.toLowerCase().indexOf("h") >= 0 ) return "#800";
});
</script>

PfJs.addMceButton(fieldId, text, icon, callback)

Add a button to a rich text field's editor.

fieldId = external field ID

text = button text

icon = button icon | false

callback = function(editor)

eg:

PfJs.addMceButton("rich-text", "hr", false, function(editor) {
	editor.insertContent('<hr />');
});

Note that the callback function is passed the editor instance and your code must conform to the TinyMCE specification. See: https://www.tiny.cloud/docs-4x/