You are here:
Breadcrumb control
The Breadcrumb control is a nested list control. You can use the breadcrumb control to enhance navigational functionality in the application. Breadcrumb navigation tracks the steps you take in an application and helps you to retrace steps quickly.
Required Editions
| Available in: Enterprise, Performance, and Unlimited Editions |
Each screen represents one hierarchy level. Every page, except the last page, shows categories for the next hierarchy level. The last page shows the individual items at the lowest hierarchy level.
The table lists the Breadcrumb control attributes.
| Attribute | Description | Data Type | Required | Validation |
|---|---|---|---|---|
| name | Identifier of control | String | Yes | Uniqueness (contract) |
| searchable | Determines whether the search bar is visible. | Boolean | ||
| groupBy | Defines the attribute all list entries must have, which is used for grouping. | string | ||
| sortBy | The attribute is used to sort the items within a group. | string | ||
| master | Defines the GroupedList as MasterControl in a MasterDetailSectionPage. | boolean | ||
| dataSource | Defines the data linked to the list. | string | ||
| hasBorder | Defines whether the list has a border. | boolean | ||
| sortInsideGroupBy | Defines the list item member name to sort the list items in a group. | Any attribute of the attached data | ||
| sortDirectionInGroup | Defines the direction of the alphanumeric sort | string[ASC | DESC] | ||
| numberpadDefaultField | Specifies the stepper field name of the underlying LI within the Datasource contract. The stepper field value is used when a user clicks the Next or Previous button in the number pad to place the input cursor focus in the specified field. | Any attribute of the attached data | ||
| showPreviousNextEnter | Defines if the Previous, Next, and Enter buttons are displayed when the number pad is opened in the grouped list. The attribute can have values: true and false.
|
The BreadCrumbControl element contains these sub-elements:
- BreadCrumbControl Hierarchy
- BreadCrumbControl Items
- BreadCrumbControl Bindings
BreadCrumbControl Hierarchy
The Hierarchy element defines the characteristics of the list levels that are shown for breadcrumb control categories. It doesn’t define the lowest level, in which individual items are shown. The table lists the Hierarchy element attributes.
| Attribute | Description | Value or Pattern | Required? |
|---|---|---|---|
| name | Unique name of the Hierarchy element. | string | Yes |
| labelAttribute | The simple property of a list object that contains the label for the hierarchy level, which corresponds to the list object. | string |
The Hierarchy element contains these sub-elements.
- Hierarchy Binding Resource
- Hierarchy DataSources
- Hierarchy Events
Hierarchy Bindings
The BreadCrumb control Hierarchy Binding node consists of the Binding elements that can be used in the BreadCrumb control element. You can use the Binding to bind values from the objects to the UI. Different binding modes are used to control the updating process of the values in the UI and objects.
| Attribute | Description | Value or Pattern |
|---|---|---|
| target | Describes the actual UI element. | string [RootLabel; ShowCategory; AddItem] |
| type | Defines how the resource is shown. | string [Text] |
| binding | Source of the binding. | string |
| bindingMode | Binding mode is used to control the updating process. | string [One Way] |
Hierarchy Binding Resource
The BreadCrumb Hierarchy Binding Resource element is used to bind localized labels into the UI. The default value is shown if there are no localized files for the selected language.
| Attribute | Description | Value or Pattern |
|---|---|---|
| target | Describes the actual UI element. | string [RootLabel] |
| type | Defines how the resource is shown. | string [Label] |
| Id | The ID is used to map the localized resource and the actual element in the UI. | string |
| defaultLabel | One default value can be set, depending on the type, that is, defaultText | string |
| bindingMode | Only applies if type = Label. Determines whether a long line of text is wrapped (true) or trimmed (false). | string [One Way] |
Hierarchy Events
The BreadCrumb control Hierarchy Events node consists of the ItemSeletedEvent element that can be used in the BreadCrumb control element. ItemSeletedEvent is triggered when an offline mobile app user has tapped a list item. It’s a required event.
Hierarchy DataSource
There’s one data source per hierarchy level, except for the lowest level. Each data source is a list object.
| Name in XML | Description | Value or Pattern |
|---|---|---|
| name | name | string |
| keyAttribute | The list object simple property that holds the name of the setting. | string [Label] |
| refKeyAttribute | The list object simple property that holds the reference key of the setting. | string |
BreadCrumbControl Items
For BreadCrumbControl, the Items element defines the itemPattern used for the items of a list and which data is displayed using this pattern.
| Attribute | Description | Value or Pattern | Required? |
|---|---|---|---|
| name | Unique name of this Items element. | string [Items] | yes |
| itemPattern | Specifies the Item Pattern used for the list items | string | yes |
The BreadCrumbControl Items contain these child nodes,
- ItemListLayout: The property List Layout represents node ItemListLayout in contract XML and includes valid XML structure.
- ContextMenu: A context menu provides contextual actions to the user. The type and number of actions depend on the data context, the application state, and the control the menu is attached.
BreadCrumbControl Bindings
The Bindings element consists of the Resource and Binding elements. The table lists the targets that are supported for the Resource and Binding elements in the BreadCrumbControl element.
| Attribute | Description | Value or Pattern |
|---|---|---|
| target | Describes the actual UI element. | String[DynamicallyGroupBy] |
| type | Defines how the resource is shown. | String [Text] |
| binding | Dynamically group by | string |
Sample XML Code
<BreadCrumbControl name="BeadCrumbCtrl" searchable="true" groupBy="groupBy" sortBy="sortBy" master="true" numberPadDefaultField = "quantity" showPreviousNextEnter = "true" dataSource="dataSource" hasBorder="true">
<Hierarchy name="hierarchyName" labelAttribute="labelAttribute">
<Bindings>
<Resource target="RootLabel" type="Label" id="labelId" defaultLabel="defaultLabel" bindingMode="ONE_TIME" />
<Binding target="ShowCategory" type="Text" binding="showCategoryBinding" BindingMode="ONE_WAY" />
<Binding target="AddItem" type="Text" binding="addItemBinding" BindingMode="ONE_WAY" />
</Bindings>
<Events>
<ItemSelectedEvent event="ise">
<Params>
<Param name="id" value=".id" />
</Params>
</ItemSelectedEvent>
<HierarchyBackEvent event="hbe">
<Params>
<Param name="id" value=".id" />
</Params>
</HierarchyBackEvent>
</Events>
</Hierarchy>
<Items name="Items" itemPattern="itemPattern">
<ItemListLayout>
<xml />
</ItemListLayout>
<ContextMenu>
<Bindings>
<Binding target="DataSource" binding="ctxMenuSource" bindingMode="ONE_WAY" />
</Bindings>
<Items name="ContextMenuItems">
<Bindings>
<Binding target="Icon" type="Image" binding="iconBinding" />
<Binding target="Text" type="Label" binding="textBinding" />
<Binding target="Editable" type="Editable" binding="editableBinding" />
<Binding target="Visible" type="Visible" binding="visibleBinding" />
</Bindings>
</Items>
</ContextMenu>
</Items>
</BreadCrumbControl>