105. Detailed introduction of linkage effect realization of SAP ui5 master detail layout mode

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 details will be automatically