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
- 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.
- 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.
- 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:
- Make a UI action parent by setting the Inherits checkbox active and clicking Save.
- Make a UI action child by specifying the Parent field with the UI action you want, then customizing the record.
- Click Save or Save and Exit to apply changes.
To override a UI action, complete the steps below:
- Open the child UI Action form.
- In the Overrides by field, specify a parent UI Action that should be overridden.
UI actions types
- On forms:Form Button
- Header
- Form Bottom Button
- Left
- Header Right
- Hamburger
- Menu
- Field Label Context Menu
- Link
- List Banner Button
- List Bottom Button
- List Burger Menu
- Bottom
- On lists:
- Header Left
- Header Right
- Hamburger Menu
- Column
- Header Context Menu
- Row Context Menu
- Link
- Bottom
- Other:
- Button Context Menu
- Dependency Map Context Menu
UI actions on form
Image Removed
Image Added
UI actions on list
Image Removed
Image Added
UI actions customizing
You can create new or customize existing UI actions.
To do this, please complete the following steps:
- Navigate to System Definitions → Settings → UI Actions.
- Click New or select an existing UI-action.
- Customize UI-action using the form provided.
- 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:
|
Global UI Actions
You can make a UI action display on all tables.
To do that, follow the steps below:
- Open the UI action record desired.
- On the form, specify Global table in the Table field.
- 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:
- 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.
- Click Save and Exit to leave the form.
- Create a child UI action of the same type specifying its Parent option with UI action created before.
- (Optional) Set the Inherits option active.
- 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 | ||||||
---|---|---|---|---|---|---|
| ||||||
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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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
descriptionfields
Field | Mandatory | Description | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Name | Y | UI action name. It specifies a text displayed on the button, link, or as a context menu item. | ||||||||||||||||||||||||||
Table | Y | A table to display UI action on. A form or a list or a context menu should be used. | ||||||||||||||||||||||||||
CommentsParent | N | Specify the context menu item to be a parent for the current UI action (applicable for the Hamburger Menu UI action type). | ||||||||||||||||||||||||||
Comments | N | UI action UI action brief description. | ||||||||||||||||||||||||||
Active | N | Mark this checkbox to display the UI-action is displayed on form (list, context menu). | ||||||||||||||||||||||||||
Inherits | N | Select this checkbox to make this UI action available on all the tables child for the table specified in the Table field.Overrides by | ||||||||||||||||||||||||||
Order | N | The displaying order. If there are over one UI-actions of the same type, then they will be arranged in ascending order. | ||||||||||||||||||||||||||
Overrides by | N | This field specifies UI action, which will be overridden This field specifies UI action, which will be overridden by current UI action.
| ||||||||||||||||||||||||||
Conditions and Actions | ||||||||||||||||||||||||||||
Show InsertOrder | N | The displaying order. If there are over one UI-actions of the same type, then they will be arranged in ascending order. | ||||||||||||||||||||||||||
Parent | N | Specify the context menu item to be a parent for the current UI action (applicable for the Form Context Menu UI action type). | Use for | N |
Option | Example |
---|---|
Reference field type | Child Categories related list on Menu Categories record form |
List field type | User Criteria related list on Service Catalog form |
Document ID field type | Script Log related list on Script form |
Scripted list | Translations related list on Column record form |
M2M type | User Group, User Roles related lists on User record form |
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.
This URL will be followed after clicking the UI action. You can use variables listed below there:
Variable | Description |
---|---|
{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. |
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 type | Child Categories related list on Menu Categories record form. |
List field type | Indicator related list on Agreement record form. |
Document ID field type | Script Log related list on Script form. |
Scripted list | Translations related list on Column record form. |
M2M type | User Group, User Roles related lists on User record form. |
Column | ||
---|---|---|
| ||
The style of buttons on the form |
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.
This URL will be followed after clicking the UI action. You can use variables listed below there:
Variable | Description |
---|---|
{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. |
Column | ||
---|---|---|
| ||
The style of buttons on the form view. Available options:
|
Column |
---|
|
Column | ||
---|---|---|
| ||
The style of buttons on the form view. Available options:
|
Column |
---|
Column | ||
---|---|---|
| ||
The style of buttons on the form view. Available options:
|
Column |
---|
|
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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
s_i18n.getMessage('The report has been saved', (response) => { s_form.addInfoMessage(response); __resolveServerResponse() }); .catch(__rejectServerResponse);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
() methodproperty 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 | ||||||
---|---|---|---|---|---|---|
| ||||||
{ 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:
- Open any list containing any values
- Open developer console in your browser
- Right-click on any cell to get a context menu
- In a 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.
= 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:
- Open any list containing any values.
- Open developer console in your browser.
- Right-click on any cell to get a context menu.
- In the developer console, type window.currentCell and submit.
Field | Description |
---|---|
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. |
columnId | ID of the column to which the specified field is related. |
columnType | Type of the column to which the specified field is related. |
recordId | ID of the record. |
tableId | ID of the table containing specified field and record. |
tableName | System name of the table containing specified field and record. |
value | Current 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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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.');
} |
Table of Contents | ||||
---|---|---|---|---|
|