javascript - SAP UI5 Application Development Tutorial No. 75 - How to use the linkage technology of SAP UI5 master-slave form to display complex table content - 待注销

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 also come all the way from a SAP UI5 rookie. He knows that it is not easy for developers with only ABAP development background to transform into the 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 master-slave table linkage effect is also a common requirement in SAP projects. This step actually came from a consultation initiated by a friend on Zhihu.

The so-called master-slave table linkage means that two tables are displayed on the application interface at the same time. The first table is the main table. After selecting any row of the main table, the second table, that is, the secondary table, continues to display the details of the selected row item. information.

Let's look at a practical example.

Suppose we have a table with columns from left to right showing each person's last name, first name, age and his friends information.

Since each person may have more than one friend, there may be more than one row of columns for the same 朋友 item. For example, in the picture above, Li Si has three friends, and Wang Wu and Zhao Er have two friends each.

For such a complex structure that a column of a row item may have multiple pieces of data, as shown in the figure above, the height of each row item displayed in the table is different. Come to the feeling of UI style inconsistency.

To avoid this UX issue, one implementation that follows the SAP Fiori design guidelines is 主从联动表 .

Put the information displayed by name and age into the main table, when a row of the main table is selected, the detailed data corresponding to this row of data will be displayed in the slave table.

After following this step, we will get the SAP UI5 application with the following appearance:

After selecting a row item in the main table, it will display the information of all friends owned by the person represented by the row item in the form of 从表 . It is not difficult to see that after the master-slave table linkage is adopted, the height of the row items can be kept the same regardless of the master table or the slave table, and the information display of 人-朋友关系 is more clear and clear at a glance.

The following are the detailed implementation steps.

SAP UI5 Application Development Tutorial No. 75 - How to use the linkage technology of SAP UI5 master-slave form to display complex table content

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

Tutorial Directory

illustrate

注销

引用和评论

什么是 Up front design

Javascript(turfjs)等值线图绘制

2024最全ECharts 实战大全（速记版+资源）

一些react使用小技巧（中）

CSS 如何模拟“真实的”进度条？

如何在仓库中添加只对自己生效的.gitignore规则？

在ONES的工作体验分享