第 295 页 / 共 465 页
7.3 Summary
Similar to the QUnit unit tests, the opaTests.qunit.html file is a QUnit runner and exe-
cutes all integration tests defined in the AllJourneys.js module file (Figure 7.31). Addi-
tionally, it displays the result in a readable format as a website.
Figure 7.31 Running the OPA5 Test Using the opaTests.qunit.html File as a QUnit Test
Runner
7.3 Summary
In this chapter, you got to know the most common smart controls: smart field, smart
link, smart form, smart table, and smart filter bar. You’ve seen some of the annota-
tions they analyze to adapt their appearance and how they significantly reduce the
amount of required frontend SAPUI5 XML and JavaScript code by still providing a lot
of flexibility in terms of the overall layout and design of the application. We demon-
strated all smart controls described in this chapter by developing a little freestyle
SAPUI5 application for creating and displaying purchase documents. Additionally,
you learned how to set up a SAPUI5 freestyle project in SAP Web IDE full-stack, config-
ure data sources and models, set up navigation between views, and create a UI inte-
gration test, including a mock server for the whole create and display scenario using
the OPA5 framework included with the SAPUI5 SDK. In the next chapter you will learn
how to deploy all applications developed so far to the SAP Fiori Launchpad.
295
第 296 页 / 共 465 页
第 297 页 / 共 465 页
Chapter 8
Deploying Applications to the
SAP Fiori Launchpad
In this chapter, we will cover the topics involving different ways of
deploying applications to the frontend server and the respective
SAPFiori launchpad admin configurations for the application tiles.
You’ll learn how to deploy SAP Fiori applications into the ABAP frontend server. We’ll
consider two options for deploying the applications to the frontend server, one
directly from the SAP Web IDE and the other via a SAP transaction in the frontend
server. After that, you’ll learn how to create catalogs using the SAP Fiori launchpad
admin page and how to configure the tiles for the applications. We’ll also cover how
to create groups in the launchpad admin so that the apps will come as a custom
group in the end user’s home page.
8.1 Uploading a User Interface to the ABAP Frontend Server
In previous chapters, we’ve created four types of SAP Fiori applications: list report
page (LSP), overview page (OVP), analytical list page (ALP), and a freestyle application.
Now it’s time to see the apps in action in the SAP Fiori launchpad. You also need to
enable cross-application navigation from one app to the other.
When it comes to deploying SAP Fiori applications to the ABAP frontend server, you
can do it in two different ways:
(cid:2) Deploy applications from SAP Web IDE
(cid:2) Upload the applications directly on the frontend server
8.1.1 Deploying Applications from SAP Web IDE
SAP Web IDE gives you the option to deploy applications directly from the project
workspace. To deploy the application, right-click on the project, and choose Deploy (cid:2)
Deploy to SAPUI5 ABAP Repository, as shown in Figure 8.1.
297
第 298 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
Figure 8.1 Deploying Applications from the SAP Web IDE Workspace
In the next popup window, you must select the relevant Frontend System (see Figure
8.2). In addition, make sure the Deploy a new application radio button is selected.
Then click on the Next button.
Figure 8.2 Deployment Options for SAPUI5 Applications
298
第 299 页 / 共 465 页
8.1 Uploading a User Interface to the ABAP Frontend Server
In the next window, as shown in Figure 8.3, you need to enter the business server
page (BSP) application Name, Description, and Package name, as shown in Table 8.1.
Figure 8.3 Deploying a New Application
Field Parameter
Name “ZPURCH_DOC_LRP”
Description “Purchase Document List Report Page”
Package “<Your Package Name>”
Table 8.1 Values for Deploying a New Application
Note
In a productive environment, you’ll also get an additional option for specifying the
Transport Request Number when you click on the Next button from this window.
Because we’re saving it into a local package, we won’t get the tab for Select a Trans-
port Request.
In the next window, click on the Finish button (see Figure 8.4), and the SAP Web IDE
starts the upload process for your application. SAP Web IDE is basically like the sec-
ond method for deploying applications directly on the ABAP frontend server. The
advantage of the first method is that you’re presented with a wizard instead of the
manual steps required for the second method.
299
| Field | Parameter |
|---|---|
| Name | “ZPURCH_DOC_LRP” |
| Description | “Purchase Document List Report Page” |
| Package | “<Your Package Name>” |
| Note In a productive environment, you’ll also get an additional option for specifying the Transport Request Number when you click on the Next button from this window. Because we’re saving it into a local package, we won’t get the tab for Select a Trans- |
| port Request. |
第 300 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
Figure 8.4 Confirming Deployment of the Application to the SAPUI5 ABAP Repository
8.1.2 Uploading Applications Directly into the Frontend Server
The SAP Web IDE has the option to export the source code of the projects into a ZIP
file. To export the project as a ZIP file, right-click on the project name and click on
Export (see Figure 8.5). Unzip the file into a folder; we’ll use this unzipped file later in
the chapter to upload the projects back directly into the ABAP frontend server.
Figure 8.5 Exporting Applications from SAP Web IDE into ZIP Files
Now log in to the ABAP frontend server via SAP Logon, execute Transaction SE38, and
run the program named /UI5/UI5_REPOSITORY_LOAD (see Figure 8.6).
300
第 301 页 / 共 465 页
8.1 Uploading a User Interface to the ABAP Frontend Server
Figure 8.6 ABAP Repository Upload Program from the ABAP Frontend Server
Assign a name for your application in the input field. Make sure that the Upload radio
button is selected, and press (F8) (see Figure 8.7).
Figure 8.7 Assigning a Name for the BSP Application
Select the folder named webapp from the folder structure of the unzipped applica-
tion source code, and click on the OK button (see Figure 8.8).
301
第 302 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
Figure 8.8 Selecting the webapp Folder of the Source Code
Now the program will list the number of files it will be uploading to the server. Click
on the green highlighted Click here to upload link, as shown in Figure 8.9.
Figure 8.9 Preview Window for Uploading Application Files
A popup will appear in which you need to specify a Description, Package name, and
Transport Request number. Leave the External Codepage field blank, as shown in Fig-
ure 8.10.
302
第 303 页 / 共 465 页
8.1 Uploading a User Interface to the ABAP Frontend Server
Figure 8.10 Specifying the BSP Application Properties
After the upload is complete, execute Transaction SE80 for Object Navigator, and
open the package that you entered during the upload step. Navigate to BSP Library (cid:2)
BSP Applications (cid:2) ZPURCH_DOC_OVP (or the name of the BSP application you’ve
mentioned during the upload) to see the files, as shown in Figure 8.11. Alternatively,
you can select BSP Application and give the app name directly on the Repository
Browser of the Object Navigator page. Note down the path mentioned in the Compo-
nent.js file within sap.ovp.app.Component.extend as shown in Listing 8.1. In our exam-
ple, the value is fiori.monitor.purchase.documents.PurchaseDocumentsOVP, which is
the path we’ll be using while configuring the application tile so that the SAP Fiori
launchpad can locate the Component.js file of the respective app to launch the appli-
cation. We’ll use this path later in the chapter in Section 8.4.
sap.ovp.app.Component.extend("fiori.monitor.purchase.documents.PurchaseDocumen
tsOVP.Component", {
metadata: {
manifest: "json"
}
Listing 8.1 Path for the Component File of the Application
303
第 304 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
Figure 8.11 BSP Applications Uploaded to the ABAP Frontend Server
Note
When you upload your application source code into the ABAP frontend repository,
the application is converted into a BSP application. Make sure that you select the
webapp folder from the unzipped source code of your application instead of the root
folder to which you unzipped the files. This is important because if you select the root
folder instead of the webapp folder, then the launchpad won’t be able to navigate to
the component.js file of your application because the webapp folder is now not directly
under the BSP application’s folder structure. Otherwise, you’ll have to update the refer-
ence path of the component.js file in the tile configuration of your app accordingly. If
you also want the app to load independently without the launchpad, then you’ll have
to add an index.html file in the folder containing a code to redirect to the compo-
nent.js file so that the browser can start the app from the index.html file.
8.2 SAP Fiori Launchpad Admin Page
This page is different from the regular SAP Fiori launchpad home page. The launch-
pad admin page is where you configure all the tiles that will show up in the SAP Fiori
launchpad home page. Using this admin page, you can control which tiles are dis-
played on the home page and who will have access to which tile.
The launchpad admin page URL is in the following format:
https://<host>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?scope=CONF&
sap-client=<systemClient>&sap-language=<languageKey>
304
| Note When you upload your application source code into the ABAP frontend repository, the application is converted into a BSP application. Make sure that you select the webapp folder from the unzipped source code of your application instead of the root folder to which you unzipped the files. This is important because if you select the root folder instead of the webapp folder, then the launchpad won’t be able to navigate to the component.js file of your application because the webapp folder is now not directly under the BSP application’s folder structure. Otherwise, you’ll have to update the refer- ence path of the component.js file in the tile configuration of your app accordingly. If you also want the app to load independently without the launchpad, then you’ll have to add an index.html file in the folder containing a code to redirect to the compo- |
| nent.js file so that the browser can start the app from the index.html file. |
第 305 页 / 共 465 页
8.2 SAP Fiori Launchpad Admin Page
To have access to this admin page, the user ID to log in to this page should have the
role assigned as shown in Table 8.2.
Role Description
SAP_UI2_ADMIN Composite role for launchpad administrator
SAP_UI2_USER_700 Role for accessing the SAP Fiori launchpad home page
Table 8.2 Roles for SAP Fiori Launchpad
Note
You can use the following URL for the detailed steps on how to assign these roles to
the user: http://bit.ly/2O2fFQz
In the SAP Fiori launchpad admin page, there are mainly three concepts to under-
stand before we start creating the applications tiles: catalogs, groups, and roles.
8.2.1 Catalogs
A catalog is a collection of apps that can be used to assign apps to a specific role. When
you create a catalog in the SAP Fiori launchpad admin page, you must specify which
apps belong to that catalog. This will enable users with roles in this catalog to browse
through the applications available within the catalog and choose to add those appli-
cations to their home page.
Catalogs are divided into two categories:
(cid:2) Technical catalog (TC)
TCs are collections of SAP Fiori applications based on specific roles or areas. TCs are
like the master copy for a set of SAP Fiori applications. For example, a TC can be
created for a specific area such as production and planning, and it will hold all the
SAP Fiori apps related to the that area.
(cid:2) Business catalog (BC)
This catalog is like a child catalog inheriting from one or more TCs (see Figure 8.12).
For example, you need to create a catalog that needs few apps from the production
and planning area and then a few apps from the demand-driven replenishment
area. You can open the TC and specify which apps need to be passed on to a BC.
Then these selected apps and their respective tile configurations will be automati-
cally copied from the TC to the BC. This also speeds up the process because you
305
| Role | Description |
|---|---|
| SAP_UI2_ADMIN | Composite role for launchpad administrator |
| SAP_UI2_USER_700 | Role for accessing the SAP Fiori launchpad home page |
| Note You can use the following URL for the detailed steps on how to assign these roles to |
| the user: http://bit.ly/2O2fFQz |
第 306 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
only need to create one TC with all the app tile configurations for a certain cate-
gory, and after that, you can just create references of these app tiles from the TC to
any number of BCs.
SAP
SAP SAP SAP SAP Fiori App SAP
Fiori App Fiori App Fiori App Fiori App Schedule Fiori App
Monitor Material Monitor Internal Schedule Manage Buffer Buffer Level Replenishment
Coverage Requirements MRP Runs Levels Calculations Planning
Technical Catalog for Technical Catalog for
Production Planning Demand-Driven MRP
(SAP_TC_PP_PLANNER) (SAP_TC_DDMRP_PLANNER)
Business Catalog Business Catalog
Business Catalog XXXXX Business Catalog XXXXX
MRP Controller DDR Planning
(SAP_BC_XX_XXXX) (SAP_BC_XX_XXXX)
(SAP_BC_PP_CONTROLLER) (SAP_BC_DDMRP_PLANNER)
Figure 8.12 SAP Fiori Launchpad Catalog Concepts
8.2.2 Groups
Groups acts like a set of default apps that should be visible to the user in the SAP Fiori
home page. When you create a group and assign the SAP Fiori applications to that
group, the administrator can assign this group to a user, and then the user will get to
see those groups of apps by default in their home page. With this approach, the user
doesn’t need to edit his home page and manually add the app tiles to the home page.
8.2.3 Roles
Roles are created in the frontend server rather than on the SAP Fiori admin page. Roles
help the administrator provide or restrict access to SAP Fiori applications based on the
user’s role. For example, if you’re in production planning and you don’t need access to
SAP Fiori apps of other areas, the administrator can restrict your access to those other
apps because you don’t have the necessary roles assigned to you to access them.
306
第 307 页 / 共 465 页
8.3 Creating the Technical Catalog and Business Catalog
The flow of how catalogs, groups, and roles fit together is shown here:
1. Create catalogs for apps based on area/role.
2. Create default groups for the apps from a catalog or a group of catalogs.
3. Assign the groups to a role in the frontend server.
4. Map the users to their relevant roles.
8.3 Creating the Technical Catalog and Business Catalog
As explained earlier, BCs are different sets of SAP Fiori applications grouped together
based on roles, business areas, and so on. To configure the tiles for the SAP Fiori apps
created in the previous chapters, we need to create a catalog to configure the app tiles
and assign them to the end users.
To create a catalog, click on the + icon 1 toward the bottom-left side of the SAP Fiori
admin page. Select the Standard radio button, and enter the Title 2 and ID 3 values
as shown in Figure 8.13. The naming style shown in Table 8.3 for the catalogs isn’t
mandatory, but it’s better to include “TC” within the name so that it’s easier to differ-
entiate between technical catalogs and business catalogs.
Figure 8.13 Creating a Technical Catalog
307
第 308 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
Field Parameter
Title “Purchase Documents Technical Catalog”
ID “ZSAP_TC_MM_PUR_DOCUMENTS”
Table 8.3 Values for Technical Catalog Creation
Before we start configuring tiles in the TC, let’s create the BC as well. To create the BC,
the steps are basically identical to TC. Click on the + sign and enter the values shown
in Figure 8.14 and Table 8.4. Here the naming style includes “BC” within the name to
differentiate the catalog as a BC. We won’t create or add any tiles manually into the BC
because it will be inheriting the tiles from a TC. We’ll see how a TC creates a reference
of its tiles to the BC later in this chapter.
Figure 8.14 Creating a BC
Field Parameter
Title “Purchase Documents Business Catalog”
ID “ZSAP_BC_MM_PUR_DOCUMENTS”
Table 8.4 Values for Creating a BC
308
| Field | Parameter |
|---|---|
| Title | “Purchase Documents Technical Catalog” |
| ID | “ZSAP_TC_MM_PUR_DOCUMENTS” |
| Field | Parameter |
|---|---|
| Title | “Purchase Documents Business Catalog” |
| ID | “ZSAP_BC_MM_PUR_DOCUMENTS” |
第 309 页 / 共 465 页
8.4 Creating the Application Tiles
8.4 Creating the Application Tiles
Now that we’ve created a TC and BC, let’s start configuring the tiles. Open the TC (Pur-
chase Documents Technical Catalog) that we created earlier, and you’ll see a + icon on
the right side of the pane under Tiles, as shown in Figure 8.15.
Figure 8.15 Adding Tiles for the Technical Catalog
In the next window, you’ll be presented with three app tile templates to select from:
(cid:2) App Launcher – Dynamic
This app type is used when the tile is supposed to show a dynamic counter, such as
pending/number of items, that is relevant for the use case of the application.
(cid:2) News Tile
This app type is used for tiles that show multiple pieces of information via sliding
information from different data sources. For example, if the company wants a tile
for every user in SAP Fiori launchpad to show internal company announcements
or news, news tiles could be created with dynamic contents linked to article feeds.
A news tile can have a maximum of 10 feeds per tile. You can also configure the
refresh intervals for each article feed and the cycle intervals between feeds.
(cid:2) App Launcher – Static
This app type is like the dynamic app launcher, but it doesn’t have a dynamic
counter on the tile. For the example, we’ll be using the static app launcher.
To create the first tile for the Purchase Documents List Report application, click on
the App Launcher – Static tile from the tile templates, as shown in Figure 8.16.
309
第 310 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
Figure 8.16 Selecting the Application Tile Template
In this window (Figure 8.17), configure the properties of the tile by entering the values
as shown in Table 8.5. You can select an icon from the Icon input field that would best
suit the application you’re building. On the right side of the image, you can see the
Semantic Object and Action fields. For this app, we chose PurchasingDocument as the
semantic object and manage as the action.
Figure 8.17 Purchase Documents LRP Static Tile Configurations
Every app that you configure in the catalogs has two main parts: tiles and target map-
pings. In the tile configuration, we specify the properties such as the name, descrip-
tion, icons, semantic objects, and actions. In the target mapping, you configure the
properties specific to the application type you’re using, such as semantic object and
action.
310
第 311 页 / 共 465 页
8.4 Creating the Application Tiles
In both tile and target mapping, the common properties are Semantic Object and
Action. This is how a tile is linked to its corresponding target mapping. A semantic
object represents the application area, and the action represents the type of usage
with the app (display, manage, monitor, analyze KPI details, etc.).
Field Parameter
Title “Purchase Documents Manage”
Subtitle “Manage Purchase Documents”
Icon “sap-icon://Fiori2/F0021”
Semantic Object “PurchasingDocument”
Action “manage”
Table 8.5 Values for Purchase Documents List Report Page Static Tile
After the tile is configured for the Purchase Documents list report page (LRP) tile, you
can create a target mapping to link with the application tile. Click on the Create Tar-
get Mapping button on the lower-left side of the page, as shown in Figure 8.18.
Figure 8.18 Creating a Target Mapping for the Purchase Documents LRP
311
| Field | Parameter |
|---|---|
| Title | “Purchase Documents Manage” |
| Subtitle | “Manage Purchase Documents” |
| Icon | “sap-icon://Fiori2/F0021” |
| Semantic Object | “PurchasingDocument” |
| Action | “manage” |
第 312 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
In the target mapping configuration, you link the configuration with the tile by spec-
ifying the same Semantic Object and Action as used for the Purchase Documents LRP.
In the Application Type field, select SAPUI5 Fiori App. In the older versions of the SAP
Fiori launchpad admin, you had to create custom launchpad configurations in the
frontend server via Transaction LPD_CUST, select the application type as Fiori App
using LPD_CUST, and enter the properties you created in the frontend server using
Transaction LPD_CUST. This is no longer a recommended method.
In the URL field, provide the path of the BSP application service, which is registered in
the server. You can check the service path of your BSP application in the frontend
server via Transaction SICF. The default path for all the BSP applications deployed
from the SAP Web IDE or uploaded directly in the frontend server via the /UI5/UI5_
REPOSITORY_LOAD is /sap/bc/ui5_ui5/sap/<name_of_your_bsp_app>.
For the ID field, provide the path for the Component.js file of the application (see Fig-
ure 8.19 and Table 8.6). The path can be found within the Component.js file of the
application folder (refer to Figure 8.11).
Figure 8.19 Purchase Documents LRP Target Mapping Configurations
Field Parameter
Semantic Object “PurchasingDocuments”
Action “manage”
Application Type SAPUI5 Fiori App
Title “Purchasing Documents Manage”
Table 8.6 Values for Purchase Documents LRP Target Mapping
312
| Field | Parameter |
|---|---|
| Semantic Object | “PurchasingDocuments” |
| Action | “manage” |
| Application Type | SAPUI5 Fiori App |
| Title | “Purchasing Documents Manage” |
第 313 页 / 共 465 页
8.4 Creating the Application Tiles
Field Parameter
URL “/sap/bc/ui5_ui5/sap/zpurch_doc_lrp”
ID “fiori.manage.purchase.documents.purchasedocumentslrp”
Table 8.6 Values for Purchase Documents LRP Target Mapping (Cont.)
Now, you can configure the tile for the Purchase Documents overview page (OVP)
application by entering the values as shown in the Table 8.7. Here the main difference
is with the Action linked with the Semantic Object. The Semantic Object is the same
because the app is still about purchase documents, but the Action will be set to mon-
itor (see Figure 8.20) because the purpose of the OVP is to monitor the purchase doc-
uments.
Field Parameter
Title “Purchase Documents Overview”
Subtitle “Monitor Purchase Documents”
Icon “sap-icon://Fiori2/F0102”
Semantic Object “PurchasingDocument”
Action “monitor”
Table 8.7 Values for Purchase Documents OVP Static Tile
Figure 8.20 Purchase Documents OVP Target Static Tile Configurations
313
| Field | Parameter |
|---|---|
| URL | “/sap/bc/ui5_ui5/sap/zpurch_doc_lrp” |
| ID | “fiori.manage.purchase.documents.purchasedocumentslrp” |
| Field | Parameter |
|---|---|
| Title | “Purchase Documents Overview” |
| Subtitle | “Monitor Purchase Documents” |
| Icon | “sap-icon://Fiori2/F0102” |
| Semantic Object | “PurchasingDocument” |
| Action | “monitor” |
第 314 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
The Purchase Documents OVP app’s target mapping is also not that much different
from the previous app. In the target mapping window, enter the values as shown in
Table 8.8. Here the main difference is with the URL and the ID (see Figure 8.21). The
URL has the BSP application name of the Purchase Documents OVP, and the ID is
taken from the Component.js file of the respective BSP application.
Field Parameter
Semantic Object “PurchasingDocuments”
Action “monitor”
Application Type SAPUI5 Fiori App
Title “Purchasing Documents Manage”
URL “/sap/bc/ui5_ui5/sap/zpurch_doc_ovp”
ID “fiori.monitor.purchase.documents.PurchaseDocumentsOVP”
Table 8.8 Values for Purchase Documents OVP Target Mapping
Figure 8.21 Purchase Documents OVP Target Mapping Configurations
For the Purchase Documents analytical list page (ALP) app’s static tile configuration,
enter the values as shown in Table 8.9. Here the Semantic Object stays the same, but
the Action is set to analyzeKPIDetails, as shown in Figure 8.22.
314
| Field | Parameter |
|---|---|
| Semantic Object | “PurchasingDocuments” |
| Action | “monitor” |
| Application Type | SAPUI5 Fiori App |
| Title | “Purchasing Documents Manage” |
| URL | “/sap/bc/ui5_ui5/sap/zpurch_doc_ovp” |
| ID | “fiori.monitor.purchase.documents.PurchaseDocumentsOVP” |
第 315 页 / 共 465 页
8.4 Creating the Application Tiles
Field Parameter
Title “Purchase Documents Monitor”
Subtitle “Analyze Purchase Documents”
Icon “sap-icon://Fiori2/F0101”
Semantic Object “PurchasingDocument”
Action “analyzeKPIDetails”
Table 8.9 Values for Purchase Documents ALP Static Tile
Figure 8.22 Purchase Documents ALP Static Tile Configuration
Note
If you don’t find a relevant Semantic Object name from the list of standard SAP-
delivered semantic objects for your app, you can create your own semantic object
using Transaction /UI2/SEMOBJ.
You can also do this via Customizing by following these steps:
1. Choose the SAP Reference IMG.
2. Go to SAP NetWeaver (cid:2) UI Technologies (cid:2) SAP Fiori (cid:2) Configuring Launchpad
Content (cid:2) Adding Apps to SAP Fiori Launchpad (cid:2) Define Semantic Objects for
Navigation.
315
| Field | Parameter |
|---|---|
| Title | “Purchase Documents Monitor” |
| Subtitle | “Analyze Purchase Documents” |
| Icon | “sap-icon://Fiori2/F0101” |
| Semantic Object | “PurchasingDocument” |
| Action | “analyzeKPIDetails” |
| Note If you don’t find a relevant Semantic Object name from the list of standard SAP- delivered semantic objects for your app, you can create your own semantic object using Transaction /UI2/SEMOBJ. You can also do this via Customizing by following these steps: 1. Choose the SAP Reference IMG. 2. Go to SAP NetWeaver (cid:2) UI Technologies (cid:2) SAP Fiori (cid:2) Configuring Launchpad Content (cid:2) Adding Apps to SAP Fiori Launchpad (cid:2) Define Semantic Objects for |
| Navigation. |
第 316 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
In the target mapping configurations for the Purchase Documents ALP, enter the val-
ues as shown in Table 8.10. Here you can see that the URL and ID field values are
changed according to the BSP application of the app (see Figure 8.23).
Field Parameter
Semantic Object “PurchasingDocuments”
Action “analyzeKPIDetails”
Application Type SAPUI5 Fiori App
Title “Purchase Documents ALP”
URL “/sap/bc/ui5_ui5/sap/zpurch_doc_alp”
ID “fiori.display.purchase.documents.PurchaseDocumentsALP”
Table 8.10 Values for Purchase Documents ALP Target Mapping
Figure 8.23 Purchase Documents ALP Target Mapping Configurations
For the create Purchase Documents freestyle app’s static tile configuration, enter the
values as shown in Table 8.11. For this application, the Action is set to Create (see
Figure 8.24) because the application is used for creating purchase documents.
Fields Parameter
Title “Create Purchase Documents”
Table 8.11 Values for Create Purchase Documents Freestyle Static Tile
316
| Field | Parameter |
|---|---|
| Semantic Object | “PurchasingDocuments” |
| Action | “analyzeKPIDetails” |
| Application Type | SAPUI5 Fiori App |
| Title | “Purchase Documents ALP” |
| URL | “/sap/bc/ui5_ui5/sap/zpurch_doc_alp” |
| ID | “fiori.display.purchase.documents.PurchaseDocumentsALP” |
| Fields | Parameter |
|---|---|
| Title | “Create Purchase Documents” |
第 317 页 / 共 465 页
8.4 Creating the Application Tiles
Fields Parameter
Subtitle “Create Purchase Documents”
Icon “sap-icon://Fiori2/FBL5N”
Semantic Object “PurchasingDocument”
Action “Create”
Table 8.11 Values for Create Purchase Documents Freestyle Static Tile (Cont.)
Figure 8.24 Create Purchase Documents Freestyle Static Tile Configuration
In the target mapping configurations for the Create Purchase Documents freestyle
app, enter the following values as shown in Table 8.12. The URL and ID for the freestyle
app needs to be updated accordingly (see Figure 8.25).
Figure 8.25 Create Purchase Documents Freestyle Target Mapping Configuration
317
| Fields | Parameter |
|---|---|
| Subtitle | “Create Purchase Documents” |
| Icon | “sap-icon://Fiori2/FBL5N” |
| Semantic Object | “PurchasingDocument” |
| Action | “Create” |
第 318 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
Field Parameter
Semantic Object “PurchasingDocuments”
Action “create”
Application Type SAPUI5 Fiori App
Title “Create Purchase Document”
URL “/sap/bc/ui5_ui5/sap/zpurch_doc_fsl”
ID “fiori.create.pruchase.documents.PurchaseDocumentsFreestyle”
Table 8.12 Values for Create Purchase Documents Freestyle Target Mapping
Now that you’re done creating the tiles for TC, you can map the TC’s tiles and target
mappings to the BC. Click on the Tiles icon 1 above the table as shown in Figure 8.26.
Then select the tile for Purchase Documents Manage, and click on the Create Refer-
ence button 2 at the bottom.
Figure 8.26 Creating a Tile Reference from a TC to a BC for the Purchase Documents LRP
318
| Field | Parameter |
|---|---|
| Semantic Object | “PurchasingDocuments” |
| Action | “create” |
| Application Type | SAPUI5 Fiori App |
| Title | “Create Purchase Document” |
| URL | “/sap/bc/ui5_ui5/sap/zpurch_doc_fsl” |
| ID | “fiori.create.pruchase.documents.PurchaseDocumentsFreestyle” |
第 319 页 / 共 465 页
8.4 Creating the Application Tiles
From the popup shown in Figure 8.27, select the BC named Purchase Documents Busi-
ness Catalog, which we created earlier.
Figure 8.27 Selecting the BC for Creating a Tile Reference from the TC
Now let’s create the reference for the target mapping of the Purchase Documents LRP
app from the TC to the BC. Click on the Target Mappings tab 1 above the table, as
shown in Figure 8.28, and then click on the Create Reference button 2.
Figure 8.28 Creating the Target Mapping Reference from the Technical Catalog to the BC
for the Purchase Documents LRP
319
第 320 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
From the popup window, select the BC named Purchase Documents Business Catalog
(see Figure 8.29). Now repeat the steps for the tile and target mapping for the other
two apps, and assign them to the same BC. After this, if you open and check the BC in
the launchpad admin page, you’ll see all the tiles, and the respective target mappings
are now automatically created in the catalog. The advantage of this approach is that
if you need to create a separate catalog in the future with only a few apps from the TC,
then you can create a new empty BC and follow the same steps as you did for the apps
previously but just select the apps you need. All the configurations will be done auto-
matically for you.
Figure 8.29 Selecting the BC for Creating the Target Mapping Reference from the TC
8.5 Creating Groups for Application Tiles
Now you need to create a group for the BC. As explained earlier in Figure 8.12, groups
are used to help the end user access apps without requiring the users to manually add
the tiles to their home page. To create a group, click on the Groups tab 1 on the top-
left side of the pane, and then click on the + icon 2 on the bottom-left side of the
pane. In the popup window (see Figure 8.30), enter the values as shown in Table 8.13,
and click on the Save button 3.
320
第 321 页 / 共 465 页
8.5 Creating Groups for Application Tiles
Figure 8.30 Creating a New Group for the Tiles
Field Parameter
Title “Purchase Documents”
ID “ZSAP_BCG_MM_PUR_DOCUMENTS”
Table 8.13 Values for Group Creation in the SAP Fiori Admin Page
Now, click on the + icon on the right side to add the tiles from the BC, as shown in Fig-
ure 8.31. Because we already created a reference from the TC to the BC, the tiles will be
visible inside the BC already.
Figure 8.31 Adding Tiles into the Group for the Purchase Documents BC
321
| Field | Parameter |
|---|---|
| Title | “Purchase Documents” |
| ID | “ZSAP_BCG_MM_PUR_DOCUMENTS” |
第 322 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
In the next window, enter the BC name in the search window, and select all four apps
from the BC list, as shown in Figure 8.32. If you want to remove one of the apps from
the group in the future, you can simply open this group and uncheck the apps you
don’t need.
Figure 8.32 Assigning Tiles from the BC into the Group
8.6 Creating and Assigning a Transaction PFCG Role to Users
Although all the catalogs and groups are now created, they still don’t have any link to
the users who are going to use the apps. To link the catalogs and groups with the
users, you first create a role. To create a role, execute Transaction PFCG, enter a name
for the Role (for our example, the role name is “ZPURCHDOCSROLE”), and then click
on the Single Role button, as shown in the Figure 8.33.
Figure 8.33 Creating a Role for Assigning Catalogs and Groups
322
第 323 页 / 共 465 页
8.6 Creating and Assigning a Transaction PFCG Role to Users
Note
The Transaction PFCG roles have to be created on the SAP Gateway hub system.
Now, click on the Transaction button, and select SAP Fiori Tile Catalog (see Figure 8.34).
Figure 8.34 Adding the SAP Fiori Tile Catalog to the Role
Enter the BC name “ZSAP_BC_MM_PUR_DOCUMENTS” in the Catalog ID field, as
shown in Figure 8.35.
Figure 8.35 Assigning the BC to the Role
323
| Note |
| The Transaction PFCG roles have to be created on the SAP Gateway hub system. |
第 324 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
Next you need to add the group to the role. Click on the Transaction button, and
select SAP Fiori Tile Group (Figure 8.36).
Figure 8.36 Adding the SAP Fiori Tile Group to the Role
Enter “ZSAP_BCG_MM_PUR_DOCUMENTS” in the Group ID field. Now the role is
linked to both the BC and the group (see Figure 8.37).
Figure 8.37 Assigning the Group to the Role
324
第 325 页 / 共 465 页
8.6 Creating and Assigning a Transaction PFCG Role to Users
Still we haven’t linked the role to the user of the SAP Fiori launchpad. You can do this
either by clicking on the User tab in Transaction PFCG, as shown in Figure 8.38, or you
can execute the Transaction SU01 and assign the role to your user in that transaction.
Figure 8.38 Mapping the Role with Users
After this, log in to the SAP Fiori home page with your user. The URL for the SAP Fiori
home page is as follows:
https://<host>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-lan-
guage=<languageKey>&sap-client=<systemclient>#Shell-home
After you log in to the SAP Fiori launchpad, you can see the group as one of the tabs
in the launchpad (see Figure 8.39).
325
第 326 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
Figure 8.39 Accessing the Tiles via the Tile Group in the SAP Fiori Launchpad Home Page
Click on the Purchase Documents tab to see the apps listed in the home page (see Fig-
ure 8.40).
Figure 8.40 Purchase Documents Application Tiles in the Home Page
In addition to this, if users want to add or remove these tiles manually, they can click
on the left side of the SAP Fiori launchpad to show the settings pane, and then click
on the Edit Home Page icon, as shown in Figure 8.41.
326
第 327 页 / 共 465 页
8.6 Creating and Assigning a Transaction PFCG Role to Users
Figure 8.41 Editing the SAP Fiori Launchpad Home Page
Now that the home page is in editable mode, the + icon can be used to add or remove
the tiles from the home page, as shown in Figure 8.42. The apps are added to the My
Home tab, which acts as a placeholder for the user’s favorite list of apps.
Figure 8.42 Manually Adding the Tiles into the Home Page
Here, you can see the BC listed on the left pane of the launchpad (Figure 8.43). Click
and add the relevant app tiles.
327
第 328 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
Figure 8.43 Add or Remove Tiles from the Launchpad from the BC
Now you can see that the Purchase Documents apps are added to the My Home tab,
as shown in Figure 8.44.
Figure 8.44 My Home Tab with the Purchase Documents App Tiles
328
第 329 页 / 共 465 页
8.7 Setting Up Intent-Based Cross-Application Navigation from OVP to LRP
8.7 Setting Up Intent-Based Cross-Application Navigation from
OVP to LRP
We’ve now deployed all the apps into the SAP Fiori launchpad, but the apps aren’t
interconnected. This is especially true for the Purchase Documents OVP app, which
we primarily use for monitoring pending purchase documents for approvals. So, you
need to set up a navigation from the Pending for Approvals OVP card to the Purchase
Documents LRP. This will help the user directly navigate to the purchase documents
and take appropriate actions without the need to open the Purchase Documents LRP
application separately. To do this, you need to slightly modify the Core Data Services
(CDS) views. In the CDS view for the Purchase Documents Pending Approval list
card (Z_C_PurchaseDocAprovalStat), add an annotation @Consumption.semanticObject:
'PurchasingDocument', as shown in Listing 8.2, for the field PurchaseDocument.
…
define view Z_C_PurchaseDocsforApprovalOVP
as select from Z_I_PurchaseDocAprovalStat
{
@ObjectModel.foreignKey.association: '_PurchaseDocument'
@Consumption.semanticObject: 'PurchasingDocument'
key PurchaseDocument,
…
Listing 8.2 Annotation for Navigation Based on the Semantic Object
In addition, you need to add another annotation @UI.lineItem: [{type: #FOR_INTENT_
BASED_NAVIGATION, semanticObjectAction: 'manage'}] in the metadata annotation of
the CDS view, as shown in Listing 8.3.
The annotation type: #FOR_INTENT_BASED_NAVIGATION will cause the SAP Fiori elements
application to recognize that the field PurchaseDocument now has an active navigation
property. The SAP Fiori elements application will also recognize which semantic
object and action is required to navigate based on the annotations provided to the
field. After the annotations are added, activate the CDS views, and then reload the
application in the SAP Fiori launchpad. Now you’ll be able to navigate from the list
card by clicking the pending document to the Purchase Documents LRP application
(see Figure 8.45).
329
第 330 页 / 共 465 页
8 Deploying Applications to the SAPFiori Launchpad
…
annotate view Z_C_PurchaseDocsforApprovalOVP with
{
@UI.lineItem: [{
position: 10,
importance: #HIGH,
label: 'Document',
type: #FOR_INTENT_BASED_NAVIGATION,
semanticObjectAction: 'manage'
}]
PurchaseDocument;
Listing 8.3 Setting semanticObjectAction and Navigation Type
Figure 8.45 Navigation in Action from the Purchase Documents OVP App to the Purchase
Documents LRP App
330
第 331 页 / 共 465 页
8.8 Summary
8.8 Summary
In this chapter, you learned how to deploy SAP Fiori applications from SAP Web IDE
into the ABAP frontend server. You also learned how to upload the applications
directly into the frontend server via SAP GUI. Then we covered the concepts of the
SAP Fiori launchpad admin page, including catalogs, groups, and roles. We discussed
how to create technical catalogs and business catalogs, how to create application tiles
in the SAP Fiori admin launchpad, and how to create groups for adding application
tiles from the BC. After that, we created Transaction PFCG roles in the ABAP frontend
server and assigned the groups and catalogs to the roles. Finally, we updated the CDS
views to enable navigation from the Purchase Documents OVP to the Purchase Doc-
uments LRP. In the next chapter, we’ll learn about version control in SAP Web IDE
using GitHub.
331
第 332 页 / 共 465 页
第 333 页 / 共 465 页
PART III
Operating Applications
第 334 页 / 共 465 页
第 335 页 / 共 465 页
Chapter 9
Version Control in SAP Web IDE Using Git
In this chapter, we will cover the basic concepts about using Git as a
source code management system and working with Git repositories
using SAP Web IDE
You’ll learn about Git as the version control system most commonly used for SAPUI5
development. We’ll cover the most important Git workflows and commands used for
SAPUI5 development in the SAP Web IDE. We will also learn how to link the Git Repos-
itory with the WebIDE projects and the concepts about working with different Git
Repository branches.
9.1 Git Introduction
A Source Code Management (SCM) system helps to keep track of all the changes to
your project files. For SAP Web IDE, it has an integrated support for Git, so we’ll use
Git for our projects. However, instead of setting up a standalone Git repository on a
system, we’ll create project repositories using GitHub (a popular service that extends
Git) and then link them to the respective projects in the SAP Web IDE.
In a project environment, using an SCM is useful when multiple developers are work-
ing on the same project. By adding SCM to your project, you can keep track of who
modified a file in the project, compare the source code with its earlier version, revert
the changes or even track who made that last commit that created a bug or issue in
the project, and so on. Because we’re going to use GIT as the SCM for the SAP Web IDE,
let’s start with some basics.
9.2 Git Basics
We’ll be using Git as a central repository that will contain the up-to-date version of a
project. All the developers working on this project will clone the central repository to
their SAP Web IDE and keep working on the copy of the code in a local repository. The
335