SAP ui5 application development tutorial 56 – development trial version of SAP ui5 tree control (tree)

Time:2022-4-29

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

Tutorial directory

explain

Jerry began to contact SAP ui5 after 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 on the sap community and “WangZiXi” wechat official account.

In Jerry’s articleWhat materials are better for novices who know nothing about SAP ui5?It was mentioned that Jerry came all the way from SAP ui5 rookie and knew that it was not easy for developers with only ABAP development background to transform into SAP ui5 development field. Therefore, I designed this learning tutorial suitable for SAP ui5 beginners in my spare time to divide the process of developing a complete SAP ui5 application into several steps and strive to cover the knowledge points involved in each step. These knowledge points may not be as deep as my ui5 source code analysis series, but they should be easy to understand and easy for SAP ui5 beginners to understand.

The source code of each step of this tutorial is stored in myGithubOn, they are identified by folders 01, 02, 03, etc.

SAP ui5 application development tutorial 56 - development trial version of SAP ui5 tree control (tree)

Each step is based on the previous step, and several new features are 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 locally, cooperate with the text explanation of the tutorial, and do it yourself to deepen their understanding.

If you have any questions about each step of the tutorial, please comment and leave a message in the corresponding step article of the tutorial.

In this step, we will learn to use SAP ui5 to display a very useful data structure in the field of computer application development: tree.

Here are the results:
SAP ui5 application development tutorial 56 - development trial version of SAP ui5 tree control (tree)

Click the first oneCollapse allButton to collapse all expanded tree nodes.

SAP ui5 application development tutorial 56 - development trial version of SAP ui5 tree control (tree)

Click the secondCollapse selectionButton, you can collapse only all child nodes expanded by the selected tree node.

SAP ui5 application development tutorial 56 - development trial version of SAP ui5 tree control (tree)

ThirdExpand first levelButton, which means to expand all child nodes under all first level tree nodes.

SAP ui5 application development tutorial 56 - development trial version of SAP ui5 tree control (tree)

FourthExpand selectionButton, which means to expand all child nodes under the selected tree node.

belowIs the implementation details of this tree control.