头图

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

Tutorial Directory

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:

SAP UI5 Application Development Tutorial No. 48 - How to Develop Barcode Scanning Function in SAP UI5 Application

The browser address bar also changed from Shell-home to barcode-scan .

The following are the detailed implementation steps.


注销
1k 声望1.6k 粉丝

invalid