Tile Layouts

The framework enables you to build complex metadata-driven UIs in the same manner as with native UIKit elements.

The configuration example in this section describes the tile’s layout as presented in this picture:

The UI contains a flat UITableView (ListContainer) with sections (ListSection). Each section contains a label. Note the usage of expressions, for example, this one, which provides the text to appear on the label:

<UIElement type=”label”> 
  <P pid=”text” value="Since { $_format.date($_date($_year($_now()), 1, 1), long)}" />
  <P pid=”width” value="33%" />
  <P pid=”margin_left” value="3%" />
  <P pid=”style” value="MAFListScreenSectionHeaderTopText"/>
  …
</UIElement>

See Use of Functions for a detailed discussion about the expressions that are supported by the Extensibility Framework. TableViewCells are described in the ListItem section.

<Tile tileId="LeaveRequestList">
<P pid="title" value="{$_i18n.leaverequestlist}" />
<BindingRef ref="LeaveRequests"/>    
 <!-- Define a ListContainer (UITableViewController) -->
 <ListContainer>
	<!-- Content aligned to top and centered horizontally, table covers full width -->
 <P pid="valign" value="top" />
 <P pid="halign" value="center" />
 <P pid="width" value="100%" />
	<!-- Table section -->
 <ListSection>
	<!-- The cell -->
      	<ListItem feed="LeaveRequests">
	 <!-- Arrange table cell content -->
        		<LinearContainer layout="horizontal">
<P pid="width" value="100%" />
<P pid="valign" value="top" />
		  <!-- Arrange the "Leave Type" icon on the left side -->
<LinearContainer layout="vertical">
    <P pid="valign" value="center" />
    <P pid="halign" value="left" />
    <P pid="width" value="20%" />
	<!--  The image resource -->
<UIElement type="image">
    <P pid="imageSrc" value="Accident.png" />
    <P pid="halign" value="center" />
</UIElement>
</LinearContainer>
			 <!-- Arrange the labels -->
<LinearContainer layout="vertical">
<P pid="width" value="80%" />
<P pid="halign" value="right" />
			<!-- Label showing the leave duration -->
<UIElement type="label">
<P pid="text"
value="{$_concat($_format.date($LeaveRequests.StartDate, medium),' - ',$_format.date($LeaveRequests.EndDate, medium))}" />
<P pid="width" value="98%" />
<P pid="uiElementId" value="DateLabel" />
<P pid="margin_left" value="2%" />
<P pid="style" value="MAFListDate" />
</UIElement>
            			<!-- Further details skipped for brevity -->
            			</LinearContainer>
          		</LinearContainer>
</LinearContainer>
      </ListItem>
    </ListSection>
  </ListContainer>
</Tile>