当前位置：网站首页>SAP ui5 application development tutorial 105 - detailed introduction to the linkage effect implementation of SAP ui5 master detail layout mode

SAP ui5 application development tutorial 105 - detailed introduction to the linkage effect implementation of SAP ui5 master detail layout mode

2022-07-03 03:47: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 .

In this tutorial 97 A step SAP UI5 Application development tutorial 97 - How to use the client JSON The model builds a Master-Detail-Detail Details page in layout , We have built one Master-Detail The layout of the shelf up .

This step will continue at 97 Improve on the basis of steps .

First, let's take a look at the final effect . Visit below url：

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

You will see a list page ：

After clicking any of the list line items , The screen is divided into left and right parts , The details page corresponding to the selected line item is displayed on the right . Notice in the address bar url, Accordingly, changes have taken place ：

http://localhost:8080/webapp/index.html#/detail/94/TwoColumnsMidExpanded

At this time, the width ratio between the list view on the left and the detail page view on the right is not 1：1, It's about 1：2, This is a SAP UX The design is intentional , Because at this time, after the user clicks the list line item , Explain that the user's focus will be on the detailed view of line items , Therefore, the current working area is to highlight the details page through this width ratio .

Empathy , Click on Supplier tab after , Will make Supplier The top row of the area is displayed at the top of the details page on the right , At the same time, the header area of the details page is automatically hidden ( You can make a comparison with the display effect of the header area of the details page in the above figure ). This behavior is the same , It is also to highlight the current user's focus on Supplier Area , Therefore, other irrelevant areas are hidden .

We can use the details page Pin Header Button , Display the header area of the details page lock , such , Even if Supplier tab When clicked , The head up area will not be hidden .

in addition , Through the head up area Collapse Header Button , We can also manually hide the display of the header area .

Master-Detail Layout is widely used in SAP Of each product Fiori Application , The most typical is SAP S/4HANA, So this layout is very important , Every SAP UI5 Developers should strive to master .

When this step is done , The dynamic effect of operation is as follows gif The diagram shows .

below Is the specific implementation steps .

原网站

版权声明
本文为[Wang Zixi]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/184/202207030339126582.html

边栏推荐

猜你喜欢

随机推荐