javascript - 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

Jerry has been in contact 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 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.

The 67th article of this tutorial: SAP UI5 Application Development Tutorial No. 67 - Implementation of SAP UI5 List-Detail (List-Detail) Layout Based on OData V4 We introduced the realization of clicking User through SemanticPage Any line in the list can display the functions of the User information detail page:

We also emphasized at the time that the opening of the User details page was not achieved through the SAP UI5 routing function, so even after the details page was displayed, the url in the browser address bar corresponding to the entire SAP UI5 application remained 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 then visit the following url:

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

See the left and right buttons.

Click 跳转(不修改url) , it will jump to the following custom Not Found page:

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 跳转(要修改url) to 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

注销

引用和评论

什么是 Up front design

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号