You are here:
Flex List
Consumer Goods Cloud Mobile App Framework supports the Flex List feature in the GroupedList and the BreadCrumbControl UI controls. This feature provides better user experience for a mobile app user. The experience includes list-driven screens like the questionnaire screen or a survey screen, by enabling slide-in-out animations for list items.
Required Editions
| Available in Lightning Experience in Professional, Unlimited, and Enterprise Editions that have Consumer Goods Cloud enabled. |
For example, conditional questions or survey questions slide in (or are displayed) within a questionnaire or a survey. These questions are displayed in a defined and sorted sequence in the offline mobile app only if specific preconditions are fulfilled. If the offline mobile app user changes an answer to the question, the preconditions are evaluated once again. If these preconditions are no longer fulfilled, the associated questions slide out (hidden) and a new set of questions are displayed. It’s possible that several question slide out at the same time and several questions slide in at different places within the questionnaire.
The Flex List feature can be supported by setting the flex attribute to true within the GroupedList and the BreadCrumbControl UI controls. The Flex List feature provides the following sub feature:
If the flex attribute is enabled in the GroupedList or the BreadCrumbControl UI control, you can enable the slide in or the slide out feature. Based on the Edit and Access rights through Access Control List, you can enable the slide in or slide out feature when the visibility of the list item is changed. This animation feature of a list item is possible by using the itemAnimation attribute. The itemAnimation attribute can have the following values:
- rightToLeft: The list items slide in or slide out from right to left in the screen.
- leftToRight: The list items slide in or slide out from left to right in the screen.
- none: The list items don’t slide in or slide out in the screen.
Important Warning
A flex list always displays a maximum of 500 list items without paging, even if it’s bound to a paged List Object (LO). In other words, the flex list limits the number of list items displayed to 500. If there are more than 500 flex list items available, a message box at the end of the flex list notifies the user that only 500 list items are displayed. If the text in the message box exceeds two lines, the text is truncated with ellipses. Mobile theming support is available for this message box.
- If the flex attribute isn’t enabled or isn’t set to true or not used and the itemAnimation attribute is set, an error message is logged.
- If the itemAnimation attribute isn’t defined, the transition isn’t animated.
- If the flex attribute is set to true in the GroupedList or the BreadCrumbControl UI control and if more than one variant control of Dynamic type is used, the mobile app Framework logs a warning. The warning message includes the associated binding target names of the variant controls.
- If the flex attribute is set to false in the GroupedList or the BreadCrumbControl UI control and if more than one variant control of Dynamic type is used, the mobile app Framework doesn’t log a warning message.
Sample Code
<GroupedList name="MasterList" searchable="false" master="true" dataSource="ProcessContext::dataList" indexBar="false" flex="true" itemAnimation="leftToRight">
<Items name="Items" itemPattern="ListEAItem">
<ItemListLayout>
<Default>
<Header>
<Col bindingId="Col1Binding" align="left" />
<Col bindingId="Col2Binding" align="left" />
<Col bindingId="Col3Binding" align="left" />
<Col bindingId="Col4Binding" align="left" />
<Col bindingId="Col5Binding" align="left" />
</Header>
<Col layoutType="itemValue" bindingId="textBinding" />
<Col layoutType="itemValueSecondary" bindingId="iconBinding" />
<Col layoutType="itemValueSecondary" bindingId="boolBinding" />
<Col layoutType="itemValueSecondary" bindingId="addressTypeToggleBinding" />
<Col layoutType="itemValueSecondary" bindingId="variantBinding" />
</Default>
</ItemListLayout>
<Bindings>
<Resource target="Col1Binding" type="Label" defaultLabel="Column 1" id="Column1Label" />
<Resource target="Col2Binding" type="Label" defaultLabel="Column 2" id="Column2Label" />
<Resource target="Col3Binding" type="Label" defaultLabel="Column 3" id="Column3Label" />
<Resource target="Col4Binding" type="Label" defaultLabel="Column 4" id="Column4Label" />
<Resource target="Col5Binding" type="Label" defaultLabel="Column 5" id="Column5Label" />
<Binding target="textBinding" type="Text" binding=".text" bindingMode="ONE_WAY" />
<Binding target="iconBinding" type="Image" binding=".icon" bindingMode="ONE_WAY" />
<Binding target="boolBinding" type="Combo" binding=".bool" toggleId="Bool" bindingMode="ONE_WAY" />
<Binding target="addressTypeToggleBinding" type="Combo" binding=".adressTypeToggle" toggleId="BpaAddressType" bindingMode="ONE_WAY" />
<Binding target="variantBinding" type="Dynamic" binding=".variant" bindingMode="ONE_WAY" typeField="type" formatBinding="format" />
</Bindings>
</Items>
<Events> </Events>
</GroupedList>