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. 

 

 

 

 

 


Related Articles: