Skip to main content
Version: 1.27.0

UI Actions

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.

tip

Role required: admin.

UI action types​

  1. On forms:
    • Header left
    • Header right
    • Burger menu
    • Field label context menu
    • Link
    • Bottom
  2. On lists:
    • Header left
    • Header right
    • Burger menu
    • Kebab menu
    • Column header context menu
    • Row context menu
    • Link
    • Bottom
  3. Other:
    • Button context menu
    • Dependency map context menu

UI actions on form​

UI actions on list​

Customize a UI action​

You can create new or customize existing UI actions.

To do so, complete the following steps:

  1. Navigate to System Settings → 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 the changes.

UI Action form fields

FieldMandatoryDescription
NameYSpecify a UI action name. This text is displayed on the button, link, or as a context menu item.
TableYSpecify a table to display UI action on. 
ParentNSpecify the context menu item to be a parent for the current UI action (applicable for the Burger menu UI action type).
CommentsNAdd a brief description of the action.
ActiveNSelect this checkbox to display the UI action on the form (list, context menu).
InheritedNSelect this checkbox to make this UI action available for all child tables of the table specified in the Table field.
OrderNSpecify the order of the displaying. If there are UI actions of the same type, they are arranged in the ascending order.
OverridesNSpecify a UI action that will be overridden by the current UI action. Learn more about UI action inheritance and override.
tip

You can edit some types of the UI actions like buttons and links in a quick way. To do so, complete the steps below:

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

Global UI actions​

You can make a UI action displayed on all tables.

To do so, follow the steps below:

  1. Open the UI action record you need to add to all tables.
  2. On the form, specify the Global table in the Table field.
  3. Click Save or Save and exit to apply the changes.
note

Most burger menu items and some buttons on the forms (New, Save, Save and exit) and lists (New, Delete) are global.

Nested UI actions​

The UI action functionality allows you to create multi-level burger menus on forms and lists.

caution

This option is only available for the UI actions of the Burger menu type.

To create a nested UI action, follow the steps below:

  1. Create a parent UI action, specify its type with the Burger menu checkbox in the On Form or On List tab.
  2. Click Save and exit to leave the form.
  3. Create a child UI action of the same type and specify the UI action created before in its Parent field.
  4. (optional) Select the Inherited checkbox to enable the UI action on the child tables.
  5. Click Save to apply the changes.

Display condition configuration​

The condition option defines the situations when UI actions are 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 record to access a UI action. This object can only be used for the UI actions that are displayed on forms.

note

Call the current object within the UI actions during the update since this object is defined. When creating a new UI action, the current value is NULL.

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.

note

Use the ss object to call the SimpleSystem methods.

This UI action is a reference to the record with the 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.

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

If the Related list checkbox is selected in the On List section, the parent variable is available in the condition script. This variable lets you access the form on which the related list is located. If you try accessing a field missing from the parent form, false is always returned.

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

When the current object is called, it is not necessary to use the initialize() method; the object context is already initiated.

When you place a UI action in a related list (the Related list checkbox is selected), you can access the object of the record on whose form the related list is located. The way of access varies depending on whether the server or client API is used:

  • In server scripts (the Client checkbox is cleared), the parent variable is available. The example below shows a script for a button in the Menu Items related list that removes the selected menu items and makes the parent menu category inactive if it contains no items:

    for (var key in currents) {
        currents[key].deleteRecord();
    }
    var record = new SimpleRecord('sys_menu_item');
    record.addQuery('category_id', parent.sys_id);
    record.query();
    if (0 == record.getRowCount()) {
        parent.active = false;
        parent.update();
    }

  • In the client scripts (the Client checkbox is selected), the s_form object is available. The example below shows a script that generates a URL address for the New button in a related list. The generated URL address changes depending on the form the list is placed on:

    const CURRENT_RELATED_ID = s_form.getUniqueValue();
    const currentTable = s_form.getTableName();
    const LIST_TABLE_NAME = s_list.getTablesName()[0];
    const tableName = {
        crm_opportunity: 'opportunity',
        crm_leads: 'lead',
        crm_marketing_campaign: 'campaign',
        crm_customer_company: 'company',
    };

    s_go.open(
        `/record/${LIST_TABLE_NAME}?field_related_${tableName[currentTable]}=${CURRENT_RELATED_ID}&field_related_element_type=${tableName[currentTable]}`,
    );