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
|It will save the UI. This action can be done by using the Save button, on the right side of the screen.|
|It will download/export the current interface on your computer.|
|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.|
|System organizes the UIs/fragments to folders automatically|
|Will allow you to modify an existing Aurachain Interface|
|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|
Unique identifier for the user interface defined by the user
Short name used to identify the user interface when configuring an application
Business description with UI purpose
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.
Select the color accent used for the UI
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.
Basic Components - These are objects that help you organize information. There are four types of organizers:
- Segment List
Inputs - These interface elements provide the user with objects for specific actions/fields in the UI.
It showcases a view of the classes from the data model(s).
It showcases a view of the catalogs form the data model(s)
It showcases the existing integration points.
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 Elementsright 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 buttonat the top right of the page.
|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.|
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.
It will require the app maker to insert a validation method through coding.
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.
|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.|
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)