List Management

The framework includes an easy way to define a list container via configuration.

Although you can define each row (list item) individually, you can also create a configuration that automatically renders a cell for each BO coming from the binding.

This feature is widely used with master/detail application types, which follow a drill-down approach. You can use either of the two approaches or mix them, but you can use only one ListItem with feed in a ListSection, which is groups cells within the definition.

<!-- Tile definition -->
<Tile tileId="LeaveRequestList">
<!-- Tile title comes from a localized resource -->
<P pid="title" value="{$_i18n.leaverequestlist}"></P>
<!--  ‘LeaveRequests’ binding referenced from the tile-->
<BindingRef ref="LeaveRequests" />        
<ListContainer>
<ListSection>
<!-- A feed is assigned to the ListItem => a cell is created and displayed for each BO -->
    <ListItem feed="LeaveRequests"> 
    <!--the ‘actionIndicator’ refers to the cell’s accessory type -->
        <!--Layout the cell’s content -->

<LinearContainer layout="horizontal">
        <!—UILabel inside the cell -->
<UIElement type="label">
<!—UILabel’s text is the absence type coming from thebinding -->
			<P pid="text" value="{$LeaveRequests.AbsenceTypeName}"></P>
		</UIElement>
	</LinearContainer>
	</ListItem>
    </ListSection>
</ListContainer>
</Tile>

The framework provides support for grouping list rows in sections, based on a chosen property of the BO. You can use this feature in a ListSection by adding the autoGroupBy attribute as shown in this example:

<Tile tileId="GroupScreen">
  <BindingRef ref="Titles"/>
  <ListContainer>
    <!-- autoGroupBy attribute is used to group the items based on their ratings -->
	<ListSection autoGroupBy="Rating">
          <!—Section Header definition for the group ‘Rating’ -->
		<ListBar> 
			<LinearContainer layout="vertical"> 
                       <UIElement type="label">
                         <!—Section Header definition for the group ‘Rating’ -->
		            <P pid="text" value="Rating: {$Titles.Rating}"/>
			   </UIElement>
			 </LinearContainer>
		</ListBar>
             <! -- Cells with feed -->
             <! -- Remark: feed should be the same as used for autoGroupBy -->
		<ListItem feed="Titles">
			<LinearContainer layout="vertical">
				<UIElement type="label">
					 <P pid="text" value="{$Titles.Name}"/>
				</UIElement>
			</LinearContainer>
		</ListItem>
	</ListSection>
</ListContainer>
</Tile>