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

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

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.