By definition, our development platform falls into the category of low-code, however, there are some no-code elements that we haven’t gone into detail yet. Today we’re going to focus on the a very important no-code feature of our platform, the User Interface (UI) Editor.
User Interface Editor
Our UI editor allows you to customize the interface that your web application’s users will interact with. Whether you want to change the look of a form or a dashboard, the UI Editor will allow you to customize all its elements appearance.
When customizing a form, or a dashboard, our platforms modeler offers a “User Interface” tab, that works as a WYSIWYG (what you see is what you get) tool. Here is an example of the modeler’s view of a dashboard, and the actual web application view:
As we can see in the previous image, the modeler’s layout is a very close approximation of the web applications frontend, allowing us to see what the changes to our elements will look like, before deploying them.
Each element has a number of customizable properties that can be configured at will, with no added code. These properties are:
– Help Text: small help text presented on the “?” icon
– Row: the row in which the element will appear
– Column: the column where the element will appear
– Size: the size of the element (1 to 12. The value 12 represents full container width
– Is the element hidden?: change the visibility of an element to on/off
– Minimal visible screen: select the minimal visible screen where the element should appear (options: Mobile, Tablet, Desktop)
Apart from regular attribute elements, there are three other special types of elements that can be added to a form or dashboard. These elements are:
– Web Components: for visual and functional extensibility (see blog post)
– Containers: to group elements in an accordion-style visual element
– Calendars: for visual input and output of date sensitive data (see blog post)
Because we’ve already written detailed posts about Web Components and Calendars, on this blog post we’ll elaborate on the element “Container”.
As illustrated by the previous animation, a container is an element that can contain any other elements, and can change their visibility according to its state. If the container is open, its elements are visible, if closed, the elements are hidden.
There are no limitations regarding the type or amount of elements you place in a container. They can be regular attributes, web components and even calendars.