In-depth analysis trial version of SAP UI5 Container control aggregation

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

About the Author

Jerry Wang, joined the SAP Chengdu Research Institute after graduating from the University of Electronic Science and Technology of China with a master's degree in computer science in 2007. Jerry is a SAP Community Mentor and a SAP China Technology Ambassador. In his 15-year career in SAP standard product development, Jerry has participated in the research and development of standard products such as SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, and SAP Commerce Cloud (e-commerce cloud).

Jerry uses ABAP, Java, JavaScript and TypeScript for development, and has in-depth research on various SAP self-developed frameworks including SAP UI5.

Tutorial Directory

• The establishment of SAP UI5 local development environment
• One of the SAP UI5 application development tutorials: Hello World
• SAP UI5 application development tutorial 2: Bootstrap of the bootstrap process of SAP UI5
• SAP UI5 Application Development Tutorial 3: Getting Started with the First SAP UI5 Control
• SAP UI5 Application Development Tutorial No. 4: A Preliminary Exploration of XML View
• SAP UI5 Application Development Tutorial No. 5: A Preliminary Exploration of View Controllers
• SAP UI5 application development tutorial six - understand the concept of module (Module) of SAP UI5
• SAP UI5 Application Development Tutorial No. 7 - A Preliminary Study of JSON Model
• SAP UI5 Application Development Tutorial No. 8-Multilingual Support
• SAP UI5 Application Development Tutorial No. 9 - Create the first Component
• The tenth of the SAP UI5 application development tutorial - what is the descriptor of the SAP UI5 application
• SAP UI5 Application Development Tutorial Eleven: SAP UI5 Container Class Controls Page and Panel
• SAP UI5 Application Development Tutorial Twelve - Use CSS Classes to Further Beautify the UI
• SAP UI5 Application Development Tutorial Thirteen - How to Add Custom CSS Classes
• SAP UI5 Application Development Tutorial No. 14 - How to Use Embedded Views
• SAP UI5 Application Development Tutorial No. 15 - How to Use Dialog Boxes and Fragments
• SAP UI5 application development tutorial sixteen - the use of icon icon
• SAP UI5 Application Development Tutorial Seventeen - Use of Aggregate Binding in UI5 Composite Controls
• SAP UI5 Application Development Tutorial No. 18 - Special symbols in SAP UI5 data binding syntax, and detailed explanation of absolute binding and relative binding concepts
• SAP UI5 Application Development Tutorial No. 19 - SAP UI5 Data Types and Complex Data Binding
• SAP UI5 Application Development Tutorial Twenty-Explanation of Expression Binding Usage of SAP UI5
• SAP UI5 Application Development Tutorial 21 - Custom Formatter for SAP UI5
• SAP UI5 Application Development Tutorial No. 22 - Development and Use of Filter
• SAP UI5 Application Development Tutorial No. 23 - Sorting and Grouping of List Controls
• SAP UI5 Application Development Tutorial No. 24 - How to Use OData Data Model
• SAP UI5 Application Development Tutorial No. 25 - Using a Proxy Server to Solve the Cross-domain Problem of SAP UI5 Application Accessing Remote OData Services
• SAP UI5 Application Development Tutorial No. 26 - Detailed explanation of the use steps of OData service with Mock server
• SAP UI5 Application Development Tutorial No. 27 - Introduction to QUnit, the Unit Testing Tool for SAP UI5 Applications
• SAP UI5 Application Development Tutorial No. 28 - Introduction to OPA, the Integration Test Tool for SAP UI5 Applications
• SAP UI5 Application Development Tutorial No. 29 - Introduction to the routing and navigation functions of SAP UI5
• SAP UI5 Application Development Tutorial No. 30 - Parameter passing in the routing process of SAP UI5
• SAP UI5 Application Development Tutorial No. 31 - Routing back and history of SAP UI5
• SAP UI5 Application Development Tutorial No. 32 - How to Create a Custom SAP UI5 Control
• SAP UI5 Application Development Tutorial No. 33 - Responsiveness of SAP UI5 Application
• SAP UI5 Application Development Tutorial No. 34 - Device Adaptation of SAP UI5 Application Based on Device Type
• SAP UI5 Application Development Tutorial No. 35 - How to Deploy a Locally Developed SAP UI5 Application to the ABAP Server
• SAP UI5 Application Development Tutorial No. 36 - Use Chrome Developer Tools Elements Tag to Dynamically Modify CSS Classes
• SAP UI5 Application Development Tutorial No. 37 - Element Review Using Chrome Developer Tools Console Panel
• SAP UI5 Application Development Tutorial No. 38 - Use Chrome Developer Tools to View Context Information when Program Execution Errors
• SAP UI5 Application Development Tutorial No. 39 - Some common errors and analysis methods of white screen in SAP UI5 applications
• SAP UI5 Application Development Tutorial No. 40 - How to make a SAP UI5 release version including component-preload.js
• SAP UI5 Application Development Tutorial No. 41 - Offline Installation and Use of Chrome Extension UI5 Inspector
• SAP UI5 Application Development Tutorial No. 42 - Introduction to the use of the Diagnostics tool that comes with SAP UI5
• SAP UI5 Application Development Tutorial No. 43 - Introduction to the use of the Support Assistant tool that comes with SAP UI5
• SAP UI5 Application Development Tutorial No. 44-Cause Analysis and Solution of Label and Input Control Text Not Aligned Horizontally
• SAP UI5 Application Development Tutorial No. 45 - How to use jQuery and native DOM API in SAP UI5 application
• SAP UI5 Application Development Tutorial No. 46 - Using Message Manager to Implement Out-of-the-Box Validation Information Throwing
• SAP UI5 Application Development Tutorial No. 47 - How to Customize the Validation Logic of SAP UI5 String Type Input Fields
• SAP UI5 Application Development Tutorial No. 48 - How to Develop Barcode Scanning Function in SAP UI5 Application
• SAP UI5 Application Development Tutorial No. 49 - How to debug SAP UI5 applications running on mobile phones on the desktop computer
• SAP UI5 Application Development Tutorial Fifty - How to use Cordova to generate a SAP UI5 application into a hybrid application that can be installed on Android phones
• SAP UI5 Application Development Tutorial No. 51 - How to use Chrome to debug SAP UI5 Cordova hybrid applications running on mobile phones
• SAP UI5 Application Development Tutorial No. 52 - How to use the standard controls of SAP UI5 combined with the Cordova plug-in to call the mobile phone camera for barcode scanning
• SAP UI5 Application Development Tutorial No. 53 - How to Customize SAP UI5 Data Type (Data Type)
• SAP UI5 Application Development Tutorial No. 54 - How to configure the local SAP UI5 application into the local Fiori Launchpad
• SAP UI5 Application Development Tutorial No. 55 - How to Deploy a Local SAP UI5 Application to the Public Network through Node.js Express
• SAP UI5 Application Development Tutorial No. 56 - Development of SAP UI5 Tree Control (tree)
• SAP UI5 Application Development Tutorial No. 57 - Learning how to use Smart Field based on OData annotations
• SAP UI5 application development tutorial fifty-eight - use factory methods to dynamically create different types of list line item controls at runtime
• SAP UI5 Application Development Tutorial No. 59 - How to Display the World Map in SAP UI5 Application
• SAP UI5 application development tutorial sixty-some advanced usage of SAP UI5 map control
• SAP UI5 Application Development Tutorial No. 61 - Drawing Gantt Chart in SAP UI5 Application
• SAP UI5 Application Development Tutorial No. 62 - Introduction to the Use of SAP UI5 Form Control Based on OData V4
• SAP UI5 Application Development Tutorial No. 63 - In-depth introduction to the implementation of local Mock Server based on OData V4
• SAP UI5 Application Development Tutorial No. 64 - How to implement filter (filtering) and sort (sorting) functions in SAP UI5 table control based on OData V4
• SAP UI5 Application Development Tutorial No. 65 - How to Create, Edit and Save the SAP UI5 Form Control Based on OData V4
• SAP UI5 Application Development Tutorial No. 66 - How to implement the delete function in the SAP UI5 form control based on OData V4
• SAP UI5 Application Development Tutorial No. 67 - Implementation of SAP UI5 List-Detail (List-Detail) Layout Based on OData V4
• SAP UI5 Application Development Tutorial No. 68 - How to display a custom NOT Found page when SAP UI5 routing fails
• SAP UI5 Application Development Tutorial No. 69 - How to jump back to the normal application page from the SAP UI5 Not Found page
• SAP UI5 Application Development Tutorial No. 70 - How to Use Button Control to Trigger Page Routing Jump
• SAP UI5 Application Development Tutorial No. 71 - Nested Routing of SAP UI5 Pages
• SAP UI5 Application Development Tutorial No. 72 - Animation Effect Settings for SAP UI5 Page Routing
• SAP UI5 Application Development Tutorial No. 73 - Using Custom Query to Implement the Bookmark Function of SAP UI5 Page Routing
• SAP UI5 Application Development Tutorial No. 74 - A trap of using OData V4 to display Table data in SAP UI5 application
• SAP UI5 Application Development Tutorial No. 75 - How to use the linkage technology of SAP UI5 master-slave form to display complex table content
• SAP UI5 Application Development Tutorial No. 76 - How to Implement Lazy Loading of SAP UI5 (Lazy Loading, Lazy Loading)
• SAP UI5 application development tutorial seventy-seven - advanced usage of SAP UI5 dynamic page routing: one-to-many relationship between routing records routes and target
• SAP UI5 application development tutorial seventy-eight - how to maintain the state of SAP UI5 search through url, let it support bookmark function
• SAP UI5 Application Development Tutorial No. 79 - Using Test Driven Development for Functional Development of SAP UI5 Applications (1)
• SAP UI5 Application Development Tutorial No. 80 - Using Test Driven Development for Functional Development of SAP UI5 Applications (2)
• SAP UI5 Application Development Tutorial No. 81 - An example of using OPA5 for SAP UI5 Integration Test (Integration Test)
• SAP UI5 Application Development Tutorial No. 82 - Using OPA5 to develop SAP UI5 integration test cases that support page jumping
• SAP UI5 Application Development Tutorial No. 83 - Introduction to the Development Steps of the Automated Test Suite Page for SAP UI5
• SAP UI5 Application Development Tutorial No. 84 - How to specify SAP UI5 application to run based on a specific version
• SAP UI5 Application Development Tutorial No. 85 - How to use OPA5 to write test cases to test the function of user input text
• SAP UI5 Application Development Tutorial No. 86 - Hands-on Development of a Simplest Local Mock Data Server
• SAP UI5 Application Development Tutorial No. 87 - How to Make SAP UI5 Mock Server Support Custom URL Parameters
• SAP UI5 Application Development Tutorial No. 88 - How SAP UI5 Mock Server Implements Custom Function Import
• SAP UI5 Application Development Tutorial No. 89 - How to Add Multiple Graphical Interface Filters to the SAP UI5 List Control
• SAP UI5 Application Development Tutorial No. 90 - Implementation of SAP UI5 List-Detail (List-Detail) Layout Based on OData V2
• SAP UI5 Application Development Tutorial No. 91 - How to Build a List Page in a Master-Detail-Detail Layout Using the Client-Side JSON Model
• SAP UI5 Application Development Tutorial No. 92 - Premise of Table Pagination Based on SAP UI5 JSONModel Client Model
• SAP UI5 Application Development Tutorial No. 93 - In-depth discussion of data display of list controls based on JSONModel data model
• SAP UI5 Application Development Tutorial No. 94 - A Complete Solution for Paging Display Data of SAP UI5 List Control Based on JSONModel Data Model
• SAP UI5 application development tutorial ninety-five - how to use the SAP UI5 drop-down menu (Select) control
• SAP UI5 Application Development Tutorial No. 96 - How to customize the paging size when the SAP UI5 list control displays data in paging
• SAP UI5 Application Development Tutorial No. 97 - How to use the client-side JSON model to build a detail page in a Master-Detail-Detail layout
• SAP UI5 Application Development Tutorial No. 98 - From the viewId attribute, let's talk about the HTML source code generation mechanism of SAP UI5
• SAP UI5 Application Development Tutorial No. 99 - In-depth discussion of package.json and ui5.yaml in SAP UI5 local development environment
• One hundred SAP UI5 application development tutorials - how to modify the source code implementation of the SAP UI5 framework and use the locally deployed SAP UI5 SDK
• SAP UI5 Application Development Tutorial One Hundred and One - Locale Decision Mechanism of SAP UI5 Application
• SAP UI5 Application Development Tutorial One Hundred and Two - Detailed Implementation of the Print Function of SAP UI5 Application
• SAP UI5 Application Development Tutorial One Hundred and Three - How to Consume Third-Party Libraries in SAP UI5 Applications
• SAP UI5 application development tutorial one hundred and four - SAP UI5 table control support for multi-select and how to use code to select multiple table row items at once
• SAP UI5 Application Development Tutorial One Hundred and Five - A detailed introduction to the realization of the linkage effect of the SAP UI5 Master-Detail layout mode
• SAP UI5 application development tutorial one hundred and six - how to improve the readability of SAP UI5 application routing url
• SAP UI5 application development tutorial one hundred and seven - SAP UI5 OverflowToolbar container control and some details of resize event handling
• SAP UI5 Application Development Tutorial One Hundred and Eight - Introduction to the Use of SAP UI5 Picture Display Control Avatar
• SAP UI5 Application Development Tutorial One Hundred and Nine-Using the SAP UI5 FileUploader Control to Upload Local Files
• SAP UI5 application development tutorial one hundred and ten - SAP UI5 FileUploader control in-depth introduction - why do you need a hidden iframe
• SAP UI5 application development tutorial 111-SAP UI5 FileUploader control realizes local file upload, encounters cross-domain access error when receiving server-side response
• SAP UI5 Application Development Tutorial One Hundred and Twelve - Use a self-developed proxy server to solve the cross-domain access error encountered when uploading files with SAP UI5 FileUploader
• SAP UI5 Application Development Tutorial One Hundred and Thirteenth - Teaching a Man to Fish - How to Query the Documents and Technical Implementation Details of Any SAP UI5 Control Properties by Yourself
• SAP UI5 application development tutorial one hundred and fourteen - how to find the cause of the Fiori Launchpad routing error through single-step debugging
• SAP UI5 Application Development Tutorial One Hundred and Fifteen - In-depth explanation of the technical implementation of configuring the local SAP UI5 application to the local Fiori Launchpad
• SAP UI5 application development tutorial one hundred and sixteen - use ABAP report in SAPGUI to upload SAP UI5 application to ABAP server
• SAP UI5 Application Development Tutorial 117-Analysis and solution of the reason why Chinese characters become garbled when the locally developed SAP UI5 application is deployed to the ABAP server
• SAP UI5 Application Development Tutorial One Hundred and Eighteen - How to Analyze Problems Caused by SAP UI5 Version Differences
• SAP UI5 Application Development Tutorial 119 - In-depth Analysis of SAP UI5 Container Control Aggregation
• SAP UI5 Application Development Tutorial One Hundred and Twenty-Writing...

illustrate

Jerry has been in touch 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? It was mentioned that Jerry has come all the way from SAP UI5 rookie. He knows that it is not easy for developers with only ABAP development background to transform to SAP UI5 development field, so I designed this suit in my spare time SAP UI5 不同水平 The learner's learning tutorial, which divides the process of developing a complete SAP UI5 application into several steps, and strives 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 I strive to explain the profound things in simple language. The important knowledge points are accompanied by detailed screenshots to assist the introduction of the text, which is convenient for the understanding of the tutorial learners.

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 to have zero foundation or little knowledge of SAP 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 your understanding .

For SAP UI5 developers who have already 有一定基础 , you can skip the previous part of the more basic chapters through the table of contents of this article, and directly select the chapters related to your own work projects, or include some knowledge points that you have not yet mastered. Targeted learning.

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. Although I am usually very busy with development work, I promise to check the comments you leave me on a regular basis. For the technical questions involved, I will definitely 抽时间做出解答 .

The twenty-ninth step of this tutorial, the twenty-ninth SAP UI5 application development tutorial - introduction to the routing and navigation functions of SAP UI5 , a friend will leave a message after learning:

Where is the controlAggregation: "pages" reflected in the manifest?

This friend asked about the meaning of the file in folder 29 manifest.json and the value of controlAggregation pages .

This article will explain in depth, the parsing and processing logic of this pages in SAP UI5 runtime.

What if we intentionally changed it to pages2 ?

This article gives a detailed analysis: SAP UI5 Application Development Tutorial One Hundred and Nineteen - In-depth Analysis of SAP UI5 Container Control Aggregation