Extend an MDK App with Customer Orders

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 your MDK project, right-click the Pages | MDK: New Page | select Section | Next.

   

   You can find more details about section pages.

2. In the Base Information step, enter the page Name Customers_Orders and click Finish to complete the page creation process.

   

3. Once the page opens in the page editor, click on the white area to select it’s Action Bar, and set the Caption to Customer Orders.

   

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.

   

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

   Property	Value
   Service	Select com_sap_edm_sampleservice_v4.service from the dropdown
   EntitySet	Select SalesOrderHeaders from the dropdown
   QueryOptions	$filter=CustomerID eq {CustomerID}&$orderby=CreatedAt desc

   

   The query expression will filter the top five order entries for a given customer ID, returning them in descending order when sorted by the order creation date property.

   

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

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

   Property	Value
   Description	Remove the default value and leave it blank
   Footnote	Remove the default value and leave it blank
   PreserveIconStackSpacing	false
   ProgressIndicator	Remove the default value and leave it blank
   StatusText	$(C,{GrossAmount},{CurrencyCode},'',{minimumIntegerDigits:1,minimumFractionDigits:0,maximumFractionDigits:2,useGrouping:true})
   Subhead	bind it to {CustomerID}
   SubstatusText	Remove the default value and leave it blank
   Tags	Click the item0 and then click the trash icon to delete the default item
   Title	$(D,{CreatedAt},'','',{format:'medium'})

   

   $(C,{GrossAmount},{CurrencyCode},'',{minimumIntegerDigits:1,minimumFractionDigits:0,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.

   

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

   

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

   

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

   

9. 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.

   

10. 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.

    

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

    

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 your MDK project, right-click the Pages | MDK: New Page | select Section | Next.

   

2. Enter the Page Name as SalesOrders_Details and click Finish to complete the page creation process.

   

3. In the Properties pane, provide the below information under DesignTimeTarget.

   Property	Value
   Service	Select com_sap_edm_sampleservice_v4.service from the dropdown
   EntitySet	select SalesOrderHeaders from the dropdown

   

   DesignTimeTarget is a page level property similar to Target but it is only used for design time. This helps in validating the binding context of current page. For more details, see documentation.

4. Once the page opens in the page editor, click on the white area to select it’s Action Bar, and set the Caption to Order Details.

   

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

   

6. 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 it to {SalesOrderID}

   

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

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

   

   Provide the below information:

   Property	Value
   KeyName	Status
   Value	bind it to {LifeCycleStatusName}

   Property	Value
   KeyName	Created At
   Value	$(D,{CreatedAt},'','',{format:'medium'})

   Property	Value
   KeyName	Net Amount
   Value	$(C,{NetAmount},{CurrencyCode},'',{minimumIntegerDigits:1,minimumFractionDigits:0,maximumFractionDigits:2,useGrouping:true})

   Property	Value
   KeyName	Tax Amount
   Value	$(C,{TaxAmount},{CurrencyCode},'',{minimumIntegerDigits:1,minimumFractionDigits:0,maximumFractionDigits:2,useGrouping:true})

   Property	Value
   KeyName	Total Amount
   Value	$(C,{GrossAmount},{CurrencyCode},'',{minimumIntegerDigits:1,minimumFractionDigits:0,maximumFractionDigits:2,useGrouping:true})

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

   

When a user taps an order on the Customer Orders page, it should navigate to the related details page.

The MDK template generates some generic actions, such as GenericNavigation.action, that can be reused at many places in your project and can be overridden with specific information. Of course, you can also create a new action, as you have done in previous tutorials.

1. In the Customers_Orders.page, select the Object Table control, navigate to the Events tab. Click the dotted icon for the OnPress property and select the Object Browser.

   

2. Select GenericNavigation.action and click OK.

   

3. The OnPress event has been bound to the GenericNavigation.action. You will now override its properties. Click the dotted icon for the OnPress property and select Overrides.

   

4. In the Override Action Properties window, provide the below information and click OK to complete the action override process.

   Field	Value
   PageToOpen	Select SalesOrders_Details.page from the dropdown

   

   You can find more details about Override Action in documentation.

5. You will notice that the Overrides option under the OnPress event is now highlighted, indicating that the bound action is overridden. You can also view the overridden details in the page code editor by right-clicking on the Customers_Orders.page and opening it with text Editor.

   

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.

   

2. In the Properties pane, provide below information:

   Field	Value
   Service	select com_sap_edm_sampleservice_v4.service from the dropdown
   EntitySet	select {@odata.readLink}/SalesOrders from the dropdown
   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 to SalesOrderHeader 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.

3. 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	false
   ProgressIndicator	Remove the default value and leave it blank
   StatusText	$(C,{GrossAmount},{CurrencyCode},'',{minimumIntegerDigits:1,minimumFractionDigits:0,maximumFractionDigits:2,useGrouping:true})
   Subhead	bind it to {CustomerID}
   SubstatusText	Remove the default value and leave it blank
   Tags	Click the item0 and then click the trash icon to delete the default item
   Title	$(D,{CreatedAt},'','',{format:'medium'})

   

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

   

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

   

6. 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.

   

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

   

8. You may also want to open SalesOrders_Detail.page when clicking on any order in Customers_Detail.page. In Customers_Detail.page, select the Object Table, click the dotted icon under the Events tab for the OnPress event to open the Object Browser. Select GenericNavigation.action and click OK.

   

9. You will now override its properties. Click the dotted icon for the OnPress property and select Overrides.

   

10. In the Override Action Properties window, provide the below information and click OK to complete the action override process.

    Field	Value
    PageToOpen	Select SalesOrders_Details.page from the dropdown

    

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.

   

2. Provide the below information:

   Property	Value
   Caption	Customer Orders

   

   You can find more details about Header control in documentation.

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 below the order grid area.

   

2. To show a total count of orders for a customer, you will write a JavaScript logic for this calculation. Click Create a rule option for AttributeLabel property of the Footer control.

   

3. Keep the default selection for the Object Type as Rule and Folders path.

   

4. In the Base Information step, enter the Rule name as Customers_OrderCount, and then click Finish to complete the rule creation process.

   

5. Copy and paste the following code.

   JavaScript Copy

   /**
   * Describe this function...
   * @param {IClientAPI} context
   */
   export default function CustomerOrderCount(context) {
       // Retrieves the current customer's information from the context
       const currentCustomer = context.getPageProxy().binding['@odata.readLink'];
       // Counts the number of sales orders associated with the current customer.
       return context.count('/demosampleapp/Services/com_sap_edm_sampleservice_v4.service', currentCustomer + '/SalesOrders', '').then((count) => {
           return count;
       });
   }

6. 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 dropdown
   AccessoryType	Select DisclosureIndicator from the dropdown

   

   You can find more details about Footer control.

7. 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 dotted icon for the OnPress property and select the Object Browser. Bound it to the GenericNavigation.action.

   

8. You will now override its properties. Click the dotted icon for the OnPress property and select Overrides.

   

9. In the Override Action Properties window, provide the below information and click OK to complete the action override process.

   Field	Value
   PageToOpen	Select Customers_Orders.page from the dropdown

   

You will now deploy the updated project to your MDK client.

Click the Deploy option in the editor’s header area, and then choose the deployment target as Mobile Services .