头图

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

Tutorial Directory

illustrate

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 , a novice who knows nothing about SAP UI5, which materials are better to start with? As I mentioned, 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 learning tutorial for SAP UI5 beginners in my spare time. , Divide the process of developing a complete SAP UI5 application into several steps, and strive 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 on my Github , identified by folders 01, 02, 03, etc. For example, the source code of step 1 is here .

Each step builds on the previous step with several new features added. It is recommended for beginners with zero foundation or little knowledge of SAP UI5 to 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 your 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 steps of this tutorial, we have developed several SAP UI5 views and are able to route to each other.

For example, you can directly enter the Employee List page through the url http://localhost:8080/webapp/index.html#/employees :

Through the url http://localhost:8080/webapp/index.html#/employees/1 , you can directly enter the Employee details page with id 1:

Through the url http://localhost:8080/webapp/index.html#/employees/1/resume , you can enter the Employee resume page with id 1:

Suppose we have selected the tag Projects on the resume page, we expect that the next time we paste the url directly into the browser address bar, the resume page will still keep the selected state of Projects instead of the default Info tab page. This is the support of the so-called label feature of SAP UI5 ( Bookmarkable ).

In other words, when we add the following url to browser favorites, it is saved as a bookmark. The next time you access this bookmark from your favorites, expect SAP UI5 to automatically open the tab represented by the url tab= behind Projects , as shown in the figure above:

http://localhost:8080/webapp/index.html#/employees/1/resume?tab=Projects

The source code address of this step is as follows .

The following are the detailed implementation steps of the bookmark function of SAP UI5.


注销
1k 声望1.6k 粉丝

invalid