SAP UI5 Beginners Tutorial No. 22 - Development and Use of the Trial Version of the Filter

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

Tutorial Directory

• SAP local development environment16214f3707c8bb
• of the SAP UI5 Beginners Tutorials: Hello World
• SAP UI5 Beginners Tutorial Part 2: The Bootstrap Process of SAP UI5 Bootstrap
• SAP UI5 Tutorial for Beginners Part 3: Getting Started with Your First SAP
• SAP UI5 Beginners Tutorial Part 4: A Preliminary Study of XML Views
• SAP UI5 Beginners Tutorial Part 5: A Preliminary Study of View Controllers
• SAP UI5 Beginners Tutorial Six - Understanding the Concept of Modules in SAP
• SAP UI5 Beginner Tutorial Part 7 - A Preliminary Study of JSON Model
• SAP UI5 Beginner Tutorial No. 8 - Multilingual
• SAP UI5 Beginners Tutorial No. 9 - Creating Your First Component
• SAP UI5 Beginners Tutorial No. 10 - What is the Descriptor Descriptor for SAP UI5 Application
• SAP UI5 Beginner Tutorial Eleven: SAP UI5 Container Class Controls Page and Panel
• SAP UI5 Beginners Tutorial Part 12 - Using CSS Classes to Further Beautify the UI
• SAP UI5 Tutorial for Beginners Part 13 - How to Add Custom CSS Classes
• SAP UI5 Beginners Tutorial No. 14 - How to Use Embedded Views
• SAP UI5 Beginners Tutorial Part 15 - How to Use Dialog Boxes and Fragments
• SAP UI5 Beginners Tutorial Part 16 - Use of
• SAP UI5 Beginners Tutorial No. 17 - Use of Aggregate Binding in UI5 Composite Controls
• SAP UI5 Beginners Tutorial No. 18 - Special symbols in SAP UI5 data binding syntax, and detailed explanation of absolute binding and relative binding concepts
• SAP UI5 Beginner Tutorial No. 19 - SAP UI5 Data Types and Complex Data
• SAP UI5 Beginners Tutorial Twenty-Explanation of Expression Binding Usage in SAP
• SAP UI5 Beginner Tutorial Part 21 - Custom Formatter for
• SAP UI5 Beginners Tutorial No. 22 - Development and Use of

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 , newbies who know nothing about SAP UI5, which materials are better to start with? 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 in 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.

Through the previous step of this tutorial SAP UI5 Beginners Tutorial Part 21 - Custom Formatter for SAP UI5, we have got a list of invoices:

In this step, we go a step further and add a search box to this list. Users can enter keywords in the search box to filter the invoices in the list and improve the user experience.

The list of invoices after completing the tutorial in this step is displayed as shown below:

Entering a keyword such as Salad in the search box will filter the invoice list to show only those invoice line items that contain Salad in the ProductName field of the invoice model.

For detailed implementation steps and principle analysis, please see this article .