Customize the Mobile UI

In this lesson, you will learn how to customize the mobile-specific UI settings using the Model Editor. The RowLayout node of the DemoTask_ListView model will be customized, and the Delete action will be moved to the bottom of detail views.

By default, ListViews are formatted as endless lists where each entry displays one property value. The first visible column from the Views | <ListView> | Columns node supplies the values. To change the layout and/or include data from additional properties into the view, use the Views | <ListView> | RowLayout node .

Customize Row Layout in List Views

In the Solution Explorer, double-click the Model.xafml file in the MySolution.Mobile project. Navigate to the Views | MySolution.Module.BusinessObjects | DemoTask_ListView | RowLayout node. You'll find the Subject property as a child node there. Right-click the RowLayout node and then select Add | LayoutViewItem. For the new node, change the Id property to Description, set ShowCaption to False, FontSize to 14px, FontColor to DarkGray and MaxSize.Height to 200. Right-click the node and select Down.

MobileApplicationTutorial_LayoutViewItem

Save changes to the model and restart the project. You will now see Subject and Description in each of the Tasks list entries.

MobileApplicationTutorial_TaskAndNotes

Customize Actions

Actions can be customized using the ActionDesign model node. For example, move the Download Report action to the bottom of the Report detail views.

In the Model Editor, navigate to the ActionDesign | ActionToContainerMapping | Save node and drag the DownloadReportAction action to the PopupActions node.

MobileApplicationTutorial_DownloadReportAction

Save the changes and restart the application. Open any Reports Detail View to see the Download Report action at the bottom of the view.

MobileApplicationTutorial_DownloadReportActionResult

Next Lesson: Install the Application to a Smartphone

See Also