Skip to Content

Extend an MDK App with Customer Orders

Display a customer order list and its details.
You will learn
  • How to enhance customer details with its order information
  • How to create a new page for displaying the order details
jitendrakansalJitendra KansalJuly 8, 2022
Created by
jitendrakansal
June 10, 2019
Contributors
jitendrakansal
jitendrakansal
jitendrakansal

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 detail 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
MDK
  • 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.

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

      MDK

      You can find more details about section pages.

    2. Enter the Page Name Customers_Orders and click Next and then Finish on the confirmation step.

      MDK
    3. In the Properties pane, set the caption to Customer Orders.

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

      MDK
    5. In the Properties pane, provide the below information:

      Property Value
      ServiceSelect SampleServiceV2.service from the dropdown
      Entity Select SalesOrderHeaders from the dropdown
      QueryOptions$filter=CustomerId eq '{CustomerId}'&$orderby=CreatedAt desc
      MDK

      For a given customer id, query expression will filter top 5 order entries returned in descending when sorted by the order creation date property.

      MDK
    6. Now, start binding Object Table properties with SalesOrderHeaders entity set properties.

      Provide the below information:

      Property Value
      Description$(D,{CreatedAt},'','',{format:'medium'})
      DetailImageRemove the default value and leave it blank
      Footnote Remove the default value and leave it blank
      PreserveIconStackSpacingfalse
      ProgressIndicator Remove the default value and leave it blank
      Status$(C,{GrossAmount},{CurrencyCode},'',{maximumFractionDigits:2,useGrouping:true})
      Subhead bind to {CustomerId}
      Substatusbind to {LifeCycleStatusName}
      Titlebind to {SalesOrderId}
      MDK

      $(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.

      MDK

      $(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.

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

      MDK
    8. In the Behavior section of the Properties pane, select DisclosureIndicator to AccessoryType property.

      MDK
    9. In the EmptySection of the Properties pane, provide No Orders Found for the Caption property.

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

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

      MDK
    2. Enter the Page Name SalesOrders_Details and click Next and the Finish on the confirmation step.

      MDK
    3. In the Properties pane set the Caption to Order Details.

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

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

      MDK

      Provide the below information:

      Property Value
      KeyNameOrder Number
      Value bind to {SalesOrderId}
      MDK

      Make sure to select values for the mentioned properties only from SalesOrderHeader entity. You may find similar values from other entities.

    6. Repeat the above step by adding 5 more Key Value Item on the page.

      MDK

      Provide the below information:

      Property Value
      KeyNameStatus
      Value bind to {LifeCycleStatusName}
      Property Value
      KeyNameCreated At
      Value $(D,{CreatedAt},'','',{format:'medium'})
      Property Value
      KeyNameNet Amount
      Value $(C,{NetAmount},{CurrencyCode},'',{maximumFractionDigits:2,useGrouping:true})
      Property Value
      KeyNameTax Amount
      Value $(C,{TaxAmount},{CurrencyCode},'',{maximumFractionDigits:2,useGrouping:true})
      Property Value
      KeyNameTotal Amount
      Value $(C,{GrossAmount},{CurrencyCode},'',{maximumFractionDigits:2,useGrouping:true})

      You should have final binding for all key value items as below:

      MDK

    Can you drop an Object cell item or an Image Cell item to static key value container?

  • Step 3
    1. Now, you will create two Navigation actions that opens the Order List and Order Details page when called.

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

      Provide the below information:

      Field Value
      Action NameNavToCustomers_Orders
      PageToOpen Select Customers_Orders.page from the dropdown
      MDK

      Click Next and then Finish on the confirmation step.

    2. Repeat the above step and create a new navigation action.

      Provide the below information:

      Field Value
      Action NameNavToSalesOrders_Details
      PageToOpen Select SalesOrders_Details.page from the dropdown
      MDK

      Click Next and then Finish on the confirmation step.

  • Step 4

    Go back to the Customers_Orders.page and set the OnPress event of the Object Table. You will link the Object Table to the NavToSalesOrders_Details.action so that when an end-user selects a order, the SalesOrders_Detail.page will open. MDK automatically passes the selected order to the details page.

    In Customers_Orders.page, select the Object Table, click the 3 dots icon under the Events tab for the OnPress event to open the Object Browser.

    Double-click the NavToSalesOrders_Details.action and click OK to set it as the OnPress Action.

    MDK
  • Step 5

    You will show a total count of orders for a customer in Customers_Detail.page. You will write a JavaScript logic for this calculation.

    1. Right-click the Rules folder | MDK: New Rule File | select Empty JS Rule.

    2. Enter the Rule name Customers_OrderCount, press Enter.

      MDK
    3. Copy and paste the following code.

      JavaScript
      Copy
      export 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;
          });
      }    
      
    4. Save the changes to the Customers_OrderCount.js file.

  • Step 6
    1. 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.

      MDK
    2. In the Properties pane, provide below information:

      ServiceSelect SampleServiceV2.service from the dropdown
      Entity Select {@odata.readLink}/SalesOrders from the dropdown
      QueryOptions$top=5&$orderby=CreatedAt desc
      MDK

      The odata.readLink annotation contains the read URL of the entity or collection.

      SalesOrders is a navigation property in Customer entity to SalesOrderHeader entity. You can find this information in OData service metadata document.

      MDK

      QueryOptions expression will filter order entries returned in descending when sorted by the order creation date property.

    3. Now, start binding Object Table properties with SalesOrderHeaders entity set properties.

      In the Appearance section of the Properties pane, provide the below information:

      DescriptionRemove the default value and leave it blank
      DetailImageRemove the default value and leave it blank
      Footnote Remove the default value and leave it blank
      PreserveIconStackSpacingselect false from the dropdown
      ProgressIndicator Remove the default value and leave it blank
      Status$(C,{GrossAmount},{CurrencyCode},'',{maximumFractionDigits:2,useGrouping:true})
      Subhead $(D,{CreatedAt},'','',{format:'medium'})
      Substatusbind to {CurrencyCode}
      Titlebind to {SalesOrderId}
      MDK
    4. In the Behavior section of the Properties pane, select DisclosureIndicator to AccessoryType property.

      MDK
    5. In the EmptySection of the Properties pane, provide No Customer Orders Found to Caption property.

      MDK
    6. You may also want to open SalesOrders_Detail.page when clicking on any order in Customers_Detail.page. For this, you will set the OnPress event of the Object Table and link it to NavToSalesOrders_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 the OnPress event to open the Object Browser.

      Double-click the NavToSalesOrders_Details.action and click OK to set it as the OnPress action.

      MDK
  • Step 7
    1. 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.

      MDK
    2. Provide the below information:

      Property Value
      CaptionCustomer Orders
      MDK

      You can find more details about Header control.

  • Step 8
    1. 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.

      MDK
    2. Provide the below information:

      Property Value
      Attribute Labelclick link icon, select Rules from dropdown and bind it to Customers_OrderCount.js
      CaptionSee All
      FooterStyleSelect attribute from the dropdown
      AccessoryTypeSelect DisclosureIndicator from the dropdown
      MDK

      You can find more details about Footer control.

    3. You may also want to open Customer Orders page when clicking See All. For this, you will set the OnPress event of the Footer control and link it to NavToCustomers_Orders.action so that when an end-user clicks on See All, the Customer Orders page will open.

      In Customers_Detail.page, select the Footer control See All, click the 3 dots icon under the Events tab for the OnPress property to open the Object Browser.

      Double-click the NavToCustomers_Orders.action and click OK to set it as the OnPress Action.

      MDK
  • Step 9

    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
  • Step 10

    What is the Navigation property to access the associated SalesOrders for a given Customer?

Back to top