ioLoop Docs

Appearance

$io.ui ​

Client API reference.

Functions ​

$io.ui.closeModal ​

Close a currently shown model dialog/popup

Usage ​

js
$io.ui.closeModal()

Description ​

Use this function to close a modal automatically from inside the cbFnSaveSuccess callback of the $io.ui.showFormModal function.

Parameters ​

This function does not require parameters.

Output ​

Type: null

This function does not return a value.

$io.ui.controlCollapsibleArea ​

Expands, Collapses or Toggles the given Collapsible Area element.

Usage ​

js
$io.ui.controlCollapsibleArea(elemSel, opType)

Description ​

Based on the opType parameter, Expands, Collapses or Toggles the given Collapsible Area element.

Usage Scenarios ​

  • Expand a Collapsible Area element
  • Open a Collapsible Area element
  • Collapse a Collapsible Area element
  • Close a Collapsible Area element

Parameters ​

elemSel ​

Type: Object

Required: Yes

Element selector object obtained using $io.dom.elementIdSel, $io.dom.dataDesignElementSel, or $io.dom.domSel functions.

opType ​

Type: String

Required: Yes

Use the following values to control the behavior:

  • 'zn-expand': Show the Collapsible Area element in its expanded state
  • 'zn-collapse': Show the Collapsible Area element in its collapsed state
  • 'zn-toggle': Toggle the state of Collapsible Area element

Output ​

Type: null

This function does not return a value.

$io.ui.embedResize ​

Resize the iframe embedding the app's page to fit its content properly.

Usage ​

js
$io.ui.embedResize()

Description ​

This function is used when an app's page is embedded in an iframe on another web page. If the web page includes the https://<<appdomain>>/runner/embed.js file automatically generated for your app, this function allows the parent page to resize the iframe dynamically to fit the content of the embedded page properly, ensuring that scrollbars do not appear unnecessarily.

Usage Scenarios ​

  • Ensure that an iframe embedding an app's page adjusts dynamically to fit the content displayed on the page
  • Prevent scrollbars by resizing the iframe based on the height of the embedded content
  • Use when embedding your app's page on external websites using the automatically generated embed.js file

Parameters ​

This function does not require parameters.

Output ​

Type: null

This function does not return a value.

$io.ui.showConfirmModal ​

Presents a modal dialog/popup for confirming with the user

Usage ​

js
$io.ui.showConfirmModal(title, message, mdlOptions)

Description ​

Presents a modal dialog/popup displaying an message asking the user for permission to proceed by pressing the OK button or press the Cancel button to not proceed with the operation. It will return a Promise that resolves to a true value if the user pressed the OK button and false otherwise.

Usage Scenarios ​

  • Ask user's permission
  • Ask user for confirmation
  • Present a Yes/No dialog with a message
  • Present a OK/Cancel dialog with a message
  • Confirm with user before taking an action

Parameters ​

title ​

Type: String

Required: Yes

A title for the modal pop-up e.g. Confirmation needed.

message ​

Type: String

Required: Yes

The message to display. HTML strings are supported. e.g. Ths will delete the record.<br>Are you sure ?

mdlOptions ​

Type: Object

Required: Yes

Use this to customize the look and feel of the modal popup. Can be null. See https://docs.ioloop.com/project-editor/frontend/pages-and-forms/page-flow/modal-customization for the supported customization properties. e.g. you can customize the label of the OK button using the okBtnText property and the cancel button using the cancelBtnText.

Output ​

Type: Promise

This function returns a Promise that resolves to true if the user selected the OK button or false if the user selected the Cancel button.

$io.ui.showFormModal ​

Show a ioLoop Form as a modal dialog/popup

Usage ​

js
$io.ui.showFormModal(formSlug, editData, title, sharedData, mdlOptions, cbFnSaveSuccess, cbFnCloseSuccess, cbFnCloseFail)

Description ​

Presents a Form as a modal dialog/popup, with options for editing existing records or data or adding a new one.

Usage Scenarios ​

  • Display a ioLoop form and ask user input
  • Display a ioLoop form and save info to database
  • Display a ioLoop form and send info to API

Parameters ​

formSlug ​

Type: String

Required: Yes

The identifier of the Form or it's URL slug (if different). You may use the App Assets side-bar (on the left) to copy the URL slug.

editData ​

Type: Object

Required: Yes

If a valid object is provided, the Form will be initialized for editing the existing record. Note that this should not be used as means to pre-populate the form's input fields. If that is required, then it needs to be done using the sharedData parameter, and the form would need logic to use this to pre-populate the input.

title ​

Type: String

Required: Yes

A title for the modal dialog/pop-up e.g. Add New Item or Edit Customer, etc.

sharedData ​

Type: Object

Required: Yes

Use this to share information from the current page with the form. This information is available to the Form's Page Flow logic via the $io.system.getFlowShareData function. Can be set to null if no shared information is needed.

mdlOptions ​

Type: Object

Required: Yes

Use this to customize the look and feel of the modal dialog/popup. Can be null. See https://docs.ioloop.com/project-editor/frontend/pages-and-forms/page-flow/modal-customization for the supported customization properties.

cbFnSaveSuccess ​

Type: Function

Required: Yes

Callback function that is invoked when the Form is saved successfuly prior to the form being closed. Hence this function will be called before the callback to the cbFnCloseSuccess parameter. Set this to null if you do not want to provide a callback. NOTE: One can choose to close the modal during this callback by using the $io.ui.closeModal function.

The callback function is passed an object with the following properties:

  • data: Object with following properties:
  • value: An Object containing the data entered by the user with properties matching the form's schema.
  • result: Valid only for Database attached forms. This is an object with the insertedId property if the form was used to add a new record (i.e. editData is invalid) to the database. The insertedId property contains the Record Id of the newly added record. e.g. if the callback function for cbFnSaveSuccess is function(response) {} then within this function response.data.value will be an object containing the data entered by the user. For database attached forms used to add a new record to the database (i.e. editData is invalid), response.data.result.insertedId will contain the record identifier of the added record.

cbFnCloseSuccess ​

Type: Function

Required: Yes

Callback function that is invoked when the Form is closed after the data was saved or submitted successfuly. Hence this function will be called before the callback to the cbFnSaveSuccess parameter. Set this to null if you do not want to provide a callback. The callback function is passed an object similar to the one described for the cbFnSaveSuccess callback function.

cbFnCloseFail ​

Type: Function

Required: Yes

Optional. Callback function that is invoked when the Form is closed after the data was not saved or submitted successfuly. Set this to null if you do not want to provide a callback. The callback function is passed an object similar to the one described for the cbFnSaveSuccess callback function, except that the passed object will only contain a property named err containing the error information.

Output ​

Type: null

This function does not return a value.

$io.ui.showInfoModal ​

Presents a modal dialog/popup displaying an informative message

Usage ​

js
$io.ui.showInfoModal(title, message, mdlOptions)

Description ​

Presents a modal dialog/popup displaying an informative message with a button for the user to close it.

Parameters ​

title ​

Type: String

Required: Yes

A title for the modal dialog/pop-up e.g. There was an error submitting your request.

message ​

Type: String

Required: Yes

The message to display.

mdlOptions ​

Type: Object

Required: Yes

Use this to customize the look and feel of the modal dialog/popup. Can be null. See https://docs.ioloop.com/project-editor/frontend/pages-and-forms/page-flow/modal-customization for the supported customization properties. e.g. you can customize the label of the button using the okBtnText property.

Output ​

Type: Promise

This function returns a Promise that resolves without any relevant return value after the modal is closed.

$io.ui.showMenu ​

Display a context menu with specified options

Usage ​

js
$io.ui.showMenu(menuOptions, x, y, cbFn)

Description ​

Displays a context menu with specified options at the specified screen location. If the menu is being shown in the context of an event handler using the $io.dom.setEventListener function, the xpos and ypos properties of the event information object can be used for the screen location.

Usage Scenarios ​

  • Show context menu
  • Show a menu of options

Parameters ​

Type: Array

Required: Yes

Array of Strings of options to be displayed in the context menu.

x ​

Type: Number

Required: Yes

The position relative to the left edge of the document.

y ​

Type: Number

Required: Yes

The position relative to the top edge of the document.

cbFn ​

Type: Function

Required: Yes

The callback function that will be called when the user makes a selection from the menu. The function is passed the following parameters: menuText: The exact string from the menuOptions array that was passed. menuIndex: The 0 based index of the selection based on the menuOptions array that was passed.

Output ​

Type: null

This function does not return a value.

$io.ui.widgetCommand ​

Executes a command on a widget

Usage ​

js
$io.ui.widgetCommand(elemSel, commandName, commandParams)

Description ​

This function executes the given command on the specified widget element. Consult ioLoop documentation for the supported commands on a widget.

Usage Scenarios ​

  • Automate actions on a widget element
  • Initialize a widget element with dynamic data

Parameters ​

elemSel ​

Type: Object

Required: Yes

Element selector object obtained using $io.dom.elementIdSel, $io.dom.dataDesignElementSel, or $io.dom.domSel functions.

commandName ​

Type: String

Required: Yes

The command to execute. The commands vary based on the widget, hence consult the ioLoop documentation for supported commands.

commandParams ​

Type: Object

Required: Yes

Object containing properties representing parameters to be passed for the command. Consult the ioLoop documentation for the parameters.

Output ​

Type: Promise

This function returns a Promise that resolves to an object with the following properties:

  • status: A Boolean value of true if the command was successful or false otherwise.
  • data: If successful, an object representing the data returned by the command, null otherwise.
  • err: If successful set to null, otherwise the information about the error (usually as a string).