Layout template files

A layout template file is an XML file that defines the structure and the sequence of controls on views in a Maximo Anywhere mobile app. When you change the structure of a view in the application definition file, you must update the associated layout template file.

Maximo Anywhere include layout template files for the list views of the mobile apps. In the app.xml files for the mobile apps, the <listitemTemplate> element identifies the name of the layout template file that is used for the view.

The layout template files for the Work Execution app are in the Anywhere\MaximoAnywhere\apps\WorkExecution\artifact\layouts\templates\small directory and for the Work Approval app is in the Anywhere\MaximoAnywhere\apps\WorkApproval\artifact\layouts\templates\small directory.

Structure of layout files

The <layout> element is the root element of a layout template file. The <row> element and the <column> element within the layout identify the placement of the fields in the view. To apply a structure to a mobile app, you can define the following attributes:
width attribute
The width of the layout as a percentage on the mobile screen. You define the width in the <layout> element.
columnid attribute
The attachment point for the field in the mobile view. The columnid attribute is associated with the layoutInsertAt attribute in the app.xml file.
colspan attribute
The number of columns that the row occupies.
rowspan attribute
The number of rows a column should span. You adjust the rowspan if you need to maintain the vertical position of columnid attributes.

Example of the layout for the work list view

The WorkListItem.xml layout file has three rows that define the structure of any associated mobile view and spans the width of the mobile screen. Each row defines the columnid attribute that is associated with the layoutInsertAt attribute in the app.xml file. The colspan attribute defines the number of columns that the row occupies.

<layout width="100">
	<row>
		<column columnid="item3" colspan="10" />
		<column columnid="button1" colspan="2" rowspan="3" halign="right"/>
	</row>
	<row>
		<column columnid="item1" colspan="3" />
		<column columnid="item2" colspan="7" />
	</row>	
	<row>
		<column columnid="item4" colspan="5"  />
		<column columnid="item5" colspan="5" />
	</row>
</layout>

The Assigned Work view is defined in the app.xml file for the Work Execution app. The associated layout file, which is identified by the layout attribute, is the WorkListItem.xml file. The resourceAttribute defines each field that is shown in the view. The layoutInsertAt attribute defines the attachment point for the fields. For example, the layoutInsertAt attribute for the startime field is identified as item 2. The columnid attribute in the WorkListItem.xml file for item2 is in the second row. Therefore, the start time field is on the second row of the view.

<view id="WorkExecution.WorkItemsView" label="Assigned Work"
			saveonshow="true" showBackButton="false" >
	<listItemTemplate layout="WorkListItem">
		<listtext resourceAttribute="wonum" layoutInsertAt="item1"
			cssClass="bold textappearance-medium"/>
 		<listtext resourceAttribute="starttime" layoutInsertAt="item2"/>
		<listtext resourceAttribute="statusdesc" layoutInsertAt="item4"/>
		<listtext resourceAttribute="description" layoutInsertAt="item3"
			cssClass="bold textappearance-medium"/>
		<listtext resourceAttribute="assetnumanddescription" layoutInsertAt="item5"/>
</view>