A set of step-by-step learning tutorials for SAP UI5 beginners
Tutorial Directory
-
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
-
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 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. 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. 53 - How to Customize SAP UI5 Data Type (Data Type)
-
SAP UI5 Application Development Tutorial No. 56 - Development of SAP UI5 Tree Control (tree)
-
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. 71 - Nested Routing of SAP UI5 Pages
-
SAP UI5 Application Development Tutorial No. 72 - Animation Effect Settings for SAP UI5 Page Routing
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? As I mentioned, 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 learning tutorial for SAP UI5 beginners in my spare time. , Divide the process of developing a complete SAP UI5 application into several steps, and strive 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. 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 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.
When I made the 67th step of this tutorial, I encountered some pitfalls when using the OData V4 version of the service in the SAP UI5 application, and I will share it with you here.
Postman
We access NorthWind
the url of the well-known OData service for learning and teaching purposes in:
https://services.odata.org/v2/northwind/northwind.svc/Categories
The url fragment v2
indicates that this OData service is based on OData Version 2.
The Accept field of the HTTP request is selected as application/json
, so that the request result is displayed in json format:
The JSON data returned by the server is as follows. The field name d
of the first layer is as follows, and the second layer is results
:
The structure of these 8 categories at a glance:
Let's go back to the OData V4 service used in Tutorial 67.
The following is its metadata metadata url:
https://services.odata.org/TripPinRESTierService/(S(id))/$metadata
From the version
fields is not difficult to see that this service is based on Version 4.
We use the following url to access the first 10 pieces of People data contained in this V4 OData service, and the returned data is as follows:
https://services.odata.org/TripPinRESTierService/(S(id))/People?KaTeX parse error: Expected 'EOF', got '&' at position 11: count=true&̲skip=0&$top=10
You can see that the People array is contained in value
a .
Don't underestimate this value
field , it involves a trap for a SAP UI5 application to consume OData V4 services.
The following is a detailed introduction to this trap.