General

With the "UI Editor", the standard mask of the FSM can be easily and dynamically edited via a graphical interface. The changes are saved in a separate JSON file and stored in the custom folder. Further information about the file system can be found here.

Implementation

The "UI Editor" can be integrated through a JSON file. The "UI Editor" can then be opened via a menu option. In the JSON file, enter the value "openEditor()" for the menu option in the property "onClick". The brackets contain the name of the JSON without the file extension and in inverted commas. In addition, you must define the visibility of the menu option via the parameter "show" (see example).

Example

"text": "Open editor",
"onClick": "openEditor('parts')",
"show": "isEditorSupported() && !isConnectedToEditor() && !entity.IsNew"

Editing the mask

Structure of the "UI-Editors"

The "UI Editor" opens in a separate browser window. The window mask is displayed as a tree structure in the left area of the browser window. The properties are displayed on the right and can also be edited here. The currently selected item is highlighted in colour.

General structure of the tree

The topmost point of this tree structure is called "UI" and cannot be edited. The current app (i.e. the current object, e.g. machine / address, etc.) is located one level below. The next level lists the areas of the app and below that the individual fields.

Restructuring the tree structure

As soon as you select an item in the tree structure, several buttons are displayed under the selected item. With the buttons and you can move the position of this point in the tree structure. The button can be used to delete the item and all subitems. With the button a further subitem can be created. At the top level ("UI") and at the bottom level ("Field") the button is not displayed. When you add a new field to a region, you must select a field type.

Properties of the individual levels

Common properties

Under "Visibility" you specify a condition when the component should be displayed. First you have to choose whether the visibility of the tab should be dependent on an expression or constant. If the visibility is dependent on an expression, you have a text field to enter and if the visibility should be constant, there is a checkbox that determines whether the component should be displayed or not.

App

Here you can edit the Menu options, the translations, the Tables options, the Tab- und Window text and the Context menu.

Tabs

Under "Title" you can enter the name or the designation of the area. If you want to have a language-dependent name, you must enter it in three curly brackets. You can also use the magnifying glass to find a translation. If there is no translation, the title in the mask remains empty. If you want to have a component under a tab, you can enter the component under "Module name". Here you enter the name of the component with the path. If you have a component under a tab, you can no longer add regions to it. The icon of the tab can be changed under "Icon name". To do this, enter the name in the text field or look for one using the magnifying glass. The icons are sorted alphabetically.

Region

Under "Title" you can enter the name/designation of the region. If you want to have a language-dependent name, you have to enter it in three curly brackets. If there is no translation, the title in the mask remains empty. Under "Visibility" you can specify the condition when and if the corresponding region should be visible. Under "Render header" you can specify whether the region header should be displayed.

Field

Here you can find all the properties with which you can configure the fields. You can find more about this here.