No-Code User Interface Editor

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:

(click to enlarge picture)

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:

Label: the output name of the element

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)

 

Note: all properties can be changed via UI Behaviours, using Javascript. We’ll address this topic in future blog posts, but if you wish to know more check our documentation page about it.

Additional Elements

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”.

Container
(Container with two regular elements, a checkbox and an input field)

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.

We hope you’ve enjoyed this first look at our User Interface Editor and its potential as a productivity tool,  don’t forget to follow us on LinkedIn and Twitter, and subscribe to our newsletter so you don’t miss any of our weekly updates.