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 Cell 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 Cell Table control is that it has icons that can activate device functionality such as phone, email, video and more.
-
In SAP Business Application Studio project, right-click the Pages | MDK: New Page.
-
Select | Section and click Next.
You can find more details about the Section Page in this documentation.
-
Enter the page Name as Customers_List
and click Finish.
-
In the Properties pane, set the Caption to Customers.
-
In the Layout Editor, expand the Controls | Data Bound Container group, drag and drop the Contact Cell Table control onto the Page area.
-
In the Target section, provide the below information:
Field | Value |
---|
Service | Select SampleServiceV2.service from the dropdown |
EntitySet | Select Customers from the dropdown |
QueryOptions | $orderby=LastName |
-
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)
.
-
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.
-
In the Search section of the Properties pane, change both the SearchEnabled and BarcodeScanner properties to true.
-
In the ActivityItems section of the Properties pane, click Add to add a new activity item.
-
Expand the added item, click the 3 dots icon to open the Object browser to bind the ActivityValue
to the PhoneNumber
property of the Customer entity.
-
Similarly, add one more activity item, select Email from the dropdown and bind it to EmailAddress
property of the Customer entity.