Use the mobile development kit page to create a new page for displaying a customer list and count total customers.
You will learn here.
- How to create a new page and add some controls and display customer information.
- How to navigate one page to another page.
- Logic to write rule to count data in list.
- 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.