10

Enhance user experience using SAP BTP Mobile Services Part 3

 1 year ago
source link: https://blogs.sap.com/2022/11/08/enhance-user-experience-using-sap-btp-mobile-services-part-3/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
November 8, 2022 4 minute read

Enhance user experience using SAP BTP Mobile Services Part 3

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.

How to style the MDK application

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

pic_3_1.png

Figure 1: MDK application with default style

We will make our application to become more colorful.

pic_3_2.png

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.

pic_3_3.png

Figure 3: Create Home page

Set the Main page to Home page

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

pic_3_4.png

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”

pic_3_5.png

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;
}
pic_3_6.png

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 */
}
pic_3_7.png

Figure 7: The content of Styless.less file

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

pic_3_8.png

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.

pic_3_9.png

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;
}
pic_3_10.png

Figure 10: Styless.less

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

pic_3_11.png

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.

pic_3_12-1.png

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.

pic_3_13.png

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/


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK