Rule for Count List of Data in An MDK App

The rule for Count List of Data in An MDK App

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 the total number of orders for a customer
Display top 5 orders on the 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 the customer detail page to show the total order count

Use the mobile development kit page to create a new page for displaying a customer list and count total customers.

You will learn here.

1.How to create a new page and add some controls and display customer information.

2.How to navigate one page to another page.

3.Logic to write rule to count data in list.

4.How to create button.

Steps to follow:

Create a customer list page and add contact cell table to the page to display customers list.

Create a rule to count customers.

. Mention Rule in customer page footer section to display total customers.

Create navigation action to move from main page to customers page.

Add a new button in main page and by clicking that button navigate to customer list page.

Deploy app to SAP Cloud Platform Mobile Services.

Sync and Update the app with new changes.

Conclusion

————————————————————————————————————————————–

Step 1.

Create a customer list page and add contact cell table to the page to display customers list.

In SAP Webide Project

Right Click on the Pages– New MDK Page – Select “Section Page” – Next – Give Page Name as “Customers” – Next – Finish

Now Customers.page created.

In the editor layout, expand the Control and Compound sections and drag and drop

A. Section Table > Object Collection (For Display Customers Records)

B. Section Table > Object Collection> Footer (For Display Total Count)

A. For Display Customers Records…

In Properties Panel for bound object table Customers Entity – Select Entity Set Target, Services as Previously added, Entity Set Customers from the dropdown.

In the same Properties Panel for Customers first name and last name give the Subhead and Title.

Now customers list will appear in customers.page

————————————————————————————————————————————-

Step – 2. Create a rule to count customers.

Right click on Rule folder | New | File | Enter the rule name CountCustomer.js

Copy and Paste the below code.

export default function CustomersCount(sectionProxy) {

return sectionProxy.count(‘/DemoApp/Services/MDPAppService.service’, ‘Customers’, ”).then((count) => {

sectionProxy.getPageProxy().getClientData().EquipmentTotalCount = count;

// If “Customers” Entity set is availale, then it return the total customers

return count;

});

}

CountCustomer.js file will look like below image

———————————————————————————————————————————–

Step 3. Mention Rule in customer page footer section to display total customers.

As Created footer in Step 1. ( Section Table > Object Collection> Footer (For Display Total Count) )

For Display total count

In Properties panel Click on link icon to select the Rule(CountCustomers.js) in Attribute Label property. Also give captions, Footer styles, Accessory type etc .

————————————————————————————————————————————–

Step 4. Create navigation action to move from main page to customers page.

Right Click on Action Folder – New MDK Action – Select Navigation Action – Next – Give the Action name as “Customers” and select pageToOpen as Customers.page path from dropdown

Now Navigation Action Customers.Action is created.

————————————————————————————————————————————–

Step 5. Add a new button in main page and by clicking that button navigate to customer list page.

In main.page drag and drop the section button table from container control.

Under Event tab click link icon for OnPress Handler to select the customer.action.

Now you can navigate by clicking customer button.

Step – 6. Deploy app to SAP Cloud Platform Mobile Services.

Right click on your App or Project | Next |Next .

After Deploy completion you can See Deploy Successfully.

————————————————————————————————————————————–

Step 7. Sync and Update the app with new changes.

You can see total customers.

8. Conclusion

As per written code for counting the total number of customers you can perform with minimum number of lines of code, And you can use the logic to perform the counting the other list of data. Also if you add or delete customers then you will get the result accordingly.