SAP UI5 Application Development Tutorial No. 45 - How to use jQuery and native DOM API in SAP UI5 application

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

Tutorial Directory

• SAP local development environment162243fd84b085
• of the SAP UI5 application development tutorials: Hello World
• SAP UI5 Application Development Tutorial II: Bootstrap of SAP UI5 Bootstrap
• SAP UI5 Application Development Tutorial No. 3: Getting Started with the First SAP UI5 Control
• SAP UI5 Application Development Tutorial No. 4: A Preliminary Study of XML Views
• SAP UI5 Application Development Tutorial Part 5: A Preliminary Study of View Controllers
• SAP UI5 Application Development Tutorial Six - Understand the Concept of Module (Module) of SAP
• SAP UI5 Application Development Tutorial Part 7 - A Preliminary Study of JSON Model
• SAP UI5 Application Development Tutorial No. 8 - Multilingual
• SAP UI5 Application Development Tutorial No. 9 - Creating the First Component
• SAP UI5 Application Development Tutorial No. 10 - What is the Descriptor of SAP UI5 Application Descriptor
• 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
• 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
• 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, as well as a 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 in SAP
• SAP UI5 Application Development Tutorial Part 21 - Custom Formatter for
• SAP UI5 Application Development Tutorial No. 22 - Development and Use of
• SAP UI5 Application Development Tutorial No. 23 - Sorting and Grouping of List Controls
• SAP UI5 Application Development Tutorial Part 24 - How to Use OData Data
• SAP UI5 Application Development Tutorial Part 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 Part 27 - Introduction to , a Unit Testing Tool for SAP UI5 Applications162243fd84b566
• SAP UI5 Application Development Tutorial No. 28 - Introduction to OPA, an Integration Testing Tool for SAP
• SAP UI5 Application Development Tutorial No. 29 - Introduction to the Routing and Navigation Functions of SAP
• SAP UI5 Application Development Tutorial Thirty - Parameter Passing During the Routing Process of SAP
• SAP UI5 Application Development Tutorial 31 - Routing back and history of
• 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 Applications
• SAP UI5 Application Development Tutorial No. 34-SAP UI5 Application Based on Device Type Page Adaptation Function (Device Adaptation)
• SAP UI5 Application Development Tutorial No. 35 - How to Deploy a Locally Developed SAP UI5 Application to the ABAP
• SAP UI5 Application Development Tutorial No. 36 - Dynamically Modify CSS Classes Using Chrome Developer Tools Elements Tag
• SAP UI5 Application Development Tutorial No. 37 - Element Review Using Chrome Developer Tools Console
• SAP UI5 Application Development Tutorial No. 38 - Use Chrome Developer Tools to View Context Information when Program Execution
• SAP UI5 Application Development Tutorial No. 39 - Some common errors and analysis methods of white screen in SAP application sharing162243fd84b772
• SAP UI5 Application Development Tutorial No. 40 - How to Make SAP UI5 Release Version including component-preload.js
• SAP UI5 Application Development Tutorial Part 41 - Offline Installation and Usage of Chrome Extension Inspector162243fd84b7c9
• SAP UI5 Application Development Tutorial No. 42-Introduction to the Usage of the Diagnostic Tool that comes with SAP
• SAP UI5 Application Development Tutorial No. 43 - Introduction to the Use of the Support Assistant Tool that comes with SAP
• 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

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 , what are the best materials for beginners who know nothing about SAP UI5? once mentioned that Jerry has also come all the way from SAP UI5 rookie, and knows that it is not easy for developers with only ABAP development background to transform to SAP UI5 development field, so I designed this study for SAP UI5 beginners in my spare time. The tutorial 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 strive to be easy to understand and easy for SAP UI5 beginners to understand.

The source code of each step of this tutorial is stored on my Github , identified by folders 01, 02, 03, etc. respectively.

Each step builds on the previous step with several new features added. It is recommended for beginners with zero foundation or little knowledge of SAP UI5 to 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.

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.

In this step, we introduce how to continue using jQuery and the native DOM API that comes with the browser in the JavaScript code of the SAP UI5 view controller.

All source code for this step can be downloaded at this Github address:

https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/45

We run a SAP UI5 application arbitrarily, open the Chrome developer tools Network panel, use the shortcut key Ctrl + O, and then enter jQuery, we can see a series of loaded files containing jQuery keywords, which shows: The bottom layer of the SAP UI5 framework Based on jQuery, jQuery's API can still be used when developing SAP UI5 applications.

Look at an actual requirement. Suppose we need to use console.log to print out the ids and control instances of all controls rendered by the current SAP UI5 page.

The following is the analysis of this requirement and the specific implementation steps.

1. What function does the print statement need to be written in the controller?

2. How to get all SAP UI5 control instances on the page?

3. The function that SAP UI5 obtains the control instance according to the control id is: sap.ui.getCore.byId , the input parameter of this function is the control id, the type is a string, and the control instance is returned.

After the idea is clear, the next step is the specific implementation, refer to this article .