SAP ui5 application development tutorial 54 – how to configure local SAP ui5 applications into local Fiori launchpad

Time:2022-5-1

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

Tutorial directory

explain

Jerry began to contact SAP ui5 after 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 on the sap community and “WangZiXi” wechat official account.

In Jerry’s articleFor novices who know nothing about SAP ui5, what materials are better to start with?It was mentioned that Jerry came all the way from SAP ui5 rookie and knew that it was not easy for developers with only ABAP development background to transform into SAP ui5 development field. Therefore, I designed this learning tutorial suitable for SAP ui5 beginners in my spare time to divide the process of developing a complete SAP ui5 application into several steps and strive to cover the knowledge points involved in each step. These knowledge points may not be as deep as my ui5 source code analysis series, but they should be easy to understand and easy for SAP ui5 beginners to understand.

The source code of each step of this tutorial is stored in myGithubOn, they are identified by folders 01, 02, 03, etc.

SAP ui5 application development tutorial 54 - how to configure local SAP ui5 applications into local Fiori launchpad

Each step is based on the previous step, and several new features are 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 locally, cooperate with the text explanation of the tutorial, and do it yourself to deepen their understanding.

If you have any questions about each step of the tutorial, please comment and leave a message in the corresponding step article of the tutorial.

SAP Fiori launchpad (launch version) is a standard entry for users to access UI applications, including many standard products such as SAP s / 4hana and SAP CRM. The interface is shown in the following figure:

SAP ui5 application development tutorial 54 - how to configure local SAP ui5 applications into local Fiori launchpad

Rectangular boxes in Fiori launchpad are called tiles. After clicking, it will jump to the configured SAP ui5 application. The mapping relationship between tile and SAP ui5 applications is set in the background of SAP standard products.

So far in this tutorial, we have run it locallynpm install, thenui5 serveThen, access the URL printed out by the tool, such as the following figurehttp://localhost:8081, and then manually paste it into the browser address bar to access the application:

SAP ui5 application development tutorial 54 - how to configure local SAP ui5 applications into local Fiori launchpad

Click index HTML to access the application of the corresponding step:

SAP ui5 application development tutorial 54 - how to configure local SAP ui5 applications into local Fiori launchpad

Is there any way to configure the application developed in each step as a tile of Fiori launchpad, just like the sap standard product?

This step describes the specific approach.

The following is a rendering:

SAP ui5 application development tutorial 54 - how to configure local SAP ui5 applications into local Fiori launchpad

After clicking app 1 tile, Fiori launchpad will jump to the barcode barcode scanning application we completed in step 48 above:

SAP ui5 application development tutorial 48 – how to develop barcode scanning function in SAP ui5 application
SAP ui5 application development tutorial 54 - how to configure local SAP ui5 applications into local Fiori launchpad

The browser address bar is also fromShell-homeBecomebarcode-scan.

belowIs the detailed implementation steps.