Getting started with User Interface Builder

Article contents





A User Interface Builder is also called an UI or, to put it simply, an interface. The UI is the method in which a person controls an application. Practically every app has a User Interface which allows the user to interact with said software.

Within the User Interface Builder page you will design UIs for the end-user to read or input data, and act by approving, rejecting or escalating the task at hand.

When you access the User Interface Builder page, you will be able to:

  • Select an interface from the existing ones.

  • Create a new interface.

Creating a new interface will require you to add a Code and Name, so it can be easily added/retrievable. Keep in mind that all the UIs created here are only in the contex of an app.

User Interface actions

The  actions sidebar will be displayed on the left side of the screen. The sidebar is organized in two main sections: Pages and Layout

Pages actions 

Save
It will save the UI. This action can be done by using the Save button, on the right side of the screen.
Import Interface
It will download/export the current interface on your computer.
Export Interface
Select a UI from your computer to upload.
Add new interface
The window will allow you to select and create a new UI or modify an existing one.
Folder
System organizes the UIs/fragments to folders automatically
Edit Interface
Will allow you to modify an existing Aurachain Interface
Live Test
Basically, this is the preview mode for your UI. However, this option won’t go through all of your app’s UIs. Just this current one.
RemoveBy clicking on the bin icon you will be able to remove an Aurachain Interface
FragmentThis is a group of elements that you can reuse on all the interfaces of the Application process


Pages Properties

Code

Unique identifier for the user interface defined by the user

Name

Short name used to identify the user interface when configuring an application

Description

Business description with UI purpose

Live Test

Basically, this is the preview mode for your UI. However, this option won’t go through all of your app’s UIs. Just this current one.

Theme

Select the color accent used for the UI

Custom CSS

You will be able to stylize the Aurachain interface by adding custom CSS code

Add custom JS

You will be able to run scripts for the Aurachain interface just by adding custom JS code.

Layout functionalities

Interface

Basic Components - These are objects that help you organize information. There are four types of organizers:

  • Panel
  • Segment
  • Segment List
  • Tab
  • Zone
  • Stepper
  • Collapsible

Inputs - These interface elements provide the user with objects for specific actions/fields in the UI.

Artifacts

Models

It showcases a view of the classes from the data model(s).

Catalogs

It showcases a view of the catalogs form the data model(s)

API

It showcases the existing integration points.

Control properties

Each object has a set of properties that must be set up.

To set up an object click on it so that the Properties of that object will be displayed.

Each object will be visible in order of addition in the Layout Elements  right sidebar. Here you can easily delete an object just by selecting it and clicking on the bin icon    

If you don't want to lose any of your work done in Interface Builder make sure to save it by clicking on the save button at the top right of the page.

Note: Depending on the type of Container (Panel, Segment, Tab, Zone, Control) that you are creating, the Control Properties can have more or less settings properties.

Attributes

LabelChange the default name of the object.
Position IndexThis is how you move the elements/objects in your UI. You type its position, and it will change accordingly.
CodeUnique identifier for the object automatically generated but modifiable by the user.
ContainerIn this object, you can add add more objects.
Share SpaceCurrent object will share the row with another object.
Read-onlyThe object will be read-only. As in, the end-user cannot write or edit this object.
MandatoryThe object will require the user to perform an action on it for the work task to be submitted/completed.
ColorCustomize the color of the panel. There is a limited color palette.
Group nameInsert the name of the radio button group.
WidthWrite the width of the image.
HeightWrite the height of the image.
AlignSet up where in the UI you want your image displayed
Select ImageUpload a static image to appear in the UI.
RowsSelect the number of rows to be enabled for the user to write free text.
Background ColorThe color of the button.
AlignLeft/right/center alignment options.
Note: Depending on the type of element you add, Attributes can have more or less customization options.

Data

Where applicable, every element should have a Get & Save Data Model.

Get (Source) - Choose the value from the list where you want your object to take data from.

  • We set up the corresponding attribute in Get (source) so that we can retrieve the information inserted and saved by the end-user.

Save (Data Model) - Choose the value from the list where you want your object to be saved in the data model.

  • We set-up the corresponding value in the Save (Data Model) so that we save the information inserted in the UI by the end-user, in the database.

Option Values - choose a list of values that will be displayed in an object.

Note: In both Get and Save we add the corresponding attribute from the Data Model.

Validation

It will require the app maker  to insert a validation method through coding.

Visibility

Another task for the app maker to write code for specific needs - if a field should be visible or not, and when that field should be visible or not.

Properties

Help TooltipInsert the text that will appear when you hover the mouse over the object.
IconAdd icons to your objects to better identify them.
Icon ColorYou can choose the color for your icons.


Script

Write commands in a coding language (e.g. calculations, limitations etc.) to be executed further in the UI, which are to be validated in various moments, such as:

  • on Task initiation (onInit)

  • when taking a decision (onChange, onSave, onSubmit, onClick)