In theInterface 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:
- Segment List
Before moving forward, read our Getting Started with User Interfaces article to make sure you understand the fundamentals of UIs.
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.
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:
Create a Class with an Attribute
Add a new Attribute to an existing Class
Select Is List at Attribute Level
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.
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.
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.
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.
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.
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.