UI Editor - Basic
UI Editor Layout
Let's start from exploring the first tool in the UBOS ecosystem which will help us to build Dashboards, Admin panels, CRUD applications and other type of web apps faster and with almost no coding.
After all the settings have been configured, you need to click on the Create Service button and proceed to payment. And completing the payment, you need to wait for a green checkmark to appear next to the service.
If the UI Editor is ready for use - click on it.
UI Editor has own layout which contain 3 main windows:
Widgets Pane
The Widget pane can be opened by clicking on the +
button inside the current Page. After the pane will be opened you will see all available widgets that you can drag&drop to the page canvas for designing your page
Adding UI Widgets
Each widget from the widget pane can be dragged on the page canvas to build the UI. After the widget is placed on page canvas it can be resized to fit into your page design and data that need to be displayed.
Widget Settings
Each widget has a list of properties that can be configured in the Widget Settings window on the right side of the UI Editor. To open the Widget Settings window you just need to click on the label on top of the widget. Widget properties can be used to change widget style, data, or action.
Also, widget properties can be dynamic values. To make it dynamic you need to type {{ }}
inside the widget property and it to another Widgets or API. More information about how to work with widgets data and APIs you can find here
Deploying UI
Let's create a sample page that consists of 3 Button
widgets and 1 Table
widget. Try to configure widgets on the page accordingly to the example below:
When the page is ready you need to deploy it to see it from the side of the end-user, to do that click on the Deploy button on the Top Bar, on the modal window that will appear after, click on View Application and a new tab will be opened in your browser with the preview URL of your application.
Working with API
To make your app dynamic you need to have some data, you can get that data by creating an API. You can visualize any data received from API call by set widgets:
Widget
|
Property | Data Type |
Text | Text | String |
Table | Table Data | Array of objects |
Chart | Chart Data | Array of (x,y) |
Image | Image | URL / Base64 |
Dropdown | Options | Array of (label, value) |
You can create new API by clicking on the +
button in the sidebar menu inside current Page. After the click, you should see the API pane where you can edit API properties
API Pane
Here you can modify your API by REST interface. API supports all REST HTTP methods GET,POST,PUT,DELETE,PATCH
and here you can configure values of header, body fields and params.

Values for the REST API can be taken from widgets by entering {{ widgetName.propertyName }}
inside the field.
No Comments