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.
Remove	By clicking on the bin icon you will be able to remove an Aurachain Interface
Fragment	This 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

Label	Change the default name of the object.
Position Index	This is how you move the elements/objects in your UI. You type its position, and it will change accordingly.
Code	Unique identifier for the object automatically generated but modifiable by the user.
Container	In this object, you can add add more objects.
Share Space	Current object will share the row with another object.
Read-only	The object will be read-only. As in, the end-user cannot write or edit this object.
Mandatory	The object will require the user to perform an action on it for the work task to be submitted/completed.
Color	Customize the color of the panel. There is a limited color palette.
Group name	Insert the name of the radio button group.
Width	Write the width of the image.
Height	Write the height of the image.
Align	Set up where in the UI you want your image displayed
Select Image	Upload a static image to appear in the UI.
Rows	Select the number of rows to be enabled for the user to write free text.
Background Color	The color of the button.
Align	Left/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 Tooltip	Insert the text that will appear when you hover the mouse over the object.
Icon	Add icons to your objects to better identify them.
Icon Color	You 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)

Related content