Skip to main content

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.

To open visual editor we need to click on the UI Editor menu on the Service manager

After the click UI Editor will be opened in Main work zone.

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

image-1639502247286.gif


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.

image-1639503276874.gif

Widgets list

  • Button
  • Chart
  • Checkbox
  • Container
  • Datepicker
  • Dropdown
  • Filepicker
  • Form
  • Image
  • Input
  • I-Frame
  • Maps
  • Radio
  • Rich Text Editor
  • Tabs
  • Table
  • Text
  • Video

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.

image-1639504856656.gif

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:

image-1639591593367.png

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.

image-1639591967058.gif

 


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

image-1639506610173.gif

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.