WebUIs are created in WebUI Builder. It is a powerful drag & drop interface where you can type in text, insert and set up interactive widgets and style a WebUI. You can access WebUI builder from the link at the bottom of any WebUI.
The builder consists of 4 main areas:
- Main sidebar: here you can select which WebUI or user you want to edit. You can also create new ones.
- Editing area: here you can type in the title of the UI the editing area where you can drop widgets from Widgets sidebar.
- Widgets sidebar: here you can see all available widgets. You simply drag them to the Editing area
- Styling and users sidebar: here you can adjust the styling of the WebUI, which users can access it and other options
Editing area
When you click on the Create new UI in the Main sidebar you’ll see an Editing area with one row and one empty column. A row is a basic element of a WebUI and you can either prepend or append them by clicking the + buttons.
Every row can have 1 or up to 4 columns. You can adjust the number by clicking one of the icons.
Columns are a drop area onto which you can drop the widgets from Widgets sidebar. Once in the column, you can also rearrange them.
Widgets sidebar
In the widgets sidebar, you’ve got several widgets that you can drag onto one of the columns in the Editing area. There are 3 types of them: static, interactive and scheduled.
Static widgets
These are static elements on a WebUI that a user cannot interact with.
Text block
Text block is a simple text block. You can use the WYSIWYG editor to style the text.
Padding
Padding is used to insert vertical spacing between 2 widgets. You insert the height in pixels.
Interactive widgets
Interactive widgets on a WebUI allow the user to interact with Lightact.
Button
Button has 2 parameters: Label and Command.
A Label is a text which displays on the button itself and Command is the text that will be written in the Command stack.
Slider
A slider allows you to adjust the value of a numerical variable. It has 3 parameters: Min, Max and Variable name.
Min and max set the range and Variable name is the name of the variable this slider sets. When WebUI loads the slider position is adjusted according to the current value of this variable.
Color picker
A Color picker allows you to set a text variable containing hex color representation. It has only 1 parameter which is a Variable name.
Spinner
Spinner is another way to set and read numerical variables. Similarly to Color picker, it has just a Variable name parameter.
Textbox
A Textbox is used to set the value of a text variable. It has just one parameter Variable name. Upon WebUI refresh, the value in the textbox shows the current value of the variable.
Scheduled widgets
File reader
File reader has 2 parameters: Name and File URL. It regularly checks the contents of the file in a given URL and writes it to the database under the given name. In every Pro sever the update interval is set to 1 minute by default, but you can change it in the Windows Task Scheduler. TODO
