当前位置:网站首页>Implementation steps of master detail detail layout mode of SAP ui5 application
Implementation steps of master detail detail layout mode of SAP ui5 application
2022-07-05 00:48:00 【Wang Zixi】
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 .
边栏推荐
- Some basic functions of enterprise projects are developed, and important things are saved to online first a
- 2022.07.03(LC_6111_统计放置房子的方式数)
- Parameter passing mechanism of member methods
- 初识ROS
- Upload avatar on uniapp
- Basic concept and usage of redis
- PyTorch: In-place Operation
- "Upside down salary", "equal replacement of graduates" these phenomena show that the testing industry has
- Multilingual Wikipedia website source code development part II
- 巩固表达式C# 案例简单变量运算
猜你喜欢
User login function: simple but difficult
[paper reading] cavemix: a simple data augmentation method for brain vision segmentation
leetcode494,474
P3304 [sdoi2013] diameter (diameter of tree)
Get to know ROS for the first time
Hill sort of sorting
Fs8b711s14 electric wine bottle opener MCU IC scheme development special integrated IC
Binary conversion problem
Identifiers and keywords
Detailed explanation of openharmony resource management
随机推荐
He worked as a foreign lead and paid off all the housing loans in a year
2022.07.03(LC_6111_统计放置房子的方式数)
他做国外LEAD,用了一年时间,把所有房贷都还清了
Nine Qi single chip microcomputer ny8b062d single key control four LED States
基本放大电路的学习
AcWing164. 可达性统计(拓扑排序+bitset)
ORB(Oriented FAST and Rotated BRIEF)
两个数相互替换
Mongodb series learning notes tutorial summary
Date time type and format in MySQL
Operator explanation
abc 258 G - Triangle(bitset)
Les phénomènes de « salaire inversé » et de « remplacement des diplômés » indiquent que l'industrie des tests a...
“薪资倒挂”、“毕业生平替” 这些现象说明测试行业已经...
NPM install error forced installation
[Yocto RM]11 - Features
What you learned in the eleventh week
uniapp微信小程序拿来即用的瀑布流布局demo2(方法二)(复制粘贴即可使用,无需做其他处理)
TS快速入门-函数
《论文笔记》Multi-UAV Collaborative Monocular SLAM