Skip to Content

Create a Customer List Page in an MDK App

test
0 %
Create a Customer List Page in an MDK App
Details
// Explore More Tutorials

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


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 app metadata to SAP Cloud Platform Mobile Services
  • Update the app with new changes
MDK
Step 1: Create a new page for displaying customer list

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 Web IDE project, right-click on the Pages | New MDK Page | Section Page | Next.

MDK

You can find more details about section page.

Enter the Page Name Customers_List and click Next and the Finish on the confirmation step.

MDK

In Customers_List page, select the page header area and then click Page.

MDK

In the Properties pane, set the Caption to Customers.

MDK

In the Layout Editor, expand the Controls | Compound section, drag and drop the Contact Cell Table control onto the Page area.

MDK

A Compound control contains a group of other controls. Unlike in a container control where you can add your own child controls (container items), the child controls in a compound control are fixed. You can populate each of its child control by defining its data binding, depending on which the child controls are created.

In the Properties pane, select the previously added service from the Service drop down and then select Customers Entity Set from the dropdown. This way, the Object Table has been bound to Customers Entity.

MDK

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

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

MDK

Repeat the above steps for Subheadline and Description properties binding to FirstName and City properties of the Customer entity respectively.

You should have final results as below.

MDK

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

MDK

In the Search section of the Properties pane, change both the Search Enabled property and Barcode Scanner property to true.

MDK

In the Activity Items section of the Properties pane, change VideoCall on the first activity to Phone.

MDK

Click the link icon to open the Object browser for the Phone activity and bind it to the PhoneNumber property of the Customer entity.

MDK

Repeat the above step for Email activity and bind it to EmailAddress property of the Customer entity.

MDK

Click the trash can icon for the Detail activity to remove it from the Activity list.

MDK

Save your changes to the Customers_List.page.

Log on to answer question
Step 2: Create navigation action

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

Right-click on the Actions folder | New MDK Action | choose MDK UI Actions in Category | click Navigation Action | Next.

MDK

Provide the below information:

Field Value
Action Name NavToCustomers_List
Page to Open select Customers_List.page
MDK

Click Next and then Finish on the confirmation step.

Log on to answer question
Step 3: Add a button to view customer list

Now that the Customer List page is created, you will add a button to the Main page to display the Customers. You will use a Section Button Table control.

In Main_page, drag and drop the Section Button Table container control onto the Page.

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.

Expand the Container Item section of the Controls palette.

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

MDK

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

You can find more details about Container and Container Item.

In the Properties pane, set the Title of the button to Customer List.

MDK

Under Events tab, click the link icon for the OnPress Handler property to open the Object Browser.

Double Click on the NavToCustomers_List action and click OK to set it as the OnPress Handler Action.

MDK

Save the changes to the Main_page.

Log on to answer question
Step 4: Deploy and activate the application

Deploy the updated application to your MDK client.

Right-click on the DemoSampleApp MDK Application in the project explorer pane and select MDK Deploy and Activate.

MDK

Since we have deployed already both the destination and app id should be pre-selected based on the last time you deployed our application.  Confirm the Destination Name is mobileservices_cf and the Application Id is com.sap.mdk.demo and click Next.

MDK
What options do you see while creating a new page?
×
Step 5: Test the application

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

Re-launch the app on your device, you may asked to authenticate with passcode or Fingerprint. You will see a Confirmation pop-up, tap OK.

MDK

You will notice, newly added button on the main page. Tap CUSTOMER LIST.

MDK

Here, you will see list of all the Customers. You can search a record by by First Name or Last Name or City. Controls are rendered natively on device, you can email to the customer, make a phone call etc.

MDK

Re-launch the app on your device, you may asked to authenticate with passcode or Touch ID. You will see a Confirmation pop-up, tap OK.

MDK

You will notice, newly added button on the main page. Tap Customer List.

MDK

Here, you will see list of all the Customers. You can search a record by by First Name or Last Name or City. Controls are rendered natively on device, you can email to the customer, make a phone call etc.

MDK

Here, you may notice that City is not showing up on screen, this is by design. Since in portrait mode, the device width is considered compact , if you change device orientation to landscape mode, you will see City.

MDK

If it was an iPad (where both portrait and landscape are considered regular instead of compact) you would see City on either orientation.

Log on to answer question

Next Steps

Back to top