Getting started with User Interface Builder
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 iconIf 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.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. |
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.
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)