New UI Modeling Experience
Posted March 2nd, 2023
New UI Modeling Experience
Posted March 2nd, 2023
This article features the new UI modeling experience. This is a faster and clearer way to model OMNIA pages and other UI elements.
The example above shows how easy it is to model a Form from scratch, making use of new accelerators, drag n drop, and the new property editor. This new way of modeling is available for all UI elements (Forms, Dashboards, Lists and Menus).
Overview
The preview area shows, in real time, the appearance of the user interface. It is possible to select any element to manage its properties, delete it or drop it on another location. In this new modeling experience you can change everything (layout, properties and behaviours) on the user interface and in the end decide if you want to discard or save those changes, using the buttons on the footer bar. The sidebar is divided in two sections:- Top Section:
- Add new elements () – Set of elements available to use on the interface;
- Elements Tree () – Hierarchical list where is possible to navigate and select the elements that compose the user interface;
- Configure View () – Tab where modeling options can be changed (e.g.: Whether or not to show hidden elements);
- Bottom Section:
- Property Editor () – Allows to change the properties of the selected element;
- Behaviour Editor () – Allows to manage the behaviours of the selected element.
Drag and Drop
One of the main features of the new UI modeling experience is the use of Drag N Drop to add new elements and move existing elements within the previewer.
On this example we start by adding a new Container element to the empty Form. Then we use the add element accelerator to add an input correspondent to the modeled entity attribute “Start Date”.
Finally, we add a Panel (one of the newest OMNIA elements) and then drag the input from the container to the panel.
Elements Tree
The elements tree tab shows the hierarchical list of the UI elements. To select an element you can either do it from the preview or the elements tree, as both will show the same element selected. The preview and the elements tree automatically scroll to the selected element to make it easier to locate an element on the UI.Property Editor
On the property editor it is possible to manage the properties and attributes of the selected element. The changes that are made to the properties are automatically mirrored on the previewer. This tab exposes all the available properties and attributes of each element. Therefore, the need to use the “initialize” behaviour in order to set the starting properties/attributes was drastically reduced. On the example above, besides changing the label, we hide the “Add new” button of the grid and disable the remove button of each line. This is something that previously could only be achieved using the “initialize” behaviour and now can be made with a couple of clicks.UI Behaviour Editor
Each OMNIA UI element has its own behaviours. These behaviours are used to execute actions (with javascript code) upon an element event (e.g.: When the form initializes, or the value of an input is changed). The new modeling experience features a “Behaviours” tab where the different types of behaviours of an element can be managed.
On the example above, we show how simple it is to program the click of a button (one of the newest OMNIA UI Elements) to change the “Description” input value. The enlarged code editor modal that opens up has new accelerators and features such as text finder and replacer.
Once a behaviour is added to an element, it’s label shows an indicator () so you can easily locate elements with behaviours. This indicator is also visible on the elements tree. We hope you’ve enjoyed the new User Interface modeling experiece. Feel free to let us know what you think about this new experience. Your feedback is always welcome.
This feature was part of our 3.5.0 version of the platform.
Do you wanna try our Platform and see just how easy it is?
Follow the link below and let us know so we’ll set up a demo environment just for you.