Create a Customer List Page in an MDK App
- 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 the app metadata to SAP Mobile Services & Cloud Foundry
- Update the app with new changes
- 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.
In SAP Business Application Studio project, right-click the Pages | MDK: New Page.
Select | Section Page and click Next.
You can find more details about Section Page.
Enter the Page Name
Customers_Listand click Next and the Finish on the confirmation step.
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 Properties pane, provide the below information:
SampleServiceV2.servicefrom the dropdown
Customersfrom the dropdown
In the Properties pane, click the link icon to open the Object Browser for the Description property. Double click the
Cityproperty of the Customer entity to set it as the binding expression and click OK.
Be careful not to select
Remove the default value for the
DetailImageproperty. Repeat the above steps for
Subheadlineproperties binding to
FirstNameproperties of the Customer entity respectively.
You should have final results as below.
In the Search section of the Properties pane, change both the Search Enabled property and Barcode Scanner property to true.
In the Activity Items 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
PhoneNumberproperty of the Customer entity.
Similarly, add one more activity item, select Email from the dropdown and bind it to
EmailAddressproperty of the Customer entity.
Which folder of the Mobile Development Kit (MDK) project contains the views of your application?
- Step 2
Now, you will create a Navigation action that opens the
In SAP Business Application Studio project, right-click the Actions | MDK: New Action.
Choose MDK UI Actions in Category | click Navigation Action | Next.
Provide the below information:
Customers_List.pagefrom the dropdown
Click Next and then Finish on the confirmation step.
- Step 3
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 Button Table control.
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 for all pages. The size of a container depends on the controls and contents included inside.
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 Container Item.
In the Properties pane, set the Title of the button to Customer List.
Under Events tab, click the link icon for the
OnPress Handlerproperty to open the Object Browser. Double click the
NavToCustomers_Listaction and click OK to set it as the
- Step 4
Deploy the updated application to your MDK client.
Application.appand select MDK: Deploy.
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.
What options do you see while creating a new page?
- Step 5
Make sure you are choosing the right platform tab above.
What is the default TextAlignment for "Customer List" button set in the Main.page?