Implementation steps of master detail detail layout mode of SAP ui5 application

So-called SAP UI5 The main application - from - From layout mode , It means that the horizontal direction of the screen is divided into left , in , The third part on the right .

Each section shows Master,Detail First floor and Detail The second layer of data .

The following gif This is a specific example of this layout ：

The application provides the following functions ：

• be based on sap.f.FlexibleColumnLayout Control's maximum three column layout . This layout has predefined layout types and defined routes between them , You can navigate smoothly between the master and slave modes of your application .

• be based on sap.f.DynamicPage The control of Master page , It lists the available products and has filtering and sorting options .

• be based on sap.uxap.ObjectPageLayout Control details page , It contains details about the objects selected in the master page , It has achieved ObjectPageLayout Control's dynamic title .

• sap.f.Avatar Control is used in the title area to display an image of the selected product .

• Scroll down the contents of the page or click / Click on the title area , You can collapse the title area （ Snap to title ）. The title area can also be fixed , To remain visible as the user scrolls down the contents of the page .

• There is a set of actions on the right side of the title area . The title area can display specific content when the title is captured .

• Floating footer at the bottom of the page , At the top of the page content . It saves the final operation on the right .

• be based on sap.f.DynamicPage The details page of , Used to display more details of the selected object in the details page .

• One is based on sap.f.DynamicPage Simple about page , Used to display more details of the selected object from the details page , namely Detail The second layer of data .

So-called Dynamic Page, Is a layout control (Layout control), It can be used to realize a web page seen by end users , By title 、 Head up area with dynamic behavior 、 Content area and optional floating footer area .

• DynamicPageTitle - By the title on the left 、 The content in the middle and the operation on the right . The content displayed will be based on DynamicPageHeader Change according to the current mode of .

• DynamicPageHeader - A universal container , Can contain a single layout control and don't care about content alignment and responsiveness . The head up area is expanding (expanded) And stow mode , And it can adjust its behavior with the help of different attributes .

• Content area - A universal container , Can have a single UI5 Layout control , Don't care about content alignment and responsiveness .

• The footer - At the bottom , There is a small offset , For additional operations , The footer floats above the content . It could be anything sap.m.IBar Control .

Specific implementation steps as follows .