当前位置：网站首页>SAP ui5 application development tutorial 106 - how to improve the readability of SAP ui5 application routing URL trial version

SAP ui5 application development tutorial 106 - how to improve the readability of SAP ui5 application routing URL trial version

2022-07-05 00:41:00 【Wang Zixi】

One suit SAP UI5 A step-by-step learning tutorial for beginners

Author's brief introduction

Jerry Wang,2007 After graduating from the University of Electronic Science and technology with a master's degree in computer science, he joined SAP Chengdu Research Institute has worked so far .Jerry yes SAP Community mentors ,SAP Chinese technical Ambassador . In a 15 Year of SAP Standard product development career ,Jerry Once participated in SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud( E-commerce cloud ) And other standard products .

Jerry Use in work ABAP, Java, JavaScript and TypeScript Development , Yes, including SAP UI5 More than one SAP Self research framework has in-depth research .

Tutorial directory

explain

Jerry from 2014 To join in SAP Chengdu Research Institute CRM Fiori After that, the development team began to contact SAP UI5, Once in the SAP Communities and “ Wang Zixi ” There are many articles on WeChat official account SAP UI5 Working principle and source code analysis article .

stay Jerry This article Yes SAP UI5 A novice who knows nothing , Which materials are better to start with ？ It was mentioned that ,Jerry Also from the SAP UI5 Rookies come all the way , Knowing that only ABAP Developers with development background , towards SAP UI5 It is not easy to transform the development field , So I designed this job in my spare time SAP UI5 Different levels Learning tutorials for learners , Develop a complete SAP UI5 Application process , Split into several steps , Make every effort to , Cover all the knowledge points involved in .

These knowledge points may not be like mine UI5 The source code analysis series is so in-depth , But try to explain in simple terms , Important knowledge points are accompanied by detailed screenshots to assist the text introduction , Facilitate the understanding of tutorial learners .

The source code for each step of this tutorial , All stored in my Github On , Use folders separately 01,02,03 Wait to identify , For example, steps 1 The source code of is here .

Each step is based on the previous step , Added several new features . Suggest zero basis or to SAP UI5 Little known SAP UI5 beginner , Learn step by step from the first step in order , Download the code locally , With the text explanation of the tutorial , Do it yourself , To deepen understanding .

For already There is a certain foundation Of SAP UI5 Developer , You can use the contents of this article , Skip the previous basic chapter , Direct selection is related to your work project , Or include some knowledge points and chapters that you haven't mastered yet to study pertinently .

If you have any questions about each step of the tutorial , Welcome to give me comments in the corresponding step article of the tutorial , Leave a message . Although I am usually busy with development , But I promise I will check the comments you left me regularly , For the technical questions involved , I will Take time to answer .

The previous step in this tutorial SAP UI5 Application development tutorial 105 - SAP UI5 Master-Detail Detailed introduction to the linkage effect of layout mode We have achieved a typical compliance Master-Detail The layout of the page is SAP UI5 application , The effect is as follows gif The diagram shows ：

There are many flaws in this application .

For example, we click on the first line item in the list , The products of this line item id by HT-2001, But the browser address bar detail The following clip is 94, This makes users confused . Because if this 94 On behalf of the product index , We clicked on the first line item in the list , Its index value should be 0 That's right , This 94 Where is it from ？

First introduce the effect of this step ： We want to improve the click line item after , Rendered detail page url Readability .

After completing the development according to this step , The result is , After clicking on the line item , Products of line items id Appear in the address bar , Here is an example ：

http://localhost:8080/webapp/index.html#/detail/HT-1000/TwoColumnsMidExpanded