In-depth explanation of the technical implementation of configuring the local SAP UI5 application to the local Fiori Launchpad

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

About the Author

Jerry Wang, joined the SAP Chengdu Research Institute after graduating from the University of Electronic Science and Technology of China with a master's degree in computer science in 2007. Jerry is a SAP Community Mentor and a SAP China Technology Ambassador. In his 15-year career in SAP standard product development, Jerry has participated in the research and development of standard products such as SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, and SAP Commerce Cloud (e-commerce cloud).

Jerry uses ABAP, Java, JavaScript and TypeScript for development, and has in-depth research on various SAP self-developed frameworks including SAP UI5.

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 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 suit in my spare time SAP UI5 不同水平 The learner's learning tutorial, which 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 I strive to explain the profound things in simple language. The important knowledge points are accompanied by detailed screenshots to assist the introduction of the text, which is convenient for the understanding of the tutorial learners.

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 to have zero foundation or little knowledge of SAP 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 your understanding .

For SAP UI5 developers who have already 有一定基础 , you can skip the more basic chapters in the previous part through the table of contents of this article, and directly select chapters that are related to your own work projects, or contain some knowledge points that you have not yet mastered. Targeted learning.

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. Although I am usually very busy with development work, I promise to check the comments you leave me on a regular basis. For the technical questions involved, I will definitely 抽时间做出解答 .

The 54th step of this tutorial SAP UI5 application development tutorial part 54 - how to configure the local SAP UI5 application to the local Fiori Launchpad shares how to configure the locally developed SAP UI5 application to the local running Fiori Launchpad, the effect is as follows:

The so-called 本地 Launchpad is to distinguish it from the ABAP server and the Fiori Launchpad on the SAP Business Technology Platform (BTP) server.

After clicking on the App 1 tile, you can jump to the local SAP UI5 application configured by the tile, and the url in the address bar also changes accordingly.

At that time, in step 54, we introduced that in order to let the SAP UI5 framework know that after the tile in the Launchpad is clicked, it should go to which SAP UI5 application 跳转 . The field value (legend 1) points to the project folder name (legend 2) where the SAP UI5 application to be opened is located, and the two must be consistent.

After learning step 54, a friend reported that this friend used the path containing the complete namespace prefix in line 16 additionalInformation to specify the SAP UI5 application to be opened, that is sap.ui5.walkthrough.app1

At this time, even if the url field in line 18 is maintained as "" , the jump after clicking on the tile can work normally.

Actually, there are two different ways to specify the target SAP UI5 application information to be opened after the tile is clicked. Why do you say that? Below we will analyze in detail the working principles of these two different methods.

Remember the knowledge points mentioned in this tutorial SAP UI5 Application Development Tutorial No. 9 - Creating the First Component ? When a SAP UI5 application is configured on Fiori Launchpad, the entry of the application is no longer index.html , but Component.js .

Every SAP UI5 application that is expected to be accessed through Fiori Launchpad must have such a Component.js file. This file name is case-sensitive and cannot be changed to any other name.

The two methods introduced in this article are actually different ways to tell the SAP UI5 framework where to find the application to be opened Component.js that's all.

The following is a detailed description of the two methods.

Summarize

This article describes in depth the two methods of configuring SAP UI5 information in SAP Fiori Launchpad so that it can be opened as a tile in Fiori Launchpad after clicking. Method 1 needs to correctly maintain the path information of the SAP UI5 application to be opened in the project in the url field, and method 2 needs to maintain the complete SAP UI5 Component name including the namespace in the additionalInformation field.
This article shows an error message-driven exploration method, which is to deliberately maintain an illegal value, find the exact location where the illegal value is verified through the error message thrown by the SAP UI5 framework, and then learn the SAP UI5 related processing logic .

In-depth explanation of the technical implementation of configuring the local SAP UI5 application to the local Fiori Launchpad

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

About the Author

Tutorial Directory

illustrate

Summarize

注销

引用和评论

什么是 Up front design

网页设计的垂直居中

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

JS校验身份证号