SAP UI5 Beginners Tutorial Part 16 - Use of Icons

A set of step-by-step learning tutorials for SAP

Tutorial Directory

• SAP UI5 up a local development environment
• SAP UI5 Beginners Tutorials: Hello World
• SAP UI5 Beginners Tutorial Part 2: Bootstrap of SAP
• Started with the First SAP UI5 Controls 161e7aff0dd52b
• SAP UI5 Beginners Tutorial No. 4: A Preliminary Study of XML Views
• SAP UI5 Beginners Tutorial No. 5: A Preliminary Study of View Controllers
• SAP UI5 Beginners Tutorial Six - Understand the Concept of Modules in SAP
• SAP UI5 Beginners Tutorial Part 7 - A Preliminary Study of JSON Model
• SAP UI5 Beginner Tutorial No. 8 - Multilingual
• SAP UI5 Beginner Tutorial No. 9 - Creating the First Component
• SAP UI5 Beginners Tutorial No. 10 - What is the Descriptor of SAP UI5 Application
• SAP UI5 Beginners Tutorial Eleven: SAP UI5 Container Controls Page and Panel
• SAP UI5 Tutorial for Beginners Twelve-Using CSS Classes to Further Beautify the UI
• SAP UI5 Tutorial for Beginners Part 13 - How to Add Custom CSS Classes
• SAP UI5 Beginners Tutorial No. 14 - How to Use Embedded Views
• SAP UI5 within fifteen tutorial for beginners - use dialog boxes and Fragments of

instruction

Jerry has been in touch with SAP UI5 since joining the CRM Fiori development team of SAP Chengdu Research Institute in 2014. He has published many articles on the working principle and source code analysis of SAP UI5 in the SAP community and the WeChat public account "Wang Zixi".

In Jerry's article for newbies who know nothing about SAP UI5, which materials are better to start with? once mentioned that Jerry has come all the way from SAP UI5 rookie. He knows that it is not easy for developers with only ABAP development background to transform to SAP UI5 development field, so I designed this study for SAP UI5 beginners in my spare time. The tutorial divides the process of developing a complete SAP UI5 application into several steps, and strives to cover all the knowledge points involved in each step. These knowledge points may not be as in-depth as my UI5 source code analysis series articles, but strive to be easy to understand and easy for SAP UI5 beginners to understand.

The source code of each step of this tutorial is stored in my Github , identified by folders 01, 02, 03 and so on.

Each step builds on the previous step with several new features added. It is recommended that beginners with zero foundation or little knowledge of SAP UI5 learn step by step from the first step in order, download these codes to the local, cooperate with the text explanation of the tutorial, and do it yourself to deepen the understanding.

If you have any questions about each step of the tutorial, you are welcome to comment and leave a message in the article corresponding to the steps of the tutorial.

In the previous step of this tutorial, we implemented a dialog.

But the closing of the dialog box can only be done by pressing the ESC key on the keyboard, which is very inconvenient.

This step will add an OK button to the dialog to close the dialog, and add a new icon to the dialog to demonstrate how to use icon controls in SAP UI5.

The SAP UI5 application interface completed in this step is as follows:

You can see that there is an additional icon in front of the button that opens the dialog box.

After clicking the button, an icon and an OK button are added to the pop-up dialog box, which is used to close the dialog box.

The source code can be downloaded link

Enter folder 16, npm install and then ui5 serve command line to start the application, and then the browser can access the following url:

http://localhost:8080/webapp/index.html

Below is a detailed implementation of this example steps .