Enhance user experience using SAP BTP Mobile Services Part 1

[nhatdoan]

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.

1. Build ProductCatalog application with AppGyver and Northwind OData service.


2. Build ProductCatalog application with SAP MDK and Northwind OData service.


3. How to style the MDK application.


4. How to run MDK application on virtual device and override resources.


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