Interface Builder

Created by Former user (Deleted)
Last updated: Sep 20, 2022 by Loredana Vodinszki

A UI, or User Interface, refers to a means by which a computer system interacts with a user, for instance to obtain input or display output.

The Aurachain Interface builder is a powerful way to visually design and assemble web pages that allow users to interact with Aurachain applications. These interactions are completely customizable and range from displaying information to obtaining files or approvals. The Interface builder even allows defining interactive events such as dynamic pages or signing smart contracts, and can be styled to fit any existing design.

On the left side of the Interface Builder, you can switch between viewing the list of Pages (1), and viewing the list of Layout elements (2). The middle of the Interface builder shows the interface or fragment currently being edited. On the right side you can see and change the configuration the page or the page element currently selected (3), inspect the Layer hirerachy (4), or see the data model mappings (5).

Pages:

Shows the Interfaces and Fragments that are part of the Application. You can create new interfaces, delete existing ones, as well as exporting the current interface or uploading a previously exported Interface.

Fragments are Interfaces that can be included in other (multiple) Interfaces. See https://aurachain.atlassian.net/wiki/spaces/HowTo/pages/518782980

Layout:

The Layout panel contains collections of containers and elements that can be included in a User Interface. These elements can be used to display and structure information, obtain inputs, and provide all kinds of interactivity. See https://aurachain.atlassian.net/wiki/spaces/HowTo/pages/180388259 and https://aurachain.atlassian.net/wiki/spaces/HowTo/pages/180388261 for more information.

Configuration

The configuration tab on the right side of the Interface Builder allows tweaking and configuring a large variety of properties and attributes for each element on the page, or the page itself.

When no element is selected, you can edit the Page properties, tweak its appearance and behavior, or enter Live mode

When an element is selected, you can edit various Attributes, Data, Properties, Format, Events, Sizing, and Styles. The configuration options differ depending on the type of element. See https://aurachain.atlassian.net/wiki/spaces/HowTo/pages/1947861003.

Page properties

When no element is selected, you can view and change page-level properties, such as:

  • Interface/Fragment: The type of page. Interfaces are standalone pages, while Fragments can be include in other Interfaces.

  • Name: Short name used to identify the user interface when configuring an application 

  • Code: Unique identifier for the user interface defined by the user 

  • Description: Business description with UI purpose

Live mode

When no element is selected, the Testing field allows you to enter “Live” mode in order to see and interact with the Interface as a regular user. Use this mode to test your Interface before making it public.

Appearance and behavior

Allows changing the color theme of the entire page. You can even upload your own theme (download a theme first to see the file structure).

Layers:

 

This section show the hierarchy of elements and components in the user interface.

It also provides and easy way to delete unwanted elements or see which elements have custom scripts.

 

Here you can search by element name or code, or you can have a deeper insights if you click on “JS” button in which case the system will search within the existing custom scripts.

 

 

 

 

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. 

 

 

 

 

 

 

 

Keyboard Shortcuts

Keyboard Shortcut

Details

Keyboard Shortcut

Details

Shift + Delete

Delete a component

Shift + adding a component

The added component will be added in the shared space of the previous component

Related Articles: