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 Newbies who know 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.

The 67th article of this tutorial: SAP UI5 Application Development Tutorial No. 67 - Implementation of the SAP UI5 List-Detail (List-Detail) Layout Based on OData V4SemanticPage We introduced that by clicking on any row of the User list, you can display the User information details page features:

We also emphasized at the time that the opening of the User details page is not achieved through the SAP UI5 routing function, so even after the details page is displayed, the URL corresponding to the browser address bar of the entire SAP UI5 application remains unchanged.

To actually use the SAP UI5 routing function to jump from the List page to the Detail page, you can refer to this step:

SAP UI5 Application Development Tutorial No. 29 - Introduction to the routing and navigation functions of SAP UI5

This article introduces two different behaviors for triggering SAP UI5 page routing jumps through button controls.

First look at the effect achieved after this step is completed. Go to folder 70, run the command line ui5 serve, and visit the following url:

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

See the left and right buttons.

Click 跳转(不修改url)to jump to the following custom Not Foundpage:

Note that the development steps for custom Not Found pages have been covered in previous articles in this tutorial:

SAP UI5 Application Development Tutorial No. 68 - How to display a custom NOT Found page when SAP UI5 routing fails

But pay attention to observe the url of the above page in the browser address bar, we found that in the process of jumping from the initial page of the application to this Not Found page, the url in the address bar has not changed, it is still:

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

Click on the right to 跳转(要修改url)jump to the Employee List page:

At this point the url is changed to:

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

The following are the detailed technical implementation details of this step.

SAP UI5 Application Development Tutorial No. 70 - How to Use Button Control to Trigger Page Routing Jump Trial Version

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

Tutorial Directory

illustrate

Guess you like