Create a Customer Detail Page in an MDK App

This page will show related details for a customer. In this page, you will add an Object Header control that is used to display information (like first name, last name, date of birth, email address & phone number) about the header of an object and Static Key Value control to display key value pair items like address, city, postal code & country.

1. In SAP Business Application Studio project, Right-click the Pages folder | MDK: New Page | Section | Next.

   

2. In the Base Information step, enter the Page Name Customers_Detail and click Finish to complete the page creation process.

   

3. In the Properties pane, provide the below information under DesignTimeTarget.

   Property	Value
   Service	Select SampleServiceV4.service from the dropdown
   EntitySet	select Customers from the dropdown

   

   DesignTimeTarget is a page level property similar to Target but it is only used for design time. This helps in validating the binding context of current page. For more details, see documentation.

4. set the Caption to Details.

   

5. Next, you will add an Object Header container to display information like first name, last name, date of birth, email address & phone number.

   In the Layout Editor, expand the Controls | Static Container group, drag and drop the Object Header control onto the page area.

   

6. Now, you will replace the default values of the control’s properties with the values from customer entity.

   In the Properties pane, click the link icon to open the Object Browser for the BodyText property.

   Double click the DateOfBirth property of the Customer entity to set it as the binding expression and click OK.

   

7. Repeat the above steps binding below Properties:

   Property	Value
   Description	{CustomerID}
   DetailImage	Click link icon to open the browser and bind it to customer SAP icon
   FootNote	{EmailAddress}
   HeadlineText	{LastName}
   StatusText	{PhoneNumber}
   Subhead	{FirstName}
   SubstatusText	Remove the default property

   DetailImage property is referencing to the SAP font icon.

   Page should look like below.

   

8. In the main area of the page, let’s display some other details like; address, city, postal code, county.

   Drag and drop a Static Key Value container onto the page under the Object Header.

   

9. Expand the Static Items section of the Controls palette and drag and drop a Key Value Item onto the Static Key Value container on the page.

   

10. Repeat the process and drag three more Key Value Items onto the Static Key Value section so you have a total of four when you are done.

    

11. Select the upper left Key Value Item and set the KeyName to Address.

    

12. For this tutorial, you will set the value as a combined binding of house number and street. You can find more details about Target Path.

    You will start with first part of the binding for Address property.

    Click the link icon next to the Value field to display the Object Browser and double click HouseNumber to set it as the first part of the binding. Don’t click OK as you will set second part of the binding too.

    

    Now, set second part of the binding.

    The cursor will be at the end of binding in the Expression field. Add a space and then select Street property and click Insert.

    Click OK to set the binding.

    

    Be careful not to double click Street as that will replace the existing expression with just the Street property.

    Street should be selected from Customer entity.

13. Repeat the process and set the upper right Key Value Item KeyName to City and bind the value to the City entity property.

14. Repeat the process and set the lower left Key Value Item KeyName to Postal Code and bind the value to the PostalCode entity property.

15. Repeat the process and set the lower right Key Value Item KeyName to Country and bind the value to the Country entity property.

    Be careful not to select City, Postal Code & City from Customer.Address (ESPM.Address) collection.

    The page design should look like as below screenshot.

    

Now, you will create a Navigation action that opens the Customers_Detail.page when called.

1. Navigate to Pages | Customers_List.page, select the Contact Table control, navigate to the Events tab. Click the 3 dots icon for the OnPress property and select the Create a rule/action.

   

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

   

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

   

4. In the Base Information step, provide the below information and click Finish to complete the action creation process.

   Field	Value
   Name	NavToCustomers_Detail
   PageToOpen	Select Customers_Detail.page from the dropdown

   

   when an end-user selects a customer, the Customer Detail page will open. MDK automatically passes the selected customer to the detail page.

Deploy the updated application to your MDK client.

1. Right-click Application.app and select MDK: Deploy.

   

2. Select deploy target as Mobile & Cloud.

   

   You should see success message for both deployments.

   

   Alternatively, you can select MDK: Redeploy in the command palette (View menu>Find Command OR press Command+Shift+p on Mac OR press Ctrl+Shift+P on Windows machine), it will perform the last deployment.

   

Make sure you are choosing the right device platform tab above.

Are you wondering how exactly MDK knew that clicking on a record in list page would display respective record in detail page?

MDK automatically passes a default binding object to the next page. When navigating from a list page, the selected item is passed as the binding object. You can look at documentation for more details.