Skip to Content

Create a Customer List Page in an MDK App

Use the mobile development kit page editor to create a new page for displaying a customer list.
You will learn
  • How to create a new page and add some controls to display customer information
  • How to navigate from one page to another page
jitendrakansalJitendra KansalJanuary 29, 2023
Created by
jitendrakansal
October 4, 2022
Contributors
maximilianone
jitendrakansal

To enhance your MDK app with customer list information, you need to carry out the following tasks:

  • Create a new customer list page
  • Add Contact Cell Table control to the page
  • Create a new navigation action to the customer list page
  • Add a new button on main page and navigate to customer list page when user clicks it
  • Deploy the app metadata to SAP Mobile Services & Cloud Foundry
  • Update the app with new changes
MDK
  • Step 1

    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.

    1. In SAP Business Application Studio project, right-click the Pages | MDK: New Page.

      MDK
    2. Select | Section and click Next.

      MDK

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

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

      MDK
    4. In the Properties pane, set the Caption to Customers.

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

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

      Field Value
      ServiceSelect SampleServiceV2.service from the dropdown
      EntitySet Select Customers from the dropdown
      QueryOptions $orderby=LastName
      MDK
    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.

      MDK

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

      MDK

    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.

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

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

      MDK
    11. 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.

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

      MDK

    Which folder of the Mobile Development Kit (MDK) project contains the views of your application?

  • Step 2

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

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

      MDK

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

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

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

      MDK

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

      You can find more details about Container and Container Item.

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

      Field Value
      Imagesap-icon://customer
      Title Customers
      MDK
    4. Under Events tab, click the 3 dots icon for the OnPress Handler property and select the Create a rule/action.

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

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

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

      Field Value
      NameNavToCustomers_List
      PageToOpen Select Customers_List.page from the dropdown
      MDK
  • Step 3

    Deploy the updated application to your MDK client.

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

      MDK
    2. Select deploy target as Mobile & Cloud.

      MDK

      You should see success message for both deployments.

      MDK

      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.

      MDK

    What options do you see while creating a new page?

  • Step 4

    Make sure you are choosing the right platform tab above.


    What is the default Alignment for "Customers" button set in the Main.page?

Back to top