In the Interface designer, you can customize the company interfaces with pre-built and custom widgets.
Widgets are interface elements that allow users to upload files, display data, activity streams, tables, lists, etc.
You can use widgets to:
By combining different widgets, you create the interface tailored for your users. In addition, you can save your widget combination and use it on different pages and forms over and over again. This way you can create various interfaces catered to the needs of your company.
How to open Interface designer
Interface designer helps you design app forms and pages, as well as create custom widgets. There are three ways to open the designer depending on the item that you want to set up.
- Go to the Administration > Interfaces. Create a new widget or a page, and the designer will open;
- To set up an interface for a particular workspace or app, go to the workspace menu, click on the gear icon next to its name and select Interfaces. Then create a new page or widget; the designer will open automatically.
- To set up a new page in the main menu or in the workspace menu:
- Add a new page or open an existing one. Click on the gear icon in the top right corner of the page and click on the Widget builder option.
- To set up an app form:
- Go to the advanced mode for configuring app forms. Open the tab corresponding to the form you wish to set up, click <Default>, then click +Create form. If the form has been created earlier and now you want to edit it, click Edit form. To learn more, see Form template.
Here is what Interface designer looks like:
- Modeling canvas. This is where you will create your widgets and set up pages or forms.
- The toolbar allows you to Save, Publish, or Debug an interface, as well as Check if the widgets are correctly composed.
- Designer has five main tabs: Table, Context, Scripts, History and Files.
- These tabs on the right are for adding components to interfaces:
- Widgets. All the available widgets are grouped by types;
- Properties. System properties of widgets, all the context variables of an app or business process, as well as properties added on the Context tab.
On the Template tab you will be creating the design of pages and forms, and filling up the interfaces with widgets.
To add a widget, drag it to the canvas and configure its settings. You can use standard widgets as well as create your own custom widgets. Standard widgets are grouped by type.The widgets available to you depend on the interface item that you are setting up: the sets of widgets for pages and forms slightly differ. For example, side panel widgets cannot be used on pages, whereas the widgets designed specifically for pages cannot be used on forms.
To create a custom widget, combine the standard widgets. For example, you can take the Panel with header, add Columns to it, and then add a Table to one of the columns to display a report. Save this widget, and you will be able to use it later when setting up other interfaces.
On the Context tab you can add properties to use on the modeling canvas or in scripts. To create a new property, click +Add and specify its parameters. You can learn more about properties in: Context tab, System data types, Context types.
On this tab, you can create data processing scripts to use them later in widget settings. For example, a script can display current exchange rates, or change a page's header according to the current date.
Also, you can set up widget behavior, for example, to show a pop-up window when the mouse hovers over a certain area of the page. You can learn more in Scripts.
When writing scripts, you can use Global constants. They give you access to variables in workspaces and to global parameters. To enable access to global constants, click the Settings button in the designer's toolbar and check the Global box. Please note that if you use global constants, the export of your app or workspace will be limited.
To learn more about scripts, see ELMA365 TS SDK.
After you have made changes to the interface of a form or page, you have to publish them in order to make the changes available to users. All the published versions are listed on the History tab, including the author, time of publication, and comment.
On this tab you can restore a previous version of the interface. Simply choose its name in the list, click Apply version in the top right corner of the page, and confirm your action.
The settings of the version that you've selected will be applied to the draft currently opened in the Template tab. All the changes that are not published will be lost.
You can edit this restored version, change the layout of elements or widget settings. To apply this interface and make it available to users, once again click Save and Publish in the toolbar.
The top toolbar has the following controls for working with the interface you are setting up:
- Save. The page or form that you have set up will be saved as a draft. The changes will not be made available to users. You can return and edit it later;
- Check. The widgets that you have added are checked for errors. If there is an error, for example, there is an invalid scripts, you will see an alert;
- Publish. After being published, scripts are displayed on forms or pages, and become available to users. Each time you want your changes to be applied, you need to publish the interface. When publishing, you can leave a comment about the changes you have made. This comment will then be displayed on the History tab where you can restore one of the previous versions of a page or form;
- Debug. A window opens showing you how the form or page will look like in the interface after it is published. You can learn more in Debugging an interface;
- Settings. Enable access to global constants in scripts. This option in only available in the Scripts tab.
- Undo. When working in the Template tab, you can undo your latest action: adding or deleting a widget, moving it, changing its settings;
- Redo. You can repeat the action that you have undone.
To make changes available to users do not forget to publish the form or page that you have configured.
The navigation feature makes it easy to switch to the required item on the modeling canvas, which is convenient when you are using a lot of widgets in your interface.
Navigation is activated when there are two or more items in a widget.
To switch to the required item, hover the mouse over the name of the widget in the top left corner of the canvas. Then click on the gear icon that will appear to the right of the name. In the context menu, select an item.
It will be highlighted blue on the canvas.
Found a typo? Highlight the text, press ctrl + enter and notify us