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: 

1. Sidebar - Helps you to create and organize Pages, UI Widgets and API for data integration
2. Page Editor - This is the canvas where you can drag UI Widgets from the Widget pane and design how you page will looks. Each page has own canvas.
3. Widget Settings - Shows the properties of the selected UI Widget on canvas

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

• Binding to another widget

---

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.