Technical Articles
Enhance user experience using SAP BTP Mobile Services Part 1
My name is Nhat Doan. I am currently in SAP Student Training and Rotation (STAR) Program. In my first rotation, I have a chance to join CoE Mobile & UX team. I have learned a lot of things especially about current developments in mobile technology. Today, smartphones become essential for daily life. Businesses are using mobile applications to serve their clients and they will see many benefits such as brand building, customer connection, and profit boosts. I would like to share some topics concerning mobile development that I have a chance to work on.
- Build ProductCatalog application with AppGyver and Northwind OData service.
- Build ProductCatalog application with SAP MDK and Northwind OData service.
- How to style the MDK application.
- How to run MDK application on virtual device and override resources.
- How to reads log, traces issue, and measures performance for MDK application
Build ProductCatalog application with AppGyver and Northwind OData service
The application that we are going to build will have the list of products using Northwind OData service.
Figure 1: Product List page
From the list, users can search, filter, and sort the products basing on name, category, price…
Figure 2: Product List page with sort and filter
Users can also click on the product to see the detail of the product.
Figure 3: Product Detail page
Before starting, we need to
Create an account, visit: https://platform.appgyver.com/users/sign_up
Login to account, visit: https://platform.appgyver.com/auth/community
Create new application
Go to this link: https://platform.appgyver.com/
Click on CREATE NEW button
Figure 4: Create project
Input the name of the application “Product Catalog” and click CREATE
Figure 5: Input name for create new project
Create Product List page
Click on the link under the application name to see all the pages that the application has
Figure 6: Go to application pages
Click on the page Empty Page to change to Product List page
Figure 7: Rename Empty page to Product List page
Create the list item
Drag a Container to Product List page, name it to ProductList
Figure 8: Container in the toolbox
Figure 9: Name Container to Product List
Drag a Row to the ProductList container.
Figure 10: Drag Row layout to Product List container
Drag two Text components to this ROW and name them to Name and Price. These components will be used to show the product name and price.
Figure 11: Drag two Text components to Row layout
Drag another Text component to ProductList container under the Row component and name it to Category. This component will be used to show the category of the product.
Figure 12: Drag another Text component to ProductList container
Switch to the variables view by clicking on the switch VIEW/VARIABLE on the top of the page.
Figure 13: Switch to the variables view
Connect to oData service
Click on the DATA menu on the top of the page.
Figure 14: DATA menu
Click on ADD DATA SOURCE
Figure 15: ADD DATA RESOURCE button
Select OData integration
Figure 16: Select OData integration
Put this url https://services.odata.org/V2/Northwind/Northwind.svc/ to the Base API URL.
Figure 17: Set Base API URL
Click on VERIRY URL and enable Categories and Products
Figure 18: Enable Categories and Products
We will have Products and Categories resources.
Figure 19: Products and Categories resources
Create data variable
We need to create a data variable to show the product list. Data variable is the variable that hold the data from the remote server.
Click on the DATA menu again to come back to the variable view of Product List page.
We create the data variable by clicking the DATA VARIABLES menu on the left side and click ADD DATA VARIABLE.
Figure 20: DATA VARIABLE menu and ADD DATA VARIABLE button
Select Products type.
Figure 21: Select Products type
Name the variable to ProductList and select Collection Data variable type of data records for Data variable type.
Figure 22: ProductList data variable
Go back to the design view by clicking on the VIEW/VARIABLE switch.
Figure 13: VIEW/VARIABLES switch
Click on the ProductList in the TREE view and click on the icon under the Repeat with
Figure 23: Set Repeat with for Product List
Select Data and Variables
Figure 24: Select Data and Variables
Select Data variable
Figure 25: Select Data variable
Select ProductList and click SAVE.
Figure 26: Select ProductList
Click on the Name in the TREE view and click on the icon under the Content
Figure 27: Change Content of Name
Click on Data item in repeat
Figure 28: Select Data item in repeat
Click on current and select ProductName.
Figure 29: Select ProductName
Click on the Price in the TREE view and click on the icon under the Content. This time we select the Formula.
Figure 30: Select Formula for Price
Put the value: “$” + FORMAT_LOCALIZED_DECIMAL(NUMBER(repeated.current.UnitPrice), “en”, 2)
to the Formular. This formula helps us to format the price of the product.
Figure 31: Set formula for Price
Create CategoryList data variable
Now, we need to create CataroryList data variable to find the CategoryName based on the CategoryID in the ProductList data variable. Click on the VIEW/VARIABLES switch to come back to the variables view. Click on the DATA VARIABLES menu on the left side. Click on ADD DATA VARIABLE. Select Categories data type. Name it to CategoryList and select Collection of data records for the Data variable type.
Figure 32: CategoryList data variable
Click on VIEW/VARIABLES switch to comeback to the design view. Click on Category in the TREE view and click on the icon under the Content and select Formular. Use this formular: SELECT(data.CategoryList, item.CategoryID == repeated.current.CategoryID)[0].CategoryName. This formula helps us to show the CategoryName based on the CategoryID.
Figure 33: Formula for Category
Run the application
We need to test the first version of our application. Click on the LAUNCH menu on the top of the page. Click on Reveal QR code to show the QR code. Download the application from the link. Login to the application. We can see the application that we have just created.
Figure 34: Product Catalog in AppGyver
Click open to run the application we will have the product page bellow.
Figure 35: Product List page
Style the Product List page
We need to make it look nicer. Click on the ProductList in the TREE list and click on the STYLE tab next to PROPERTIES tab and select Primary Card.
Figure 36: Edit style for Product List item
Click on the Name in the TREE list and click on STYLE tab and select Primary Label.
Figure 37: Edit style for name
Click on the Price in the TREE list and click on the STYLE tab and select Secondary Paragraph.
Figure 38: Edit style for Price
Do the same for Category.
We need to align the price to the right. Click on the Price under the TREE section and click on the LAYOUT tab and select the Text align to right.
Figure 39: Edit layout for Price
Now we have the product list look nicer.
Figure 40: Product List page after styling
Add search, sort, and filter for Product List page
We need to install a Combo box for filtering the product by Category. Click on the INSTALLED tab and click on MARKETPLACE.
Figure 41: Go to MARKETPLACE
Search Combo box and install the component.
Figure 42: Search for Combo box
We drag all the components to the Product List page. We need one Input field for searching the product. One Toggle button to show and hide the FilterContainer. FilterContainer holds all the components for sorting and filtering product. Inside the FilterContainer, we have four buttons: Product Name, Category Name, Price >, Price <. These buttons are used for sorting the Product List based on name, category, and price. Beside that, we also have the Combo box to filter the Product List based on Category. In addition, we have a Reset button. This button is used to reset all the filter components.
Figure 43: Add components for filter
Build search function
Now, we build the search function. We need two variables. One page variable to store the value of the Input field for the search value. We name it to nameFilter. One data variable to store the original product list. We name it ProductListOriginal. Click on VIEW/VARIABLES switch to switch to the variables view. Click on PAGE VARIABLES menu and click on ADD PAGE VARIABLE to create new page variable. Name it to nameFilter and set the Variable value type to Text.
Figure 44: nameFilter page variable
Click on DATA VARIABLES menu and click on ADD DATA VARIABLE to create new data variable. Name it to ProductListOrigin and set Data variable type to Collection of data records.
Figure 45: ProductListOrigin data variable
Click on VIEW/VARIABLES switch to come back to the design view. Click the input field and click on the icon under the Value.
Figure 46: Set the value of Input field to nameFilter
Select Data and Variable, select Page variable select nameFilter. This variable will store the value of the Input field when user type for searching the product.
Figure 47: Select nameFilter
We need to handle the event when the user input the value to the Input field to search the product. Click on the Input field. Click on Show logic for INPUT FIELD at the bottom of the page to show the logic of the Input field.
Figure 48: Show logic for Input Field
Drag Set data variable to the logic design. From the logic design, click on Set data variable. Click on the icon under the Data variable name. Select Data variable and select ProductList. Click on the icon under the Record collection. Select Formular and put this value to the formular: IF(IS_EMPTY(pageVars.nameFilter), data.ProductListOrigin, SELECT_BY_REGEX(data.ProductListOrigin, “ProductName”, pageVars.nameFilter))
This formular helps us to select the products that have the name like the value that users input on the Input field. When the users do not input anything, we will show all the products from the ProductListOrigin.
Figure 49: Set logic for Input Field
Implement for sort buttons
Now, we implement the logic for sort buttons. Click on Product Name button. Drag Set data variable to the logic design. Link Set data variable to the Component tap event. Click on Set data variable. Click on icon under Data variable name, select Data variable and select ProductList. Click on icon under Record collection. Select Formula and put this value to the formular:
SORT_BY_KEY(data.ProductListOrigin, “ProductName”)
This formular helps us to sort the product list by the name.
Figure 50: Show logic for Product Name sort button
We can do the same for the other sort buttons. We only need to change the formula for them.
For Category Name uses this formula: SORT_BY_KEY(data.ProductListOrigin, “CategoryID”).
For Price > uses this formula SORT_BY_KEY(data.ProductListOrigin, “UnitPrice”, “asc”).
For Price < uses this formula SORT_BY_KEY(data.ProductListOrigin, “UnitPrice”, “desc”).
Implement filter function
Now, we need the Combo box to show the category list. Click on the Combo box. Click on the icon under the List of options. Select Formula and use this formula: MAP(data.CategoriesList, {key: item.CategoryID, value:item.CategoryName})
Figure 51: Set value for Combo box
We need to filter product list based on the category that the user selects. Click on Combo box. Drag Set data variable to the logic design. Link Set data variable and Output value ‘Selected option’ changed. Click on Set data variable. Click on the icon under Data variable name. Select Data variable and select ProductList. Click on the icon under Record collection. Select Formula and use this formula: SELECT_BY_KEY(data.ProductListOrigin, “CategoryID”, SELECT_BY_KEY(data.CategoriesList, “CategoryName”, self.selected)[0].CategoryID).
This formula helps us filter product list by the selected category.
Figure 52: Set logic for Combo box
Show and hide the FilterContainer when user click on the Toggle button
We need to show and hide the FilterContainer when user click on the Toggle button. Click on VIEW/VARIABLES switch to switch to VARIABLE view. Click on PAGE VARIABLES menu and click on ADD PAGE VARIABLE to create new Page Variable. Create a page variable with the information below:
Variable name: showFilter
Variable value type: True/false
Initial value: False
Figure 53: showFilter page variable
Click on VIEW/VARIABLES switch to come back to design view. Click on the Toggle button. Click on the icon under value. Select Data and Variable. Select Page variable and select showFilter. The value of showFilter reflects the status of Toggle button.
Figure 54: Set the value of Toggle button to showFilter
Click on the FilterContainter in the TREE view. Click on ADVANCED PROPERTIES. Click on the icon under Visible. Select Data and Variable. Select Page variable and select showFilter. The FilterContainer will show when the value of showFilter is true and hide when the value of showFilter is false.
Figure 55: Set Visible property of FiterContainer to showFilter
Click on the Reset button. Drag Set data variable and Set page variable to the logic design. Link them to the Component tab event. Click on Set data variable. Click on the icon under Data variable name. Select Data variable and select ProductList. Click on the icon under the Record collection. Select Data and Variables. Select Data variable and select ProductListOriginal.
Figure 56: Create the logic for Reset button
Click on Set page variable. Click on the icon under Variable name. Select Page variable and select showFilter. Click on the icon under Assigned. Select Static true/false and set the value to false.
Figure 57: Reset the value of showFilter
When the user clicks on the Reset button, all the filter components are invisible.
Create Product Detail page
We have just finished the Product List page with search, filter, and sort functions. We need to add Product Detail page to show the detail of the product when user clicks on a product in Product List page.
Click on the link under Product Catalog to see all the pages of the application. Click on ADD NEW PAGE to create a new page. Click on the Title and change to Product detail. Click on the Text and delete it.
Figure 58: Product Detail page
Drag five Input fields to the Product Detail page for showing product name, price, category name, unit in stock, and reorder level. For each Input field set the value Disabled to true. The user can only read the value of the Input fields.
Figure 59: The content of Product Detail page
We need two page parameters in Product detail page to store the productId and categoryId when user click on the product from the product list page. The productId and categoryId will be used to load the Product and Category to show on the Product Detail page.
Switch to the VARIABLES view. Click on PAGE PARAMETERS menu. Click on ADD PARAMETER to create two page parameters categoryId and productId. Set the Parameter value type to Text.
Figure 60: categoryId and productId page parameters
Click on DATA VARIABLES menu. Click on ADD DATA VARIABLE. Select Products. Set Data variable name to Product. Set Data variable type to Single data record. Click on the icon under the ProductID. Select Formula. Set this value INTEGER(params.productId) for the formula.
Figure 61: Product data variable
Click on ADD DATA VARIABLE. Select Categories. Set Data variable name to Product. Set Data variable type to Single data record. Click on the icon under the CategoryID. Select Formula. Set this value NUMBER(params.categoryId) for the formula.
Figure 62: Set formular for Product data variable
Go back to the design view. Assign the value Product.ProductName to the Product Name Input field.
Figure 63: Set the value for Product name
Assign Product.UnitPrice, Category.CategoryName, Product.UnitsInStock, Product.ReorderLevel for the corresponding remaining Input fields.
Navigate to Product Detail page when user click on a product in Product List page
Go to the Product List page. Click on Product List in the TREE view. Drag Open page to the LOGIC design. Link Open page to the Component tap event. Click on the Open page. Click on the icon under Page. Select Page ID and select Product Detail. Click on the icon under categoryId. Select Formula and use this value for the formula: STRING(repeated.current.CategoryID). Click on the icon under productId. Select Formular and use this value for the formular: STRING(repeated.current.ProductID.
Figure 64: Set the logic for showing the Product Detail when a Product List item is clicked
When the user clicks on a product from the product list. The application will set the ProductID and CategoryID to page parameters of the Product Detail page. The Product Detail page will use these values to retrieve the detail of Product and Category to display to the user.
We have just finished the Product Catalog application.
Conclusion
We have just finished the Product Catalog application. The application shows the list of the product. Users can search product by name, sort product by name, category, price, and filter product by category. Beside that, users can click on the product from the list to see the detail of the product.
Please let me know your feedback, questions in the comments. I would be happy to get back to you.
Other helpful links in the SAP Community please visit https://community.sap.com/topics/appgyver