Enhance user experience using SAP BTP Mobile Services Part 3

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

How to style the MDK application

For this section, we will change the style of our MDK application from the default style.

Figure 1: MDK application with default style

We will make our application to become more colorful.

Figure 2: MDK application after modifying style

Create a Home page with Bottom navigation

Right click on the Pages folder. Select MDK: New Page. Select Bottom Navigation Page. Input Home and click Next to create new Home page.

Figure 3: Create Home page

Set the Main page to Home page

Open Application.app. Select Home.page for Main Page field.

Figure 4: Home page becomes Main Page

Add item to Bottom Navigation bar

Open Home.page. Click on Bottom Navigation bar.  Click on the icon under Items to add item to the bottom navigation bar. Create four items for Bottom navigation bar with the information below.

"Caption": "Product"

"Image": "sap-icon://product"

"PageToOpen": "/ProductCatalog2/Pages/Empty.page"

 

"Caption": "Cart"

"Image": "sap-icon://cart"

"PageToOpen": "/ProductCatalog2/Pages/Empty.page"

 

"Caption": "Scan"

"Image": "sap-icon://bar-code"

"PageToOpen": "/ProductCatalog2/Pages/Empty.page"

 

"Caption": "Setting"

"Image": "sap-icon://settings"

"PageToOpen": "/ProductCatalog2/Pages/Empty.page"

 

Figure 5: Add Items to Bottom navigation bar

Change the color of Action Bar

Open Styles/Styless.less. Add the value below to change the color of Action Bar.

@darkblue: #3c289b;



ActionBar {

    color: white;

    background-color: @darkblue;

}

Figure 6: The content of Styless.less file

Change color of Toolbar

Copy the value below to Styles/Styless.less file.

ToolBar {

    color: white;

    background-color: @darkblue;

    bartintcolor: @darkblue;     /* iOS */

}

Figure 7: The content of Styless.less file

Run the application. We will have the color of ActionBar and ToolBar is changed.

Figure 8: The application after changing style

Change the color of Search Bar

Open Styles/Styles.less. Copy the value below to the file to change the color of Search Bar.

ActionBarForSearch {

    color: white;

    background-color: @darkblue;

}

Run the application. We can see the color of Search Bar is changed.

Figure 9: Search Bar after changing new style

Change the color of Bottom Navigation Bar

We will change the icons of Bottom Navigation Bar to white when they are not selected. The icon will become blue when it is selected. Beside that we also change the background color of Bottom Navigation Bar. Copy the value below to Styles/Styles.less.

@selectedcolor: #0070F2;

MDTabStrip {

    border-top-width: 1;

    selected-item-color: @selectedcolor;

    un-selected-item-color:white;

    highlight-color: @selectedcolor;

    font-family: "f72_bold";

}



MDTabStripItem {

    background-color: @darkblue;

}

Figure 10: Styless.less

Run the application. We can see the color of Bottom Navigation Bar and icons inside changed.

Figure 11: Bottom navigation bar after changing style

Add Action Bar Item to Home page

Open Pages/Home.page. Click on the title of Home page. Drag Action Bar Item to the top right of the page. Click Action Bar Item on Home page. Set the value of Icon in Property section to sap-icon://cart.

Figure 12: Add Action Bar Item to Home page

Change color of icons in application

We have just added an icon to Action Bar. We can change the color of this icon by copy this value below to Styles/Styles.less.

.sap-icons {

    font-family: "SAP-icons";

    font-weight: 900;

    color: white;

}

Run the application. We can see the color of the icon inside the Action Bar changed.

Figure 13: Action Bar Item after changing style

Conclusion

We have just finished changing the color of our application using Styles/Styles.less file. From this blog, we have learned how to change styles for ActionBar, ToolBar, SearchBar. Moreover, we are able to change styles for Bottom navigation bar and SAP icons.

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://blogs.sap.com/tags/668874921104038800958643358380369/