Extend an MDK App with Customer Orders
- How to enhance customer details with its order information
- How to create a new page for displaying the order details
You may clone an existing project from GitHub repository to start with this tutorial.
To enhance your MDK app with customer order information, you need to carry out the following tasks:
- Create a new order list page
- Create a new order details page
- Create a new navigation action to the new order details page
- Write a JavaScript logic to calculate total number of orders for a customer
- Display top 5 orders in customer details page
- Add a header control to the orders grid of the customer detail page to display a text label
- Add a footer control to the orders grid of customer detail page to show total order count

- Step 1
This page will display customer orders list, you will add an Object Table control that is used to display information (like Sales order ID, order creation date, gross amount and life cycle status name) about an object.
You can find more details about available controls in section page.
-
In SAP Business Application Studio project, right-click the Pages | MDK: New Page | select Section | Next.
You can find more details about section pages.
-
In the Base Information step, enter the page Name
Customers_Orders
and click Finish to complete the page creation process. -
In the Properties pane, set the caption to Customer Orders.
-
Next, add an Object Table control to display information like sales order ID, order creation date, gross amount and life cycle status name.
In the Layout Editor, expand the Controls | Data Bound Container group, drag and drop the Object Table control onto the page area.
-
In the Properties pane, provide the below information:
Property Value Service
Select SampleServiceV2.service
from the dropdownEntitySet
Select SalesOrderHeaders
from the dropdownQueryOptions
$filter=CustomerId eq '{CustomerId}'&$orderby=CreatedAt desc
For a given customer id, query expression will filter top 5 order entries returned in descending when sorted by the order creation date property.
-
Now, start binding Object Table properties with
SalesOrderHeaders
entity set properties.Provide the below information:
Property Value Description
$(D,{CreatedAt},'','',{format:'medium'})
Footnote
Remove the default value and leave it blank PreserveIconStackSpacing
false
ProgressIndicator
Remove the default value and leave it blank Status
$(C,{GrossAmount},{CurrencyCode},'',{maximumFractionDigits:2,useGrouping:true})
Subhead
bind to {CustomerId}
Substatus
bind to {LifeCycleStatusName}
Tags
Click the item0
and then click the trash icon to delete the default itemTitle
bind to {SalesOrderId}
$(D,{CreatedAt},'','',{format:'medium'})
is an expression of how to format a date, end result would be like June 20, 2020. By default it will be formatted to the device’s locale setting. More details on Date Formatter is available in documentation.$(C,{GrossAmount},{CurrencyCode},'',{maximumFractionDigits:2,useGrouping:true})
is an expression of how to format currency value, end result would be like €200.44. By default it will be formatted to the device’s locale setting. More details on Currency Formatter is available in documentation. -
In the Search section of the Properties pane, change both the Search Enabled property and Barcode Scanner property to
true
. -
In the Behavior section of the Properties pane, select
DisclosureIndicator
toAccessoryType
property. -
In the Avatar Grid section of the Properties pane, remove the default Avatar by selecting the
item0
and then clicking the trash icon to delete the default item. -
In the Avatar Stack section of the Properties pane, remove the default Avatar by selecting the
item0
and then clicking the trash icon to delete the default item. -
In the
EmptySection
of the Properties pane, provideNo Orders Found
for the Caption property.
-
- Step 2
This page will show related details for an order. 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.
-
In SAP Business Application Studio project, right-click the Pages | MDK: New Page | select Section | Next.
-
Enter the Page Name as
SalesOrders_Details
and click Finish to complete the page creation process. -
In the Properties pane set the Caption to Order Details.
-
Next, you will add a Static Key Value container and its item Key Value Item to display information like sales order id, life cycle status & date of order creation name.
Static Key Value is a container that can display one or more key value pair items on a section page. In this container, you can include a Key Value Item, a simple key value cell that displays a label and a text pair. You can find more details here about this container.
In the Layout Editor, expand the Controls | Static Container section, drag and drop the Static Key Value control onto the page area.
-
Now, add key value item to this container. In the Layout Editor, expand the Controls | Static Items section, drag and drop the Key Value Item control onto the page area.
Provide the below information:
Property Value KeyName
Order Number
Value
bind to {SalesOrderId}
Make sure to select values for the mentioned properties only from
SalesOrderHeader
entity. You may find similar values from other entities. -
Repeat the above step by adding 5 more Key Value Item on the page.
Provide the below information:
Property Value KeyName
Status
Value
bind to {LifeCycleStatusName}
Property Value KeyName
Created At
Value
$(D,{CreatedAt},'','',{format:'medium'})
Property Value KeyName
Net Amount
Value
$(C,{NetAmount},{CurrencyCode},'',{maximumFractionDigits:2,useGrouping:true})
Property Value KeyName
Tax Amount
Value
$(C,{TaxAmount},{CurrencyCode},'',{maximumFractionDigits:2,useGrouping:true})
Property Value KeyName
Total Amount
Value
$(C,{GrossAmount},{CurrencyCode},'',{maximumFractionDigits:2,useGrouping:true})
You should have final binding for all key value items as below:
Can you drop an Object cell item or an Image Cell item to static key value container?
-
- Step 3
When user taps an Order on the Customer Orders page, it should navigate to related details page.
In the
Customers_Orders.page
, select the Object Table control, navigate to the Events tab. Click the 3 dots icon for theOnPress
property and select theCreate a rule/action
.Keep the default selection for the Object Type as Action and Folders path.
In the Template Selection step, choose UI in Category | click Navigation | Next.
In the Base Information step, provide the below information:
Field Value Name
NavToSalesOrders_Details
PageToOpen
Select SalesOrders_Details.page
from the dropdownClick Finish to complete the action creation process.
- Step 4
You will add an Object Table compound to display top 5 orders information in the
Customers_Detail.page
.In the Layout Editor, expand the Controls | Data Bound Container group, drag and drop the Object Table control onto the page area.
In the Properties pane, provide below information:
Field Value Service
select SampleServiceV2.service
from the dropdownEntitySet
enter {@odata.readLink}/SalesOrders
QueryOptions
$top=5&$orderby=CreatedAt desc
The
odata.readLink
annotation contains the read URL of the entity or collection.SalesOrders
is a navigation property in Customer entity toSalesOrderHeader
entity. You can find this information in OData service metadata document.QueryOptions
expression will filter order entries returned in descending when sorted by the order creation date property.Now, start binding Object Table properties with
SalesOrderHeaders
entity set properties.In the Appearance section of the Properties pane, provide the below information:
Field Value Description
Remove the default value and leave it blank Footnote
Remove the default value and leave it blank PreserveIconStackSpacing
select false
from the dropdownProgressIndicator
Remove the default value and leave it blank Status
$(C,{GrossAmount},{CurrencyCode},'',{maximumFractionDigits:2,useGrouping:true})
Subhead
$(D,{CreatedAt},'','',{format:'medium'})
Substatus
bind to {CurrencyCode}
Tags
Click the item0
and then click the trash icon to delete the default itemTitle
bind to {SalesOrderId}
In the Behavior section of the Properties pane, select
DisclosureIndicator
toAccessoryType
property.In the Avatar Grid section of the Properties pane, remove the default Avatar by selecting the
item0
and then clicking the trash icon to delete the default item.In the Avatar Stack section of the Properties pane, remove the default Avatar by selecting the
item0
and clicking the trash icon to delete the default item.In the
EmptySection
of the Properties pane, provideNo Customer Orders Found
to Caption property.You may also want to open
SalesOrders_Detail.page
when clicking on any order inCustomers_Detail.page
. For this, you will set theOnPress
event of the Object Table and link it toNavToSalesOrders_Details.action
so that when an end-user selects a order, the Order Details page will open. MDK automatically passes the selected order to the details page.In
Customers_Detail.page
, select the Object Collection, click the 3 dots icon under the Events tab for theOnPress
event to open the Object Browser.Double-click the
NavToSalesOrders_Details.action
and click OK to set it as theOnPress
action.
- Step 5
-
For orders grid area, you will add a header to display some text label in
Customers_Detail.page
.In the Layout Editor, expand the Controls | Section Bar section, drag and drop the Header control above the order grid area.
-
Provide the below information:
Property Value Caption
Customer Orders
You can find more details about Header control.
-
- Step 6
-
For orders grid area, you will also add a footer to display total count of orders for a customer.
In the Layout Editor, expand the Controls | Section Bar section, drag and drop the Footer control above the order grid area.
-
To show a total count of orders for a customer, you will write a JavaScript logic for this calculation. Click
Create a rule
option forAttributeLabel
property of the Footer control. -
Keep the default selection for the Object Type as Rule and Folders path.
-
Enter the Rule name as
Customers_OrderCount
, and then click Finish to complete the rule creation process. -
Copy and paste the following code.
JavaScriptCopyexport default function CustomerOrderCount(context) { //The following currentCustomer will retrieve the current customer record const currentCustomer = context.getPageProxy().binding.CustomerId; //The following expression will retrieve the total count of the orders for a given customer return context.count('/DemoSampleApp/Services/SampleServiceV2.service', 'SalesOrderHeaders', `$filter=CustomerId eq '${currentCustomer}'`).then((count) => { return count; }); }
-
Switch back to the
Customers_Detail.page
and provide the below information for other properties of the Footer control:Property Value Caption
See All
FooterStyle
Select attribute
from the dropdownAccessoryType
Select DisclosureIndicator
from the dropdownYou can find more details about Footer control.
-
You may also want to open Customer Orders page when clicking See All to see a complete list of orders belong to a particular customer.
Navigate to the Events tab for the Footer control. Click the 3 dots icon for the
OnPress
property and select theCreate a rule/action
. -
Keep the default selection for the Object Type as Action and Folders path.
-
In the Template Selection step, choose UI in Category | click Navigation | Next.
-
In the Base Information step, provide the below information:
Field Value Name
NavToCustomers_Orders
PageToOpen
Select Customers_Orders.page
from the dropdown -
Click Finish to complete the action creation process.
-
- Step 7
Deploy the updated application to your MDK client.
Right-click
Application.app
and 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.
- Step 8
What is the Navigation property to access the associated SalesOrders for a given Customer?