Page History

UI actions are buttons, links, and context menu items on forms and lists. They allow customizing the UI to be more interactive, adjustable, and comfortable for working.

UI action inheritance and override

In SimpleOne, you can inherit the UI actions and then override their logic, scripts, order, name, or any other feature.

Inheritance rules

1. The following UI actions are applied to forms and lists:
   • UT actions inherited and not overridden by the Overrides by option on the current level of inheritance.
   • The overridden on the current level functionality of the inherited UI actions.
   • UI actions specified on the current level.
2. A UI action inherited on the 1^st level with the override functionality specified on the 2^nd level cannot be applied on the 3^rd level of inheritance. An inherited UI action specified on the 2^nd level may be applied to the 3^rd one.
3. A UI action inherited on the 1^st level with the override functionality specified on the 3^rd level cannot be overridden on the 2^nd level. In this case, the system warns of active override option and requires for its deactivation.

To inherit a UI action, complete the steps below:

1. Make a UI action parent by setting the Inherits checkbox active and clicking Save.
2. Make a UI action child by specifying the Parent field with the UI action you want, then customizing the record.
3. Click Save to apply changes.

To override a UI action, complete the steps below:

1. Open the child UI Action form.
2. In the Overrides by field, specify a parent UI Action that should be overridden.

UI actions types

1. Form Button
2. Form Header Button
3. Form Bottom Button
4. Form Context Menu
5. Form Field Label Context Menu
6. Form Link
7. List Banner Button
8. List Bottom Button
9. List Burger Menu
10. List Table Header Context Menu
11. List Context Menu
12. List Link
13. List Header Right Button
14. Button Context Menu
15. Dependency Map Context Menu

UI actions on form

UI actions on list

UI actions customizing

You can create new or customize existing UI actions.

To do this, please complete the following steps:

1. Navigate to System Definitions → UI Actions.
2. Click New or select an existing UI-action.
3. Customize UI-action using the form provided.
4. Click Save or Save and Exit to apply changes.

Global UI Actions

You can make a UI action display on all tables.

To do that, follow the steps below:

1. Open the UI action record desired.
2. On the form, specify Global table in the Table field.
3. Click Save or Save and Exit to apply changes.

Embed a UI Action

UI action functionality allows creating multi-level submenu options by embedding items for the hamburger menu within forms and lists. 

To embed a UI action, follow the steps below:

1. Create a parent UI action specifying its type with the Form context menu or List burger menu checkboxes on the Position and Style tab.
2. Click Save and Exit to leave the form.
3. Create a child UI action of the same type specifying its Parent option with UI action created before.
4. (Optional) Set the Inherits option active.
5. Click Save to apply changes.

Display condition configuration

The condition optiondefines situations when UI actions displayed. The Condition field expects using server-side API, but in some cases, it is possible to apply client-side API. To enable client script use, on the UI action form, set the Client option checked. Within Condition, to access a UI action, use the current object. This object may be used only for UI actions displayed on forms. 

Use logical operators && (AND) and || (OR) for making up the complex conditional expressions.

Condition option allows invoking server-side Script Includes created. In the example below, the function wfContextExists() of Script Include with the same name gets current.sys_id and current.getTableName as recordID and tableName arguments.

This UI action is a reference to the record with the sys_id of the getTableName table. If a record exists, the function returns TRUE, and, in the opposite, it returns FALSE when there is no record found. Depending on the value returned, the function displays the UI action or not.

function wfContextExists(recordID, tableName){
  const table = new SimpleRecord('sys_db_table');
  table.get('name', tableName);
  const wfContext = new SimpleRecord('wf_context');
  wfContext.addQuery('related_record_id', ss.getDocIdByIds(table.sys_id, recordID));
  wfContext.selectAttributes('sys_id');
  wfContext.query();
  return (wfContext.getRowCount() > 0)
}

Defining UI action behavior with a script

The Script field defines the UI action behavior .  By default, this field supports the in the form field. In there, you can determine UI action behavior logic using Server-Side API. Select the Client checkbox to switch the available API to the Client-Side API. For example, this UI action adds an informational message on every table field with the Description field content:.

ss.addInfoMessage(current.description);

UI Action form description

UI action scripting

Within UI action script, you can use some specific global methods allows expanding interaction possibilities. Use them to extend standard UI action functionality.

Example 1

When using the Wait Server Response option, you define to wait for the server response after clicking the button. All this time, between button clicking and server responding, the button will be displayed disabled.

In this case, use the __resolveServerResponse() and __rejectServerResponse() methodsto make the UI action available again after the action is taken. For example:

s_i18n.getMessage('The report has been saved', (response) => {
    s_form.addInfoMessage(response);
    __resolveServerResponse();
});

Calling the __resolveServerResponse() method in your UI actions allows to force the server respond, so, for example, you will not have to wait until a button becomes available.

The __rejectServerResponse() methodcan be used for error handling as shown below.

const table = s_list.getTablesName()[0];
const selectedRows = s_list.getCheckedRow(table);
if (!selectedRows.length) {
    await s_i18n.getMessage("No selected rows.", (translationResponse) => {
        alert(translationResponse);
    });
    __rejectServerResponse();
}

Example 2

The currentCell() method is used on lists and provides service information about current table cell. Information is provided formatted as an object containing cell information. Generally, typical output of this method looks as shown below:

{
  attribute: "state",
  columnId: "155931135900001086",
  columnType: "choice",
  recordId: "161782918714652945",
  tableId: "155931135900000083",
  tableName: "task",
  value: "4"
}

To get this information manually, please complete the steps below:

1. Open any list containing any values
2. Open developer console in your browser
3. Right-click on any cell to get a context menu
4. In a developer console, type window.currentCell(), and submit.