A set of step-by-step learning tutorials for SAP UI5 beginners
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
illustrate
Jerry has been in contact 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? As I mentioned, Jerry has also come all the way from a SAP UI5 rookie. He knows that it is not easy for developers with only ABAP development background to transform into the 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 for each step of this tutorial is stored on my Github , identified by folders 01, 02, 03, etc.
Each step builds on the previous step with several new features 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 to the local, cooperate with the text explanation of the tutorial, and do it yourself to deepen the 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.
SAP Fiori Launchpad (Launch Edition) is a standard entry for users to access UI applications, including SAP S/4HANA, SAP CRM, and many other standard products. The interface is shown in the following figure:
The rectangular boxes in Fiori Launchpad are called tiles. After clicking, they will jump to the configured SAP UI5 application. The mapping relationship between Tile and SAP UI5 applications is set in the SAP standard product background.
So far in this tutorial, we have run locally npm install
and then ui5 serve
and then access the url printed by the tool, such as http://localhost:8081
, and then manually paste it into the browser address bar to access the application:
Click on index.html to access the application for the corresponding step:
Is there a way to configure the application we develop at each step as a tile in Fiori Launchpad like the standard SAP product?
This step introduces specific practices.
Here is an effect diagram:
After clicking on the App 1 tile, Fiori Launchpad jumps to the Barcode barcode scanning application we completed in step 48 earlier:
The browser address bar also changed from Shell-home
to barcode-scan
.
The following are the detailed implementation steps.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。