Page History

User interface (UI) actions are buttons, links, and context menu items on forms and lists. They allow you to customize the UI to be more interactive, adjustable, and comfortable for working.

UI action

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

Inheritance rules

1. The following UI actions are applied to forms and lists:
   • UI actions inherited and not overridden by the Overrides by option at the current inheritance level.
   • The functionality overridden at the current level of the UI actions inheritance.
   • UI actions specified on the current level.
2. UI action inherited on the 1^st level with functionality overriding 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. UI action inherited on the 1^st level with the functionality overriding specified on the 3^nd 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. Select the Inherits checkbox to make a UI action the parent action, and click Save.
2. Specify the Parent UI action you need and customize the record.
3. Click Save or Save and Exit to apply the 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 action types

1. On forms:
   • Header Leftleft
   • Header Rightright
   • Hamburger MenuBurger menu
   • Field Label Context Menulabel context menu
   • Link
   • Bottom
2. On lists:
   • Header Leftleft
   • Header Rightright
   • Hamburger MenuBurger menu
   • Column Header Context Menuheader context menu
   • Row Context Menucontext menu
   • Link
   • Bottom
3. Other:
   • Button Context Menucontext menu
   • Dependency Map Context Menumap context menu

UI actions on form

Image RemovedImage Added

UI actions on list

Image RemovedImage Added

Customize UI actions

You can create new or customize existing UI actions.

To do thisso, 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 Exitexit to apply the changes.

1. the

1. Right-click the UI action you need to edit to open a context menu.
2. Click Edit UI action. The UI action form appears.

Image Removed

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

The UI action functionality allows you to create multi-level submenu options by embedding items to the hamburger menu within forms and lists. 

To embed a UI action, follow the steps below:

1. Create a parent UI action, specify its type with the Hamburger Menu checkbox in the Form Style or List Style area in the Position and Style tab.
2. Click Save and Exit to leave the form.
Create a child UI action of the same type specifying its Parent option with

UI

Display condition configuration

Use logical operators && (AND) and || (OR) to compose the complex conditions.

Conditions allow you to call the 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.

Image Removed

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 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)
}

Define a UI action behavior with a script

The Script field defines the UI action behavior. By default, this field supports the 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 with the Description field content:

ss.addInfoMessage(current.description);

Action form fields

Use cases

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 the button is clicked. The button is disabled between the button clicking and server responding, .

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

Use the __resolveServerResponse() method to force the server respond, so, for example, do not wait for the button to become available.

Use the __rejectServerResponse() method to handle errors.

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 property is used on lists and provides service information about the current table cell. The information is provided in the format of an object containing the information about the cell. 

const rowRecordId = window.currentCell.recordId;
const rowTableName = window.currentCell.tableName;
if (rowRecordId) {
  s_go.open(`/record/${rowTableName}/${rowRecordId}`);
}

To get this information manually, complete the steps below:

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

A type of an item from which information is gathered.

When a cell in list header is selected, then this field is populated with the value similar as the fieldName field.

Global UI actions

You can make a UI action displayed on all tables.

To do that, follow the steps below:

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

Embed a UI action

The UI action functionality allows you to create multi-level submenu options by embedding items to the burger menu within the forms and lists. 

To embed a UI action, follow the steps below:

1. Create a parent UI action, specify its type with the Burger menu checkbox in the Form style or List style area of 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 the UI action created before.
4. (optional) Select the Inherits checkbox to enable the UI action on the child tables.
5. Click Save to apply the changes.

Display condition configuration

The condition optiondefines the situations when UI actions displayed. By default, this field supports the server-side API. Select the Client checkbox to switch the available API to the client-side API. In the Condition field, use the current object of the certain record to access a UI action. This object can only be used for the UI actions that are displayed on forms. 

Use logical operators && (AND) and || (OR) to compose the complex conditions.

Use conditions to call the created Script Include on the server-side. 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.

Image Added

This UI action is a reference to the record with the IDof the getTableName table. If a record exists, the function returns true, and 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)
}

Define a UI action behavior with a script

The Script field defines the UI action behavior. By default, this field supports the 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 with the Description field content:

ss.addInfoMessage(current.description);

Example 3

In this example, сonsider a case of bulk deletion of records that were selected on the list view.

To do this, a currents object is used. It is intended to store selected records as SimpleRecord objects. This object can be used instead of the getCheckedRow() method on the server side. It is available for the server-side list UI actions.

The UI action code example is listed below: