Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
nhatdoan
Advisor
Advisor
728
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