Create a Customer List Page in an MDK App

This page is a searchable list that displays all customers.

To create the Customer List page, you will create a Section page and drag the Customer Contact Table control onto the page. In the property palette, you will link the control to the Customer Collection and then map data and actions to different areas of the cell object in the property palette. One nice feature about the Contact Table control is that it has icons that can activate device functionality such as phone, email, video and more.

1. In the project, right-click the Pages | MDK: New Page.

   

2. Select | Section and click Next.

   

   You can find more details about the Section Page in this documentation.

3. Enter the page Name as Customers_List, and click Finish.

   

4. Once the page opens in the page editor, click on the white area to select it’s Action Bar, and set the Caption to Customers.

   

5. In the Layout Editor, expand the Controls | Data Bound Container group, drag and drop the Contact Table control onto the Page area.

   

6. In the Target section, provide the below information:

   Field	Value
   Service	Select com_sap_edm_sampleservice_v4.service from the dropdown
   EntitySet	Select Customers from the dropdown

   

7. In the Properties pane, click the link icon to open the Object Browser for the Description property. Double click the City property of the Customer entity to set it as the binding expression and click OK.

   

   Be careful not to select City from Address (ESPM.Address).

   

8. Remove the default value for the DetailImage property. Repeat the above steps for Headline and Subheadline properties binding to LastName and FirstName properties of the Customer entity respectively.

   You should have final results as below.

   

9. In the Search section of the Properties pane, change both the SearchEnabled and BarcodeScanner properties to true.

   

10. In the Data section of the Properties pane, click Add to add a new activity item.

    

11. Expand the added item, click the dotted icon to open the Object browser to bind the ActivityValue to the PhoneNumber property of the Customer entity.

    

12. Similarly, add one more activity item, select Email from the dropdown and bind it to EmailAddress property of the Customer entity.

    

Now, you will add a button on the Main page and from there, you will navigate to the Customers_List.page.

1. In the Main.page, expand the Controls | Static Container group, drag and drop the Button Table control onto the Page area.

   

   Container includes controls that act as containers for other controls, such as container items. A container is constant across all pages. The size of a container depends on the controls and contents it contains.

2. Expand the Static Items section of the Controls palette.

   Drag and drop a Button onto the Button Table container on the page.

   

   Each static container type in a Section Page can contain specific controls (static items).

   You can find more details about Container and Item it may contain in this documentation.

3. In the Properties pane, provide the below information:

   Field	Value
   Image	Click link icon to open the browser and bind it to customer SAP icon
   Title	Customers

   

   Image property is referencing to the SAP font icon.

4. Under Events tab, click the dotted icon for the OnPress Handler property and select the Create a rule/action.

   

5. Keep the default selection for the Object Type as Action and Folders path.

   

6. Choose UI in Category | click Navigation | Next.

   

7. In the Base Information step, provide the below information and click Finish.

   Field	Value
   Name	NavToCustomers_List
   PageToOpen	Select Customers_List.page from the dropdown

   

You will now deploy the updated project to your MDK client.

Click the Deploy option in the editor’s header area, and then choose the deployment target as Mobile Services

Make sure you are choosing the right platform tab above.