Interface Builder
A UI, or User Interface, is actually a broad term used in the technology world to refer to something that a person (or user) interacts with (or interfaces with) when using an object, service, website, or something else.
The Aurachain Interface builder is a powerful way to plan and prototype wireframes or digital forms with low or no code at all. Interfaces are the key part of an application because without them the user will not be able to interact with the application they were meant to.
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 the user accesses the User Interface Builder page, he 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 context of an app.
Page:
Import Interface - It will download/export the current interface on the user’s computer.
Export Interface - Select a UI from the user’s computer to upload.
Add a new interface - The window will allow the user 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 the user to modify an existing Aurachain Interface
Live Test - Basically, this is the preview mode for the user’s UI. However, this option won’t go through all of his app’s UI. Just this current one.
Remove - By clicking on the bin icon, the user will be able to remove an Aurachain Interface
Layout:
This is the section where all the components that will be used in building a user interface reside. These are objects that help you organize information. This is also the home of inputs which are elements that allow the app-maker to gain information from end-users, and the end-user to interact with the app.
All objects in the form of Inputs or Containers will be configurable each on its own:
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 more objects. |
Share Space | The 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 but custom colors can be added if necessary. |
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 wherein 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 fewer customization options.
Data
Here fields can be mapped to an attribute from the data model and saved in a different one as per business requirements.
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.
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 of 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)
or when the system fills in certain data on behalf of the user
Page 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 UI. Just this current one. |
Theme | Select the color accent used for the UI |
Layout elements:
This section will hold all the elements and components used in the user interface. It is a flexible container object, designed to store hierarchical data structures in memory. The type can be described as a cross between a list and a dictionary.
From this section, a user is able to delete unwanted components of the UI, selecting them one by one, simply by clicking on the bin icon.
Data Model Mappings:
This section will hold all the Data Model attributes mapped to their designated UI components from the user interface.
It is a flexible container object, designed to store hierarchical data structures in memory. The type can be described as a cross between a list and a dictionary.