What are Containers?

Article contents



In the  Interface Builder page you can create UIs. To create functional UIs, you need to add elements. One of these elements are Containers and they can provide a space where objects can be located and organized.

There are multiple types of Containers and to see the full list and add these elements to your UI you need to expand the Layout Structure card on the left side of the screen:

  • Panel

  • Segment

  • Tab

  • Zone

  • Segment List
  • Stepper
  • Collapsible

Before moving forward, read our Getting Started with User Interfaces article to make sure you understand the fundamentals of UIs.

Note: In these Containers, you need to add Inputs. Learn more here.

Panel

A Panel is a simple container where other objects can be placed.

A Panel is not linked with Data Model elements. Only the objects that are located within the panel need to have corresponding values in the Data Model, so that the information inserted by the end-user can be saved.

Click on the Panel to modify its properties and the system will open the control property window.

Note: The color of the panel can be changed only on the title bar (where the name is located). You cannot modify the color within the panel or within the panel's elements.

Segment

A Segment is a container in which the end-user can add multiple lists of files.

Example: We construct the Segment to contain a Receipt Number, Receipt Amount, Card Number and a button to Attach Receipt Copy. If the end-user has, let’s say, 10 receipts that he needs to add in the database, he can easily press the Add New button, found in the right side of the segment to open another tab to input data. If the user wants to delete a tab, there’s an X located near the tab number.

Get & Save

The Segment is the only Container element that has exposed the Get & Save functionalities. This can help you connect a Segment with Data Model elements.

The Data Model for a Segment must be built differently. It must be set up as Is List and have a Class created that contains another Class as its Attribute Type.

Follow these steps to ensure that your Segment will function properly:

  1. Create a Class with an Attribute

  2. Add a new Attribute to an existing Class

  3. Select Is List at Attribute Level

  4. Add the Class created as a type of the Attribute

You must first connect the Segment with the corresponding Data Model element so you can connect the objects within the Segment to their respective Data Model elements.

Note: Save will have the same value as Get so that when an end-user saves an UI, without submitting it forward on the flow, he can return to work on his task and the UI will retrieve all the information that was initially added in the fields.

Tab

The Tab element is a Container which enables the app-maker to add multiple panels of information in one window so the end-user can easily switch and navigate through them and interact if necessary.

Zone

The Zone element is a Container that makes arranging and organizing objects within the UI much more easier. This element will only be visible to the developer when constructing the UIs in the editor. It is presented as a grey area.

Note: It’s recommended to add a label to your Zone so you can keep track of it in your editor area. This label will not appear as a title for the end-user.

Segment List

A Segment is a container in which the end-user can add multiple lists of files. The only difference between this type of segment and the one explained above, is that the Segment List will display the lists vertically and not horizontally.

Stepper

The Stepper element is a container that conveys progress through numbered steps. Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. It’s usually useful when the user has to follow steps to complete a process, like in a wizard.

Collapsible

 The Collapsible element is a container that will allow the hiding of content that is not immediately relevant to the user. Think of them as accordion elements that expand when clicked on.These containers can be opened or closed independently of each other.