Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

Tip

Role required: admin.

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 functionality overridden on the current level functionality of the inherited the UI actions inheritance.
    • UI actions specified on the current level.
  2. A UI action inherited on the 1st level with the override functionality  level with functionality overriding specified on the 2nd level cannot be applied on the 3rd level of inheritance. An inherited UI action specified on the 2nd level may be applied to the 3rd one.
  3. A UI action inherited on the 1st level with the override functionality overriding specified on the level 3rdnd level cannot be overridden on overridden on the 2nd level level. In this case, the system warns of active override option and requires for its deactivation.
Info

The system provides UI Actions inheritance with the Inherits option. When a UI action has a Table attribute specified, and the Inherits option is defined with TRUEenabled, the system applies this UI action to all children tables of the one specified before. 

To child UI actions, the reference Parent option defines an ancestor UI action with functionality options may be overridden if needed.

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 or Save and Exit 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. On forms:Form Button
      Form
      • Header
      Button
    • Form Bottom Button
      • Left
      • Header Right
      • Hamburger
      Form Context
      • Menu
      Form
      • Field Label Context Menu
      Form
      • Link
    • List Banner Button
    • List Bottom Button
    • List Burger Menu
      • Bottom
    • On lists:
      • Header Left
      • Header Right
      • Hamburger Menu
      • Column
      List Table
      • Header Context Menu
      List
      • Row Context Menu
      List
      • Link
      List Header Right Button
      • Bottom
    • Other:
      • Button Context Menu
      • Dependency Map Context Menu

UI actions on form


Image RemovedImage Added


UI actions on list


Image RemovedImage Added

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 → 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 changes.
Tip

You can edit some types of UI actions like buttons, links in a quick way. For this, please complete the steps below:

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

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.
Info

Most hamburger menu items and some buttons on forms (New, Save, Save and Exit) and on lists (New, Delete) are global.

Embed a UI Action

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

Note

This option is only available for UI actions of the Form context menu and List burger menu types Hamburger Menu type.

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 Hamburger Menu checkboxes in the Form Style or List Style lanes 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. 

Info

It makes sense to invoke current within UI actions on updating since this object is defined in this situation. When creating a new UI action, the current value is NULL.

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.

Image Modified


Info

The ss object allows invoking the SimpleSystem methods.

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.

Code Block
languagejs
titleFunction definition
linenumberstrue
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 in the form field. In there, you can determine UI action behavior logic using .  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 on every table field with the Description field content.:

Code Block
languagejs
themeEclipse
titleUI action
linenumberstrue
ss.addInfoMessage(current.description);


Info

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

UI Action form

description

fields


Choose a list type where this UI action should be displayed. Available options are:

  • Lists+Related lists - this UI action should be displayed on both lists and related lists.
  • Lists - this UI action should be displayed on lists only.
  • Related lists - this UI action should be displayed on related lists only.

If Both or Related lists options are selected, then a checkboxes set appears where you can define on which related list types this UI action can be displayed. You can select more than one option.

FieldMandatoryDescription
NameYUI action name. It specifies a text displayed on the button, link, or as a context menu item.
TableYA table to display UI action on. A form or a list or a context menu should be used.
CommentsParentNSpecify the context menu item to be a parent for the current UI action (applicable for the Hamburger Menu UI action type).
CommentsNUI action UI action brief description.
ActiveNMark this checkbox to display the UI-action is displayed on form (list, context menu).
InheritsNSelect this checkbox to make this UI action available on all the tables child for the table specified in the Table field.Overrides by
OrderNThe displaying order. If there are over one UI-actions of the same type, then they will be arranged in ascending order.
Overrides byN

This field specifies UI action, which will be overridden This field specifies UI action, which will be overridden by current UI action.

Info

Learn more about UI action inheritance and override.


Conditions and Actions
Show InsertOrderNThe displaying order. If there are over one UI-actions of the same type, then they will be arranged in ascending order.
ParentNSpecify the context menu item to be a parent for the current UI action (applicable for the Form Context Menu UI action type).
Use forN

Option

Example

Reference field typeChild Categories related list on Menu Categories record form
List field typeUser Criteria related list on Service Catalog form
Document ID field typeScript Log related list on Script form
Scripted listTranslations related list on Column record form
M2M typeUser Group, User Roles related lists on User record form
Select this checkbox to display this UI action on new record form.Show UpdateNSelect this checkbox to display this UI action on existing record form.Wait Server ResponseN

Select this checkbox to specify that the system should wait for the server response after clicking the button. The button is disabled until the server responds.

ClientNSelect this checkbox to specify that this UI action executes only on the client side (in the user's browser).ConditionNA condition written using server-side API. If this condition is be met, then the Script will be executed.ScriptNThe script that will be executed by clicking the UI action.URLN

This URL will be followed after clicking the UI action. You can use variables listed below there:

VariableDescription
{CURRENT_TABLE}The name of the current table on the record of which the UI action is located.
{CURRENT_ID}ID of the current record on which the UI action was called.
{CURRENT_FORM_VIEW}The form view name on which the UI action was called.
{CURRENT_RELATED_LIST_VIEW}The related list view name on which the UI action was called.
{CURRENT_TABLE_ID}ID of the table which is the current one for the UI action.
{CURRENT_LIST_VIEW}The list view name for the list on which the UI action was called.
{LIST_TABLE_NAME}

The table name for the list displayed in the current page.

If the current page path is /list, then this variable value equals to the {CURRENT_TABLE} variable value. If the current page path is /record, then this variable value contains the name of the active related list.

{LIST_TABLE_ID}

The table ID for the list displayed in the current page.

If the current page path is /list, then this variable value equals to the {CURRENT_TABLE_ID} variable value. If the current page path is /record, then this variable value contains the name of the active related list.

{RELATED_COLUMN_NAME}This variable returns column name containing the referenced table ID.
{RELATED_LIST_ELEMENT_ID}This variable returns the active related list element ID.
{CURRENT_RELATED_ID}This variable returns the current related record ID.
{CURRENT_FORM_ID}This variable returns the current form view ID.


Position and StyleUse forN

In this block of fields, choose options defining where this UI action should be displayed. Available options are:

List type:

  • Lists+Related Lists – this UI action should be displayed on both lists and related lists.
  • Lists this UI action should be displayed on lists only.
  • Related Lists this UI action should be displayed on related lists only.

If Lists+Related Lists or Related Lists options are selected, then a checkboxes set appears where you can define on which related list types this UI action can be displayed. You can select more than one option.

These options display relation types between related list elements and the parent table.

For example: the User Criteria related list contains the Users field of the List type. This field is related with the Users (user) table, so this related field is of the List field type.

By selecting and unselecting appropriate checkboxes, you can place UI action you are creating on related list of corresponding type.

Option

Example

Reference field typeChild Categories related list on Menu Categories record form.
List field typeIndicator related list on Agreement record form.
Document ID field typeScript Log related list on Script form.
Scripted listTranslations related list on Column record form.
M2M typeUser Group, User Roles related lists on User record form.


Form buttonsForm StyleN


Column
width60%

The style of buttons on the form

Conditions and ActionsShow InsertNSelect this checkbox to display this UI action on new record form.Show UpdateNSelect this checkbox to display this UI action on existing record form.Wait Server ResponseN

Select this checkbox to specify that the system should wait for the server response after clicking the button. The button is disabled until the server responds.

ClientNSelect this checkbox to specify that this UI action executes only on the client side (in the user's browser).ConditionNA condition written using server-side API. If this condition is be met, then the Script will be executed.ScriptNThe script that will be executed by clicking the UI action.URLN

This URL will be followed after clicking the UI action. You can use variables listed below there:

VariableDescription
{CURRENT_TABLE}The name of the current table on the record of which the UI action is located.
{CURRENT_ID}ID of the current record on which the UI action was called.
{CURRENT_FORM_VIEW}The form view name on which the UI action was called.
{CURRENT_RELATED_LIST_VIEW}The related list view name on which the UI action was called.
{CURRENT_TABLE_ID}ID of the table which is the current one for the UI action.
{CURRENT_LIST_VIEW}The list view name for the list on which the UI action was called.
{LIST_TABLE_NAME}

The table name for the list displayed in the current page.

If the current page path is /list, then this variable value equals to the {CURRENT_TABLE} variable value. If the current page path is /record, then this variable value contains the name of the active related list.

{LIST_TABLE_ID}

The table ID for the list displayed in the current page.

If the current page path is /list, then this variable value equals to the {CURRENT_TABLE_ID} variable value. If the current page path is /record, then this variable value contains the name of the active related list.

{RELATED_COLUMN_NAME}This variable returns column name containing the referenced table ID.
{RELATED_LIST_ELEMENT_ID}This variable returns the active related list element ID.
{CURRENT_RELATED_ID}This variable returns the current related record ID.
{CURRENT_FORM_ID}This variable returns the current form view ID.
Position and StyleForm StyleN
Column
width60%

The style of buttons on the form view. Available options:

  • Unstyled
  • Primary
  • Positive
  • Negative
  • Secondary.
Column

Image Removed

Form Bottom ButtonNButton at the bottom of the form.Form ButtonNButton in the form header on the right.Form Context MenuNContext menu item on the form.Form Header ButtonNButton in the form header on the left.Form LinkNLink on the form.Form Field Label Context MenuNAn item of the context menu for the fields on the form.List StyleN
Column
width60%

The style of buttons on the form view. Available options:

  • Unstyled
  • Primary
  • Positive
  • Negative
  • Secondary.


Column


List Banner ButtonHeader LeftNButton in the list form header on the left.List Bottom ButtonHeader RightNButton at the bottom of the list.in the form header on the right.Hamburger List Burger MenuNA hamburger Context menu item on the listform.List ChoiceField Label Context MenuNMenu An item for actions applicable to list entries.List Header Right ButtonNButton in the list header on the right.of the context menu for the fields on the form.LinkNLink on the form.BottomNButton at List LinkNLink on the bottom of the listform.List Table Header Context MenuButtonsList StyleNA context menu item for the elements of the list.List Context MenuNContext menu item on the list.Button Context MenuNA context menu item for UI actions of the button type.


Column
width60%

The style of buttons on the form view. Available options:

  • Unstyled
  • Primary
  • Positive
  • Negative
  • Secondary.


Column

Image Added


Header LeftNButton in the list header on the left.Header RightNButton in the list header on the right.Hamburger MenuNA hamburger menu item on the list.Column Header Context MenuNA context menu item for the elements of the list.Row Context MenuNContext menu item on the list.LinkNLink on the bottom of the list.BottomNButton at the bottom of the list.Button Context MenuNA context menu item for UI actions of the button type.Dependency Map Context MenuNMenu item on the Dependency Map Context MenuNMenu item on the service model form.


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:

Code Block
languagejs
themeEclipse
title__resolveServerResponse()
linenumberstrue
await 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.

Code Block
languagejs
themeEclipse
title__rejectServerResponse()
linenumberstrue
s_i18n.getMessage('The report has been saved', (response) => {
      s_form.addInfoMessage(response);
      __resolveServerResponse()
    });
.catch(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

 property 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:

 

Code Block
languagejs
themeEclipse
titlecurrentCell
{
const rowRecordId attribute: "state",
  columnId: "155931135900001086",
  columnType: "choice",
  recordId: "161782918714652945",
  tableId: "155931135900000083",
  tableName: "task",
  value: "4"
}
Note

This method is available to use only on UI actions implementing List Context Menu. To use it for the specified UI action, please navigate to its record form within the UI actions (sys_ui_action) dictionary, open the record and select this checkbox first on the Position and Style tab. After all changes, save the page.

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.
FieldDescriptionattribute

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.

columnIdID of the column to which the specified field is related.columnTypeType of the column to which the specified field is related.recordIdID of the record.tableIdID of the table containing specified field and record.tableNameSystem name of the table containing specified field and record.
= window.currentCell.recordId;
const rowTableName = window.currentCell.tableName;
if (rowRecordId) {
  s_go.open(`/record/${rowTableName}/${rowRecordId}`);
}


Note

This property is available to use only on UI actions implementing Row Context Menu. To use it for the specified UI action, please navigate to its record form within the UI actions (sys_ui_action) dictionary, open the record and select this checkbox first on the Position and Style tab. After all changes, save the page.

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 the developer console, type window.currentCell and submit.
FieldDescription
attribute

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.

columnIdID of the column to which the specified field is related.
columnTypeType of the column to which the specified field is related.
recordIdID of the record.
tableIdID of the table containing specified field and record.
tableNameSystem name of the table containing specified field and record.
valueCurrent cell value.

Example 3

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

For 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:

Code Block
languagejs
themeEclipse
titleDelete Selected Records
linenumberstrue
if (currents.length) {
  const record = new SimpleRecord(currents[0].getTableName());
  record.addQuery('sys_id', 'in', currents.map(checkedRow => checkedRow.sys_id));
  record.selectAttributes(['sys_id']);
  record.query();
  record.deleteMultiple();
  ss.setRedirect(); // reload window
} else {
  ss.addErrorMessage('No selected rows.');
}
valueCurrent cell value.


Table of Contents
absoluteUrltrue
classfixedPosition