Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

...

Info

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.

...

Info

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.

...

Related Articles: