You are here:
Area
An area is a part of a section and describes a genetic area in the User interface. Areas contain one or more UI controls. You can use different area patterns to further define the layout of a section.
Required Editions
| Available in: Enterprise, Performance, and Unlimited Editions |
The table lists the Area pattern attributes.
| Attribute | Description | Data Type | Required? | Validation |
|---|---|---|---|---|
| areaName | Unique name of the area element | String | Yes | Uniqueness in contract |
| areaPattern | Defines the pattern to use for the area. | area pattern | Yes | |
| lazyLoading | Some Area types like MultiArea support lazy loading. Enable lazyloading by setting the attribute to true. | Boolean | No |
An area contains these areaPatterns.
- Login area
- Welcome area
- Button grid area
- Single element area
- Grouped element area
- Filter element area
- Card area
- Multi area
Login area
The login area pattern is a specialized pattern that describes the login screen and is only used there. It can only contain the UI controls necessary to authenticate a user. This pattern requires two control levels: a group element to contain the login fields, and an image button.
Welcome area
The welcome area pattern is a specialized pattern that is only used in the main menu screen. It contains a welcome message UI control that displays a welcome message, the company logo, the user name, and an image. This pattern supports only one control level: the Welcome control.
Button grid area
The button grid area pattern is used when multiple buttons need to be arranged in a grid. It contains buttons as UI controls and auto-arranges them in a grid that fits on the device screen. If more buttons are added than fit on one device screen, the button grid area automatically manages navigation between the number of screens needed to show all the buttons in the grid. This pattern supports one or more control levels, which must use ImageButtons.
Single element area
The single element area pattern contains a single UI control. This pattern has no additional logic. This pattern supports only one control level.
Grouped element area
The grouped element area pattern is for multiple UI controls arranged in groups. Each group can contain one or more UI controls. The grouped element area pattern contains support for naming the groups and adding UI controls to the groups. Groups are usually displayed inside a border to separate them visually in the UI. Group names are usually displayed in the UI to enhance the user experience. This pattern supports one or more children of control type. Valid controls include ActionBar, EmbeddedList, and GroupElement.
Filter element area
The filter element area is a specialized single element area that can act as a filter in the filtered view area section. This pattern supports only one control level: an ImageSelector.
Card area
Use card area to arrange CardContainers by dividing the available area into columns. This pattern supports one or more control levels, which must be CardContainers, NavigationMenuContainers, or SyncCardContainers.
Multi area
The MultiArea displays multiple areas in one place, allowing a user to switch between them to display different data in the same area. For example, you could use a MultiArea to show an overview and details for a single element. This pattern supports one or more area levels.
Sample XML Code:
Special Areas
<Area areaName="welcomeArea" areaPattern="WelcomeArea">
<Area areaName="mainArea" areaPattern="LoginArea">
Areas
<Area areaName="[AreaName]" areaPattern="GroupedElementsArea">
<Area areaName="[AreaName]" areaPattern="FilterElementArea">
<Area areaName="[AreaName]" areaPattern="ButtonGridArea">
<Area areaName="[AreaName]" areaPattern="SingleElementArea">
<Area areaName="[AreaName]" areaPattern="TabElementArea">
<Area areaName="[AreaName]" areaPattern="MultiArea">
- areaPattern
This table describes the values that the attribute areaPattern supports.
