Building Block Configuration Guide
SAP Fiori apps rapid-deployment solution
Document Version: 1.0 – 2015-12-15
SAP Fiori App Extensibility
(MF8)
CUSTOMER
Typographic Conventions
Type Style
Description
Example
Words or characters quoted from the screen. These include field names, screen titles, pushbuttons
labels, menu names, menu paths, and menu options.
Textual cross-references to other documents.
2
Example
Emphasized words or expressions.
EXAMPLE
Technical names of system objects. These include report names, program names, transaction codes,
table names, and key concepts of a programming language when they are surrounded by body text,
for example, SELECT and INCLUDE.
Example
Output on the screen. This includes file and directory names and their paths, messages, names of
variables and parameters, source text, and names of installation, upgrade and database tools.
Example
Exact user entry. These are words or characters that you enter in the system exactly as they appear in
the documentation.
<Example>
Variable user entry. Angle brackets indicate that you replace these words and characters with
appropriate entries to make entries in the system.
EXAMPLE
Keys on the keyboard, for example, F 2 or E N T E R .
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Typographic Conventions
Document History
Version
Date
Change
1.0
2014-09-26
Initial version.
2.0
2014-11-28
Second Version: first scenario using SAP WebIDE Development environment
SAP Fiori App Extensibility
(MF8)
Document History
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
3
Table of Contents
1
Purpose ............................................................................................................................................................................... 6
2
2.1
2.2
2.3
2.4
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE ......................................................................... 7
Prerequisites................................................................................................................................................................7
Check and Activate HTTP Service in SAP Gateway System ......................................................................................... 8
Configure SAP Web IDE .............................................................................................................................................. 8
Extend Track Purchase Orders App ............................................................................................................................. 9
2.4.1
Create Extension Project for Track Purchase Orders App ............................................................................ 9
2.4.2
Hide Title Field ..........................................................................................................................................10
2.4.3
Hide Field on SAP Fiori Screen by Code Modifications ...............................................................................12
2.4.4
Change Label (Usage of Language File) .....................................................................................................14
2.4.5
Change Label (View Replacement) ............................................................................................................16
2.4.6
Add Field Showing Item Type Description .................................................................................................18
2.4.7
Replace View ............................................................................................................................................21
2.4.8
Test your Extension in SAP Web IDE......................................................................................................... 24
2.4.9
Deploy Extension Project ......................................................................................................................... 24
3
3.1
3.2
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE ........................................................................... 27
Prerequisites.............................................................................................................................................................. 27
Download the SAP-Delivered Standard Fiori Application from the ABAP System ...................................................... 28
3.2.1
Retrieving the Fiori App Name ................................................................................................................. 28
3.2.2
Retrieving the Fiori App ............................................................................................................................ 29
Import the SAP-Delivered Standard Fiori Application on Eclipse ................................................................................30
3.3.1
Create the Application Project ...................................................................................................................30
3.3.2
Import the Downloaded Application to the Eclipse Project ........................................................................ 31
Extend OData Service ................................................................................................................................................ 31
3.4.1
Extend ABAP DDIC Structure Using an Append Structure .......................................................................... 33
3.4.2
Extend OData Service ............................................................................................................................... 35
3.4.3
Test the Extended OData Service ..............................................................................................................39
Extend SAP-Delivered Standard Application ..............................................................................................................39
3.5.1
Create the Extension Application Project ...................................................................................................39
3.5.2
Change a Field Label .................................................................................................................................41
3.5.3
Hide a Field .............................................................................................................................................. 44
3.5.4
Implement the View Extension (Add Fields) .............................................................................................. 46
3.5.5
Implement a View Replacement ................................................................................................................ 51
Upload the Custom Application to the ABAP System ................................................................................................ 54
3.6.1
Upload the Fiori App ................................................................................................................................ 54
3.3
3.4
3.5
3.6
4
4.1
4.2
4.3
4.4
4.5
4
Configure the Custom Application on the Fiori Launchpad.............................................................................................. 56
Create a New Launchpad .......................................................................................................................................... 56
Create a New Catalog ............................................................................................................................................... 58
Create a New Tile in the Catalog ............................................................................................................................... 59
Create a New Role for the Catalog ............................................................................................................................ 62
Add a New Tile to the Launchpad...............................................................................................................................63
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Table of Contents
5
Additional Information ...................................................................................................................................................... 64
SAP Fiori App Extensibility
(MF8)
Table of Contents
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
5
1
Purpose
The purpose of this document is to describe the general configuration steps required to extend an SAP Fiori app. It is not a
development tutorial but, with the selected apps
o
Track Purchase Orders for SAP Web IDE,
o
My Quotation for Eclipse IDE,
As examples, it explains easy to understand use cases how an SAP Fiori app can be extended.
Basically there are two different IDEs covered by this document. SAP Web IDE basically is the default option to be used.
However –there might be project-specific reasons not to use the SAP WEB IDE – then Eclipse IDE can be used instead.
In this version, the following use cases are described:
o
change a field label
o
hide a field
o
add a field to the UI – including the required extensions on backend and frontend server (ODATA extensions).
o
change the sequence of fields
o
hide a screen area
In future versions of this document, additional use cases may be added.
The above mentioned use cases can be carried out independently from each other meaning you can pick the one you are
interested in and skip the others.
Note
The document is clustered in three main areas:

Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE

Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE

Configure the Custom Application on the Fiori Launchpad
No matter on which way you extend the SAP delivered Fiori app you need to run through the chapter ‘Configure the
Custom Application on the Fiori Launchpad’ in both cases.
Within the chapter ‘Extend OData Service’ the sub chapter ‘Extend SAP-Delivered Standard Fiori Applications using
Eclipse IDE’ is describing how to extend an OData Service. This chapter might be relevant as well in case you extend
your SAP delivered Fiori app via SAP Web IDE adding new fields that are not covered by the ODATA service yet.
6
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Purpose
2
Extend SAP-Delivered Standard Fiori Applications
using SAP Web IDE
SAP Web IDE (Integrated Development Environment) is a Web based tool for developers, business experts, and designers to
customize or build SAP Fiori applications SAP Web IDE offers wizards, templates, and code editors to improve developer
productivity.
Example
The steps outlined below use the example of the standard SAP Fiori app Track Purchase Order.
2.1
Prerequisites
Before starting the extension activities, you need to make sure that you met the following requirements:
Activity
Software
Requirements
Note
The software requirements sheet explains in detail which software component
versions need to be installed.
The configuration of the apps is described in detail in the respective configuration
guides.
Required Users
The required users have been created in the used SAP back-end system and SAP Gateway
system. The user ID in must be identical in both systems.
Fiori Apps
The SAP Fiori app is fully configured and connected to an SAP back-end system.
Note
This document uses the SAP Fiori app Track Purchase Order as an example. In case
you want to replay the used example one by one, the Track Purchase Order app is
expected to run properly, displaying purchase orders from the connected SAP ERP
back-end system.
More Information
http://help.sap.com/fiori.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
7
2.2
Check and Activate HTTP Service in SAP Gateway System
Use
In this step, you check the HTTP services in the SAP Gateway system (frontend system) that are required for the connection to
SAP Web IDE. If these are not active, you can activate the services now.
Procedure
1.
Open an SAP Logon session and connect to the SAP Gateway System in which the extended SAP Fiori app was
deployed.
2.
Access the transaction using the following navigation path:
Transaction Code
SICF
SAP Reference IMG Menu
Tools  Administration  Administration  Network 
HTTP Service Hierarchy Maintenance
3.
Choose Execute.
4.
In the Virtual Hosts / Services hierarchy, choose default_host.
5.
Choose sap  bc  adt (ABAP Development Tools)
Note
This service is used by SAP Web IDE. In case it is not active, the system cannot be called by SAP Web IDE.
6.
Check that the service is active.
Note
If the service is active, the service name is displayed in black; if the service is inactive, the service name is grayed out.
7.
If the service is not active, right-click on the service and activate it.
Result
You have checked that the relevant HTTP services are active.
2.3
Configure SAP Web IDE
Use
In this step, you connect to the SAP Web IDE and configure the tool to connect to the SAP Gateway system which holds he
SAP Fiori applications and the associated OData services.
8
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
Procedure
SAP Web IDE is a browser-based tool for which the recommended access is using the SAP HANA Cloud. You can use the
directions included in the Set up your SAP Web IDE on HANA Cloud how-to guide. As the guide describes you can replace the
example system settings included in the document with the specific system settings to connect to your own SAP Gateway
system. (The newest version of this document can be found here: http://scn.sap.com/docs/DOC-55882).
Result
You have configured SAP Web IDE to connect to your own SAP Gateway system.
Note
When you use the SAP Web IDE, you will need to ensure that SAP HANA Cloud Connector is running on your local
machine. To achieve this you need to run the file go.sh (on Mac OS X) or go.bat (on MS Windows) before you
logon to the SAP Web IDE environment in your Internet browser.
2.4
Extend Track Purchase Orders App
Use
In this step, you create an extension project for the standard SAP Fiori app Track Purchase Order and make several
extensibility modifications in the extension project.
Pre-requisites
The standard SAP Fiori app Track Purchase Order and the associated OData server MM_PURORD_TPO are available in
the SAP Gateway system.
2.4.1 Create Extension Project for Track Purchase Orders App
Use
In this step, you create an extension project for the standard SAP Fiori app Track Purchase Order. All of the extensibility
changes that you carry out will be made to the extension project, leaving the standard SAP code unchanged.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
9
Procedure
1.
Open SAP Web IDE.
2.
Choose File → New → Extension Project.
3.
In screen New Extension Project → 1 Parent Application and Name, select Open extension
project in extensibility pane.
4.
Choose Remote…→ SAPUI5 ABAP Repository.
5.
In the dialog box Select Application from SAPUI5 ABAP Repository, select <Gateway System id> in
System, where <Gateway System id> is the id for SAP Gateway system.
6.
7.
In the list of applications, choose the following entry:
Application
Description
MM_PURORD_TPO
TPO Upload Wave 2
Choose OK.
The field Extension Project Name is populated with the default value MM_PURORD_TPOExtension.
8.
Choose Next.
9.
In screen 2 Confirm, choose Finish.
Result
You have created an extension project MM_PURORD_TPOExtension for the SAP Fiori app Track Purchase Orders.
2.4.2 Hide Title Field
Use
In this step, you hide the title for the detail screen of an item in the purchase order.
Caution
According to SAP Fiori guidelines each screen requires a title. Therefore this is not a recommended practice, but is
included to illustrate how this can be achieved.
10
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
Procedure
1.
Open SAP Web IDE.
2.
Select the extension project MM_PURORD_TPOExtension
3.
Choose Tools → Extensibility Pane.
A new window is displayed showing the initial master/detail sections of the app, with a side bar Outline. The initial view of
the Outline side bar shows all elements. Firstly, all views are displayed with their full hierarchy; secondly, all controllers are
displayed.
Caution
Both the view and controller share the same name, for example Main. Therefore, when you are creating an
extension in the Outline side bar, you must ensure that you are making the extension to the correct element type.
4.
In the Outline side bar, select the view POItem.
5.
Choose POItem → POTItemPage → sap.m.customHeader → sap.m.Bar → sap.m.contentMiddle →
POItemHeaderText.
6.
In the drop-down box Possible Extensions, choose HideControl.
7.
Choose OK.
Result
You have hidden the text for the purchase order item.
Note
You can populate the preview of the app with data from back-end system directly in SAP Web IDE. Just perform the
search as using the regular FIORI app.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
11
2.4.3 Hide Field on SAP Fiori Screen by Code Modifications
Use
In this step, you hide the technical name of the material and the corresponding field label in the detail screen of the purchase
order item. This example shows how you can achieve the changes by making changes to a custom version of the code for the
view.
Procedure
1.
Open SAP Web IDE.
2.
Select the extension project MM_PURORD_TPOExtension
3.
Choose Tools → Extensibility Pane.
4.
In the Outline side bar, select the view POItem.
5.
In the drop-down box Possible Extensions, choose Replace with a copy of the parent view and
choose OK.
6.
In the dialog box Application Changed, choose Yes.
7.
In the Outline side bar, select the view POItemCustom (Replacement for POItem).
8.
Choose Go to Code → Extension Code.
9.
In the dialog box Information, choose OK.
10. In the code for POItemCustom.view.xml change the visible attribute of the text for field Material label to
‘false’.
Code before change
<Label text="{i18n&gt;XFLD_Material}"/>
Code after change
<Label visible='false' text="{i18n&gt;XFLD_Material}"/>
11. In the code for POItemCustom.view.xml change the visible attribute of the text for field Material ID to
‘false’.
12
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
Code before change
<Text text="{MaterialID}"/>D Description
Code after change
<Text visible='false' text="{MaterialID}"/>D}"/>
After you have made the changes the relevant section of coding is as follows
Syntax
12. Choose Save.
Result
You have hidden the text and the label for the technical name of the material in the detail screen of the purchase order item.
Note
You can quickly check the result in the preview by navigating via the menu Tools -> Extensibility Pane.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
13
2.4.4 Change Label (Usage of Language File)
Use
In this step, you change the label for Plant on the purchase order item details screen. The usage of custom specific language
files enables you to change the field labels without changing the SAP delivered code.
Procedure
1.
Open SAP Web IDE.
2.
Select the extension project MM_PURORD_TPOExtension.
3.
Choose File → New → Folder.
4.
Enter the Folder Name
Folder name
5.
Select the created folder i18n.
6.
Choose File → New → File
File name
i18n
i18n_custom_xx.properties
(replace xx with the language needed, for example de for Germany or en for English)
Caution
Make sure you use small characters!
7.
Enter the following values in the previous step created language file:
Code
XFLD_Plant=XXX Description
(replace XXX with the label change of your choice).
8.
Save your changes.
9.
In the code for Component.js change code as follows:
14
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
Code
before
change
config:{
Code
after
change
config: {
},
"sap.ca.i18Nconfigs":{
"bundleName":"ui.s2p.mm.purord.tracking.MM_PURORD_TPOExtension.i18n.i18n_custom"
}
},
14. After you have made the changes the relevant section of coding is as follows
Syntax
15. Choose Save.
Result
You have changed the label of a field on the purchase order item details screen.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
15
2.4.5 Change Label (View Replacement)
Use
In this step, you change the label for Plant on the purchase order item details screen. A view replacement is carried through
in this example. You would use this technique only in case you want to change coding of this view with your own code. This is
just a simple example of a view replacement.
Caution
Since you will replace the original, SAP delivered view with your own one the field label change of the previous
chapter will not be visible any more.
Procedure
1.
Open SAP Web IDE.
2.
Select the extension project MM_PURORD_TPOExtension.
16
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
If you have already created the file for the customized view POItemCustom.view.xml, carry out the following steps 3 to 4.
Otherwise carry out steps 5 to 12.
3.
Choose view → POItemCustom.view.xml.
4.
Proceed to step 13.
If you have not already created the file for the customized view POItemCustom.view.xml, carry out the following steps 5
to 12.
5.
Choose Tools → Extensibility Pane.
6.
In the Outline side bar, select the view POItem.
7.
If you have already created the file for the customized view POItemCustom.view.xml, go to step nn.
8.
In the drop-down box Possible Extensions, choose Replace with a copy of the parent view.
9.
In the dialog box Application Changed, choose Yes.
10. In the Outline side bar, select the view POItemCustom (Replacement for POItem).
11. Choose Go to Code → Extension Code.
12. In the dialog box Information, choose OK.
13. In the code for POItemCustom.view.xml change the label text for field Plant Name.
Code before change
<Label text="{i18n&gt;XFLD_Plant}"/>D Description
Code after change
<Label text="Delivering Plant"/>D}"/>
After you have made the changes the relevant section of coding is as follows
Syntax
14. Choose Save.
Note
This modification will hard-code the changed text for any user who uses the extended version of the app. In some
cases this may be appropriate, for example, for providing a personalized version of the app. However, if you are
providing modified texts that need to be translated you must change the respective entries for each language and
version for the text variable XFLD_Plant in the text file i18n.
Please check the chapter ‘Change a Field Label’ of the Eclipse example for further reference.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
17
Result
You have changed the label of a field on the purchase order item details screen.
2.4.6 Add Field Showing Item Type Description
Use
In this step, you add a new field to the order details screen. The new field shows the description of the item type. This is an
example of information that is available in the OData service that can be added to the front end.
Example
In this example the field that is added is included in each item of the purchase order, so that this is a new column with
a title text Description.
18
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
Procedure
1.
Open SAP Web IDE.
2.
Select the extension project MM_PURORD_TPOExtension.
3.
Choose Tools → Extensibility Pane.
4.
In the Outline side bar, select the view S3.
5.
In the drop-down box Possible Extensions, choose Replace with a copy of the parent view.
6.
Choose OK.
7.
In the dialog box Application Changed, choose Yes.
8.
In the Outline side bar, select the view S3Custom (Replacement for S3).
9.
Choose Go to Code → Extension Code.
10. In the dialog box Information, choose OK.
11. In the code for S3Custom.view.xml, add a new column to the view. You add this column between the columns for
XCAP_Invoiced and XCAP_Paid.
After you have made the changes the relevant section of coding is as follows
Code to be added
<Column hAlign="Right">
<header>
<Label text="Description" textAlign="Right"
width="100%"/>
</header>
</Column> Description
Syntax
12. Add a cell to the view. You add this cell after the cells for information for invoicing, which are the cells for
InvoicedDate, QuantityInvoiced and so on.
After you have made the changes the relevant section of coding is as follows
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
19
Code to be added
<layout:VerticalLayout>
<Text text="{Description}" textAlign="Right"/>
</layout:VerticalLayout> Description
Syntax
13. Choose Save.
20
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
2.4.7 Replace View
Use
In this step, you replace the master view with an extension of the view. In this extension you make coding changes to change
the default filter selection for purchase orders. As this extension changes the logic of the processing within the app, you make
the changes to the coding in an extension of the controller file, rather than the view file itself.
Note
In this procedure you will create an extension of the relevant controller file. In the initial version of the extension, all
coding is inactive. You will then activate the coding for the specific aspects that you wish to customize, in this example
the default number of days for the filter. All other coding in the extension remains inactive. When the app is executed
by the user, the coding of the standard app is merged with the activated coding of the extension.
Procedure
1.
Open SAP Web IDE.
2.
Select the extension project MM_PURORD_TPOExtension.
3.
Choose Tools → Extensibility Pane.
4.
In the Outline side bar, select the controller S2.
5.
In the drop-down box Possible Extensions, choose Extend with a copy of the parent controller.
6.
Choose OK.
7.
In the dialog box Application Changed, choose Yes.
8.
In the Outline side bar, select the controller S2 Custom (Extension for S2).
9.
Choose Go to Code → Extension Code.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
21
10. In the code for S2custom.controller.js, change the default filter for purchase orders from the last 7 days to the
last 30 days. This is achieved by uncommenting out the code in the extension and changing the relevant value. You will
need to make the changes in two separate parts of the code of the controller.
Code before change
Code after change
sap.ui.controller("ui.s2p.mm.purord.tracking.MM_PURORD_TPOEx
tension.view.S2Custom", {
//
sFilterLastNDays: 7,
//
sFilterWithAlerts: false,
//
sSearchText: "",
//
sFilterKey: "FILTER7",
//
oFilterDialog: null,
//
onInit: function() {
sap.ui.controller("ui.s2p.mm.purord.tracking.MM_PURORD_TPOEx
tension.view.S2Custom", {
sFilterLastNDays: 30,
//
sFilterWithAlerts: false,
//
sSearchText: "",
sFilterKey: "FILTER30",
//
oFilterDialog: null,
onInit: function() {
Code before change
//
this.oFilterDialog.setSelectedPresetFilterItem("FILTE
R7");
//
}
this.oFilterDialog.setSelectedPresetFilterItem("FILTE
Code after change
R30");
}
After you have made the changes the relevant sections of coding are as follows
Syntax
....
22
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
11. Choose Save.
Result
You have replaced the view, and changed the coding to of the extension to change the default value for the filter for searching
for purchase orders.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
23
2.4.8 Test your Extension in SAP Web IDE
Use
In this step, you test the extension to the Track Purchase Order within the SAP Web IDE.
Procedure
1.
Open SAP Web IDE.
2.
Select the extension project MM_PURORD_TPOExtension
3.
Select the file index.html.
4.
Choose Run → Run.
Note
If you do not have back-end data for the purchase orders available in the SAP Gateway system choose Run →
Run with Mock Data.
Result
You have started a test version of the app extension, and you can verify that the extensions you have made are correctly
implemented.
2.4.9 Deploy Extension Project
Use
In this step, you deploy the created extension project for the standard SAP Fiori app Track Purchase Order into the
ABAP Repository of your on premise Gateway system. From this repository and front-end server, all your SAP Fiori apps and
this extension are made available for the end users. With this step, you leave your personal SAP Web IDE environment and
make your app available for end users or other developers. Additionally, you check the correct deployment and the specific
extension parameters you need to setup the app in the SAP Fiori Launchpad.
Optionally, you may share your personal SAP Web IDE project by exporting the project to a local drive for further distribution
or by synchronizing it with a Git repository. Nevertheless, the final app must be deployed to a SAP Gateway with SAP Fiori
Launchpad.
Note
The usage of a Git repository is not part of this document.
24
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
The deployment that you carry out will create a new BSP Application including the extension project, leaving the standard SAP
code and standard SAP Fiori app unchanged. Further distribution of the SAP code will be managed by transport requests
within the SAP Gateway front-end server.
Note
Within the ABAP workbench the SAP UI5 applications are stored in the same way as BSP Applications used to be
stored. Hence the SAP UI5 applications code line can be found in the same way as BSP applications even if they are
no BSP Applications.
Procedure
1.
Open SAP Web IDE.
2.
Select and right-click on the extension project MM_PURORD_TPOExtension
3.
Choose Deploy → Deploy to SAPUI5 ABAP Repository.
4.
Select the SAP Gateway System (frontend system) from the drop-down list.
5.
Enter your user credentials for the SAP Gateway System (frontend system) if requested.
6.
Choose Next.
7.
Enter a valid name (15 char max.) and description for the future BSP Application, e.g. Z_MM_PURORD_Ext and Track
Purchase Order Extension
8.
Choose a valid package to add the changes to an existing transport request or choose $TMP for a local object in the ABAP
Repository.
Caution
In this example, a local object must be created using package $TMP.
9.
Choose Next.
10. Choose Finish.
Next you must check that the correct extension project deployment exists in the ABAP Repository of SAP Gateway System
(frontend system).
11. Open a SAP Logon session and connect to the SAP Gateway System in which the extended SAP Fiori app was
deployed.
12. Access the transaction using the following navigation path:.
Transaction Code
SE80
SAP Reference IMG Menu
Tools  ABAP Workbench  Overview  Object Navigator
13. Choose Local Objects and use your user name.
14. Choose Display to search.
15. Drill-down trough to BSP Library → BSP Applications.
16. Check that Z_MM_PURORD_EXT exists.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
25
Result
You have deployed the extension project to the ABAP Repository of the SAP Gateway System (frontend system) that is
dedicated to deliver the SAP Fiori Launchpad and all SAP Fiori apps.
26
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE
3
Extend SAP-Delivered Standard Fiori Applications
using Eclipse IDE
3.1
Prerequisites
Before starting the extension activities, you make sure that you met the following requirements:
Activity
Software
Requirements
o
Eclipse is installed
o
SAPUI5 plugin version 1.16.4 or higher for Eclipse. For details, check
https://tools.hana.ondemand.com/#sapui5
o
Tomcat local webserver (only for local testing). The recommended versions of
Tomcat are 7.0 or higher.
Note
The use of the local Tomcat is not described in this guide.
o
The software requirements sheet explains in detail, which software component
versions need to be installed on the SAP Gateway system.
o
The configuration of the apps is described in detail in the respective configuration
guides.
Required Users
The required users have been created in the used SAP back-end system and SAP Gateway
system. The user ID in must be identical in both systems.
Fiori Apps
The SAP Fiori app is fully configured and connected to a SAP back-end system.
Note
This document uses the SAP Fiori app My Quotations as an example. In case you
want to replay the used example one by one, the My Quotations app is expected to
run properly, displaying quotations from the connected SAP ERP back-end system.
More Information
http://help.sap.com/fiori.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
27
3.2
Download the SAP-Delivered Standard Fiori Application from the
ABAP System
3.2.1 Retrieving the Fiori App Name
Use
In this step, you search and find the technical name of the used SAP Fiori app. This is required to download the app later to the
Eclipse development environment.
Procedure
In the SAP Gateway System (frontend system), carry out the following steps:
1.
In SAP GUI, access the following transaction:
Transaction Code
SE80
2.
Select Repository Browser.
3.
Select BSP Application from the drop-down menu.
4.
Enter a search value using * as wildcard.
Note
Within this document, the SAP Fiori app My Quotation is used as an example. Hence, enter *quot* in the input field.
5.
Choose the triangle shaped button.
6.
The result list shows up.
Note
The BSP Application SD_MYQUOTES is the SAP Fiori app searched for.
Result
You can use the technical name of the SAP Fiori app for further purposes.
28
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
3.2.2 Retrieving the Fiori App
Use
In this step, you download the app from the ABAP system so that you can test the app locally or to get to know the structure
and the extension points.
Procedure
1.
In SAP GUI, access the following transaction:
SE38
Transaction Code
2.
Choose Enter.
3.
On the Initial Screen, make the following entry:
Field Name
Entry Value
Program
/UI5/UI5_REPOSITORY_LOAD
4.
Choose Execute.
5.
Enter the name of the application:
Field Name
Entry Value
Name of SAPUI5
Application
<your application name> (for example, SD_MYQUOTES)
6.
Choose Download option.
7.
Choose Execute.
8.
In the Browse For Folder pop-up, choose Make New Folder.
9.
Change the name and location of the folder where you want to save the app.
10. Choose OK.
11. If a pop-up window appears, choose Allow.
12. Scroll down to the bottom of the page.
13. Double-click the Click here to Download text.
14. If a pop-up window appears asking for External Codepage, choose Continue.
15. If you get an error, make the following entry:
Field Name
Entry Value
External Codepage
Cp1252
16. If an SAP GUI Security pop-up window appears, select Remember My Decision and choose Allow.
17. When you are back on the screen from step 5 and, at the bottom, there is the amount of data transferred, the download is
complete.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
29
Result
You have downloaded an SAP Fiori app to the chosen location.
3.3
Import the SAP-Delivered Standard Fiori Application on Eclipse
3.3.1 Create the Application Project
Use
In this step, you create the application project where the Fiori app will be imported.
Procedure
1.
Open Eclipse.
2.
Choose File → New → Project.
3.
Select SAPUI5 Application Development.
4.
Select Application Project.
5.
Choose Next >.
6.
In the New Application Project window, make the following entry:
Field Name
Entry Value
Project name
<name of the app> (for example, SD_MYQUOTES)
7.
Select Use default location.
8.
Select Mobile (or sap.m) in Target Device (or Library).
9.
Remove selection from Create an Initial View.
10. Choose Finish.
Result
You have created an SAPUI5 application project.
30
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
3.3.2 Import the Downloaded Application to the Eclipse Project
Use
In this step, you import the downloaded application to the Eclipse project created in the previous step.
Procedure
1.
Open Eclipse.
2.
In the Project Explorer on the left, select the project <project name> (for example, SD_MYQUOTES).
3.
Expand project.
4.
Right-click the WebContent folder.
5.
Choose Import….
6.
In the Import window, select General → File System.
7.
Choose Next >.
8.
Choose Browse… in the From directory: field.
9.
Select the folder where the content of the downloaded app is (used in step Retrieving the SAP Fiori App).
10. Choose Ok.
11. Choose Select All.
12. Choose Finish.
Result
You have imported the downloaded SAP Fiori app to the SAPUI5 application project created previously.
3.4
Extend OData Service
Use
This is a prerequisite for the view extension to add a new field to the frontend.
Within this example implementation, 3 different fields are added to the SAP Fiori app and the corresponding Odata service is
enhanced. Find here a short description which, backend fields of the quotation are used in these examples:
Procedure
Example1: ‘Title’ for the Partner Function ‘Ship-to party
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
31
1.
Access the quotation using one of the following navigation options in the SAP ERP backend:
SAP Menu
Logistics  Sales and Distribution  Sales  Quotation 
Display
Transaction Code
VA23
2.
Open a quotation and navigate via the menu: Goto  Header  Partner.
3.
Select the partner function Ship-to party.
4.
Choose Detail.
The Title field is used as first example:
Example2: ‘Incoterms’ from the Billing Document’
1.
Access the quotation using one of the following navigation options in the ERP Backend :
SAP Menu
Logistics  Sales and Distribution  Sales  Quotation 
Display
Transaction Code
VA23
2.
Open a quotation and navigate via the menu: Goto  Header  Billing.
3.
The fields Incoterms are used as second example:
Caution
This section needs to be carried out for the ‘Add Fields’ scenario only. The corresponding frontend enhancements are
described in chapter ‘Implement the view Extension (Add Fields)’.
32
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
3.4.1 Extend ABAP DDIC Structure Using an Append Structure
Use
In this step, you extend the ABAP DDIC Structure of the ODATA service with an append structure in the back-end system so
that it can be used in the user interface displaying the data from the connected back-end system.
Note
This step is carried out in the back-end system.
Procedure
1.
In SAP GUI, access the following transaction:
SE80
Transaction Code
2.
Choose Enter.
3.
Choose Repository Browser.
4.
From the dropdown, choose Package.
5.
Choose the arrow button.
6.
Choose the Information System button.
7.
Make the following entry:
Field Name
Entry Value
Package
ERP_SD_ODATA*
8.
Choose Execute.
9.
Select package ERP_SD_ODATA_MYQUOTATION and double-click it.
10. On the left side, choose Dictionary Objects → Structures.
Example1: Title
1.
Double-click the option TDS_ODATA_QUOTATION_PARTNER_IN.
2.
Choose the Append Structure… button on top.
3.
In the Create Append Structure for TDS_ODATA_QUOTATI… window, make the following entry:
Field Name
Entry Value
Append Name
Z<your append structure name> (for example,
Z00_PARTNER_EXT)
4.
Choose Continue.
5.
Enter a Short Description.
6.
Make the following entry:
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
33
Field Name
Entry Value
Component
TITLE_T
Typing Method
Types
Data Type
CHAR
Note
You need to choose the Predefine Type button to change this.
Length
25
7.
Choose Save.
8.
Choose your Package. In case you do not want to transport, you can use package $tmp.
9.
Choose Save.
10. Choose Activate to activate the append structure.
11. Choose Back.
Example2: Incoterms
1.
Double-click the option TDS_ODATA_QUOTATION_HEADER_INC.
2.
Choose the Append Structure… button on top.
3.
In the Create Append Structure for TDS_ODATA_QUOTATI… window, make the following entries:
Field Name
Entry Value
Append Name
Z<your append structure name> (for example,
Z00_HEADER_EXT)
4.
Choose Continue.
5.
Enter a Short Description.
6.
Make the following entries:
7.
Field Name
Entry Value
Component
INCO1
Typing Method
Types
Component Type
INCO1
Enter a second line for the long text of the incoterms:
Field Name
Entry Value
Component
INCO2
Typing Method
Types
Component Type
INCO2
8.
Choose Save.
9.
Choose your Package. In case you do not want to transport, you can use $tmp.
34
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
10. Choose Save.
11. Choose Activate to activate the append structure.
12. Choose Back.
Result
You have now added the new fields to the structure.
3.4.2 Extend OData Service
Use
In this step, you extend the standard OData service to implement the property added in previous step. This step is carried out
in the frontend system.
Procedure
1.
In SAP GUI, access the following transaction:
Transaction Code
/NSEGW
2.
Choose Enter.
3.
Choose Create Project.
4.
In the Create Project window, make the following information entries:
Field Name
Entry Value
Project
<your project name> (for example Z_LORD_MY_QUOTATION)
Note
The project name Z_LORD_MY_QUOTATION is used in the following
example.
Description
<your description> (for example: My Quotations Extended
OData Service)
Package
<your Package name> (in case you do not want to transport you can use
$tmp)
5.
Choose Continue.
6.
Select your project and choose the Display <-> Change button for edit mode.
7.
If prompted choose Yes to save.
8.
Right-click Data Model and choose Redefine → OData Service (GW).
In the Wizard Step 1 of 2: Redefine Service window, make the following information entries:
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
35
9.
Field Name
Entry Value
Technical Service
Name
LORD_MY_QUOTATION_SRV
Version
0001
Choose Next.
10. Choose Select All in the top left.
11. Choose Finish.
Example1: Title
1.
In your new project, expand Data Model, Entity Types and Partner.
2.
Double-click the Properties.
3.
Choose Display <-> Change button for edit mode.
4.
Choose Append Row.
5.
Make the following entries:
Field Name
Entry Value
Name
Title
Edm Type
Edm.String
Caution
Choose value helper button, select Edm.String and choose Copy.
Max Length
25
Label
Title
ABAP Field Name
TITLE_T
Caution
Choose value helper button, select TITLE_T and choose Copy.
6.
Choose Check Project Consistency on the top left to check for errors.
Example2: Incoterms
1.
In your new project, expand Data Model, Entity Types and QuotationHeader.
2.
Double-click the Properties.
3.
Choose Display <-> Change for edit mode.
4.
Choose Append Row.
5.
Make the following entries:
36
Field Name
Entry Value
Name
Inco1
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
Field Name
Entry Value
Edm Type
Edm.String
Caution
Choose the value helper button, select Edm.String and choose Copy.
Max Length
3
Label
Inco1
ABAP Field Name
INCO1
Caution
Choose the value helper button, select INCO1 and choose Copy.
6.
Append a second line:
Field Name
Entry Value
Name
Inco2
Edm Type
Edm.String
Caution
Choose the value helper button, select Edm.String and choose Copy.
Max Length
28
Label
Inco2
ABAP Field Name
INCO2
Caution
Choose the value helper button, select INCO2 and choose Copy.
The following steps are valid for both examples:
1.
Choose Check Project Consistency button on top left to check for errors.
2.
Choose Generate Runtime Objects.
3.
Choose Continue.
4.
Choose your Package. In case you do not want to transport, you can use $tmp.
5.
Choose Save.
6.
Expand folder Runtime Artifacts in your project.
7.
Double-click ZCL_Z_LORD_MY_QUOTAT_MPC_EXT.
8.
In the right screen area, double-click the ZCL_Z_LORD_MY_QUOTAT_MPC_EXT.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
37
9.
Expand Methods -> Inherited Methods in the navigation area.
10. Right-click DEFINE and select Redefine.
11. Select the Redefinitions and double-click DEFINE.
12. In the content, insert the following code:
Example1: Title
Syntax
method DEFINE.
super->define( ).
model->get_entity_type( 'Partner' )->get_property( 'PartnerFunction' )>set_conversion_exit( '' ) ##NO_TEXT.
endmethod.
Example2: Incoterms
Syntax
method DEFINE.
super->define( ).
model->get_entity_type( 'QuotationHeader' )->get_property( 'QuotationID' )>set_conversion_exit( '' ) ##NO_TEXT.
endmethod.
13. Choose Check.
14. Choose Save.
15. Choose Activate.
16. Choose Continue.
17. To register the OData service in SAP GUI, access the following transaction:
Transaction Code
/NSEGW
18. Expand your project and Service Maintenance.
19. Double-click LOCAL.
20. Choose Register.
21. Choose Yes if a pop-up window appears.
22. Choose your Package. In case you do not want to transport, you can use $tmp.
23. Choose Continue.
Result
You have now extended the OData service, and the fields are now part of your service.
38
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
3.4.3 Test the Extended OData Service
Use
The extended OData service can be tested and displays the data maintained in the back-end system for a specific quotation.
Procedure
1.
Access the service using one of the following navigation options in the frontend system:
IMG Menu (Spro)
SAP NetWeaver  Gateway  OData Channel 
Administration Activate and Maintain Services
Transaction Code
/IWFND/MAINT_SERVICE
2.
Carry out the following steps:
3.
Double-click the service in the list you have created in the previous step.
4.
Choose Gateway Client.
5.
In the line Request URI replace ?format=xml with the following text:
Example 1: Title
QuotationHeaderSet('<your QuotationID>')?$expand=PartnerSet
Example 2: Incoterms
QuotationHeaderSet('<your QuotationID>')
6.
Choose Execute.
Result
Within the http response, the above added fields are displayed including the data maintained in the back-end system.
3.5
Extend SAP-Delivered Standard Application
3.5.1 Create the Extension Application Project
Use
In this step, you create the extension application project in Eclipse. This extension project is where all the changes are made.
You do not change the original project delivered by SAP, you use this extension project to create the customer extension.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
39
Caution
You must create this extension application project for all the scenarios described below.
Procedure
1.
Open Eclipse.
2.
Choose File → New → Project.
3.
Select SAPUI5 Application Development.
4.
Select Application Project.
5.
Choose Next >.
6.
In the New Application Project window, make the following entries:
Field Name
Entry Value
Project name
<name of the app> (for example, Z_SD_MYQUOTES)
7.
Select Use default location.
8.
Select Mobile (or sap.m) in Target Device (or Library).
9.
Remove the selection from Create an Initial View.
10. Choose Finish.
11. In the project folder, select the WebContent folder, choose the right-button and choose New → File.
12. In the New File window, make the following entry:
Field Name
Entry Value
File name
Component.js
13. Choose Finish.
14. In the content of the file, insert the following code:
Syntax
jQuery.sap.declare("zcus.sd.myquotations.Component");
sap.ui.component.load({
name:"cus.sd.myquotations",
url:jQuery.sap.getModulePath("zcus.sd.myquotations")+"/../SD_MYQUOTE
S"
});
cus.sd.myquotations.Component.extend("zcus.sd.myquotations.Component",{
metadata:{
}
});
40
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
15. Choose Save.
Note
The coding above makes the extension available in the customer component zcus.sd.myquotatations.
Result
You have created an SAPUI5 application project.
3.5.2 Change a Field Label
Use
In this step, you change a text from a field label using the custom language property files.
In this example, you create a custom language property file and learn how to create custom property files for different
languages.
As an example in this case, the field label for the Ship to Address is renamed.
Procedure
1.
In the project folder of the original project (created in chapter Create the Extension Application Project), you
can open the language property file inside the WebContent → i18n. Open for this example the i18n.properties
file to find out the technical name of the field to be changed.
2.
From the menu, choose Edit → Find/Replace…
3.
In the Find/Replace window, make the following entry:
Field Name
Entry Value
Find:
ship
4.
Choose Find.
5.
The Label for ship to is the result. Note down the following code for further use:
#XFLD, 10: Label for ship to
SHIPTO=Ship-To Party
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
41
6.
In the extension project folder (created in chapter Create the Extension Application Project), select the folder
WebContent, choose the right button and choose New → Folder.
7.
In the New Folder window, make the following entry:
8.
Field Name
Entry Value
Folder name
i18n
Choose Finish.
Note
This is the language folder where the different languages for the extentions are maintained.
9.
In the i18n folder, choose the right button and choose New → File.
10. In the New File window, make the following entry:
Field Name
Entry Value
File name
i18n_custom.properties
11. Choose Finish.
Caution
In this example, the content of the file remains empty (change of an existing field label).
12. Choose Save.
13. For each language, the field label shall be available for a custom properties files and must be created. In the i18n folder,
choose the right button and choose New → File.
14. In the New File window, make the following entry:
Field Name
Entry Value
File name
i18n_custom_xx.properties (replace xx with the
language needed, for example de for Germany or en for
English)
Caution
Make sure that you use small characters!
15. Choose Finish.
16. In the content of the created language file, insert the following code:
Syntax
#XFLD, 20: Label for ship-to address
SHIPTOADDRESS=XXXXXX (replace the XXXXXX for the text to that property in the language
of the selected file, you are changing the text of the property SHIPTOADDRESS)
42
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
17. Choose Save.
Note
Repeat these steps for all the languages needed.
18. Open the Component.js file.
19. In the content of the file, inside the metadata tag, insert the following code:
Syntax
jQuery.sap.declare("zcus.sd.myquotations.Component");
sap.ui.component.load({
name : "cus.sd.myquotations",
url : jQuery.sap.getModulePath("zcus.sd.myquotations") + "/../SD_MYQUOTES"
});
cus.sd.myquotations.Component.extend("zcus.sd.myquotations.Component", {
metadata : {
config:{
"sap.ca.i18Nconfigs":{
"bundleName":"zcus.sd.myquotations.i18n.i18n_custom"
},
"sap.ca.serviceConfigs":[{
name:"lord_my_quotation_srv",
serviceUrl:"
/sap/opu/odata/sap/LORD_MY_QUOTATION_SRV",
isDefault:true
}]
}
}
});
20. Choose Save.
Result
You have changed a label from the original app with an extension app. See how it is applied in the following screenshot:
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
43
3.5.3 Hide a Field
Use
In this step, you implement a view modification in the application project. You can override some properties of controls in the
standard SAP Fiori app. In this example, you hide the Expiry Date field. The screenshots show the original SAP Fiori app
My Quotations indicating which field is hidden:
Procedure
1.
In the project folder of the original project (created in chapter Create the Extension Application Project), you
can open the view file inside the WebContent → View folder. For this example, open the Master.view.xml to find
out the technical name of the field to be hidden.
2.
From the menu, choose Edit → Find/Replace…
In the Find/Replace window, make the following entry:
44
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
Field Name
Entry Value
Find:
id (Find the id of the element that you want to change)
3.
Choose Find.
4.
Get the name of the id. In this example, the expirationDate is used later.
Choose Close (to close the Find/Replace window).
5.
In the extension project folder (created in chapter Create the Extension Application Project), select the folder
WebContent, open the file Component.js.
6.
In the content of the file, inside the metadata tag, insert the following code:
Syntax
jQuery.sap.declare("zcus.sd.myquotations.Component");
sap.ui.component.load({
name:"cus.sd.myquotations",
url:jQuery.sap.getModulePath("zcus.sd.myquotations")+"/../SD_MYQUOTES"
});
cus.sd.myquotations.Component.extend("zcus.sd.myquotations.Component", {
metadata : {
"customizing" :{
"sap.ui.viewModifications" : {
"cus.sd.myquotations.view.Master" : {
"expirationDate" : {
"visible" : false
},
}
},
},
}
})
7.
Choose Save.
Caution
You have now hidden the field expirationDate from the original SAP-delivered master view.
The app will look like as displayed in the following screenshot:
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
45
Result
You have hidden a field from the original app with an extension app.
3.5.4 Implement the View Extension (Add Fields)
Use
In this step, you implement the extension in the application project. Here you have the necessary steps to find an extension
point and make the changes you want.
In this example, you add the new labels and text fields in the extension point which, were already described in chapter
Extend OData service (that is, the field Title or/and the two fields for the Incoterms).
Procedure
1.
In the project folder of the original project (created in chapter Create the Extension Application Project), you
can open the view file (in this example S3.view.xml) by expanding the folders WebContent -> view where you
want to make the changes.
2.
From the menu, choose Edit → Find/Replace…
3.
In the Find/Replace window, make the following entry:
Field Name
Entry Value
Find:
ExtensionPoint
4.
Choose Find.
5.
Get the name of the ExtensionPoint (for example extQuotationDetailsInfoTop) for later use.
Note
This extension point is connected to the information area of the app.
6.
Choose Close (to close the Find/Replace window).
7.
In the extention project folder (created in chapter Create the Extension Application Project), select the folder
WebContent, right-click, and choose New → Folder.
8.
In the New Folder window, make the following entry:
46
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
9.
Field Name
Entry Value
Folder name
view
Choose Finish.
10. In the view folder, right-click and choose New → File.
11. In the New File window, make the following entry:
Field Name
Entry Value
File name
extQuotationDetailsInfoTop.fragment.xml
12. Choose Finish.
13. In the content of the file insert the following code:
Example 1: Title
Syntax
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Label text="{i18n>EXT_TITLE}" />
<Text text="{shipTo>/Title}" />
</core:FragmentDefinition>
Example 2: Incoterms
Syntax
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Label text="{i18n>INCO1}" />
<Text text="{quotation>/Inco1}"/>
<Label text="{i18n>INCO2}" />
<Text text="{quotation>/Inco2}"/>
</core:FragmentDefinition>
14. Choose Save.
Caution
You have now created an extension of the original SAP delivered view.
15. In the WebContent folder, right-click and choose New → Folder.
16. In the New Folder window, make the following entry:
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
47
Field Name
Entry Value
Folder name
i18n
17. Choose Finish.
Caution
This is the language folder where the different languages for the extentions are maintained. In case you have
performed the previous chapter Change a Field Label, this folder was already created.
18. In the i18n folder, right-click and choose New → File.
19. In the New File window, make the following entry:
Field Name
Entry Value
File name
i18n_custom.properties
20. Choose Finish.
Caution
In case you have carried out the steps in the previous chapter Change a Field Label, this file was already created.
21. In the content of the file insert the following code:
Example 1: Title
Syntax
EXT_TITLE=Title
Example 2: Incoterms
Syntax
INCO1=Inco1
INCO2=Inco2
22. Choose Save.
23. After this step, you must create the custom properties files for all the languages needed. See these steps next.
24. In the i18n folder, right-click and choose New → File.
In the New File window, make the following entry:
48
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
Field Name
Entry Value
File name
<i18n_custom_XX.properties> (replace XX with the language needed,
for example de for Germany)
Note
Make sure you use small characters!
25. Choose Finish.
Note
In case you have carried out the steps in the previous chapter Change a Field Label, this file was already created.
26. In the content of the file insert the following code:
Example 1: Title
Syntax
EXT_TITLE=XXXXXX
Note
(replace the XXXXXX for the property in the language of the selected file)
Example 2: Incoterms
Syntax
INCO1=Inco1
INCO2=Inco2
Note
(replace the values Inco1 and Inco2 for the property in the language of the selected
file)
27. Choose Save.
Note
Repeat these steps for all the languages needed.
28. Open the Component.js file.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
49
29. Merge the code with the following code (or overwrite it in case this is the only scenario implemented):
Syntax
jQuery.sap.declare("zcus.sd.myquotations.Component");
sap.ui.component.load({
name:"cus.sd.myquotations",
url:jQuery.sap.getModulePath("zcus.sd.myquotations")+"/../SD_MYQUOTES"
});
cus.sd.myquotations.Component.extend("zcus.sd.myquotations.Component",{
metadata:{
"customizing":{
"sap.ui.viewExtensions":{
"cus.sd.myquotations.view.S3":{
"extQuotationDetailsInfoTop":{
className:"sap.ui.core.Fragment",
fragmentName:
"zcus.sd.myquotations.view.extQuotationDetailsInfoTop",
type:"XML"
}
}
}
},
config:{
"sap.ca.i18Nconfigs":{
"bundleName":"zcus.sd.myquotations.i18n.i18n_custom"
},
"sap.ca.serviceConfigs":[{
name:"lord_my_quotation_srv",
serviceId:"/sap/opu/odata/sap/Z_LORD_MY_QUOTATION_SRV",
isDefault:true
}]
}
}
});
50
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
Note
The URL in the serviceID above reflects the name of the OData service created in chapter Extend OData Service. You
must adapt it accordingly in case you gave the service ID a different name as Z_LORD_MY_QUOTATION_SRV.
30. Choose Save.
Result
You have added a field to the original app with an extension app.
Caution
Once the quotation header is changed in this adapted app, an error shows up once the user tries to save the changes.
The reason for this is that within the change process a different view is used which still uses the original OData service
LORD_MY_QUOTATION.
3.5.5 Implement a View Replacement
Use
In this step, you implement a view replacement in the application project. You can replace a view in a standard Fiori app with a
custom view.
Note
Since in this example here in chapter Implement the View Extension (Add Fields) and in this chapter Implement a
View Replacement the same views are used, you can either implement the one or the other example in the same app.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
51
Note
As a prerequisite for this little scenario, you must create an extension application project as described in chapter
Create the Extension Application Project. The other chapters Extend OData Service, Change a Field Label, Hide a
Field and Implement the View Extension (Add Fields) need not be carried out for the examples described in this
chapter.
Procedure
1.
In the extension project folder (created in chapter Create the Extension Application Project), select the folder
WebContent, right-click and choose New → Folder.
2.
In the New Folder window, make the following entry:
Field Name
Entry Value
Folder name
view
3.
Choose Finish.
4.
In the view folder, press the right button and choose New → File
5.
In the New File window, make the following entry:
Field Name
Entry Value
File name
Z_S3.view.xml
6.
Choose Finish.
7.
In the content of the file, you copy the complete coding of the S3.view.xml from the original app.
Note
The code below shows some changes from the S3 view. If you cannot use the extension points or you must change
more things, this is a good way to perform your changes without modifying the original coding delivered by SAP.
8.
The following coding explains two different small cases.
Example 1: Change sequence of fields
Here you change the order of the fields, in this case, the field Ship-To Party ‘shipTo>/Name1’ field moves down the
below the Quotation Reference field ‘quotation>/PurchaseOrder’.
Syntax
<Label text="{i18n>SHIPTOADDRESS}"></Label>
<Text text="{parts:[{path:'shipTo>/HouseNumber'},{path:'shipTo>/Street'}],
formatter:'cus.sd.myquotations.util.Formatter.formatHouseNumberStreet'}"></
Text>
<Label text=""></Label>
<Text text="{parts:[{path:'shipTo>/PostalCode'}, {path:'shipTo>/City'},
{path:'shipTo>/Country'}],
52
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
formatter:'cus.sd.myquotations.util.Formatter.formatCityCountry'}"></Text>
<Label text="{i18n>CUSTREF}"></Label>
<Text text="{quotation>/PurchaseOrder}"></Text>
<Label text="{i18n>SHIPTO}"></Label>
<Text text="{shipTo>/Name1}"></Text>
The result will look like this:
Example 2: Hiding the item table
Here you can hide the complete table at the bottom just by setting the property visible to false.
Syntax
<Table id="listItems" visible="false"
headerText="{path:'quotation>/QuotationItemSet/results/length',
formatter:'cus.sd.myquotations.util.Formatter.NbItems'}">
<columns>
<Column
hAlign="Left"
vAlign="Middle">
<header>
<Text
text="{i18n>DESCRIPTION}"/>
</header>
9.
Choose Save.
Note
You have now created a replacement of the original SAP delivered view.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
53
10. In the extension project folder (created in chapter Create the Extension Application Project), select the folder
WebContent , open the file Component.js.
11. In the content of the file, inside the customizing tag, insert the following code:
Syntax
cus.sd.myquotations.Component.extend("zcus.sd.myquotations.Component", {
metadata : {
"customizing" : {
"sap.ui.viewReplacements" : {
"cus.sd.myquotations.view.S3" : {
viewName : "zcus.sd.myquotations.view.Z_S3",
type : "XML"
}
},
},
}
});
12. Choose Save.
Note
You have now defined that the Z_S3 view replaces the original S3 view from the original SAP delivered app.
3.6
Upload the Custom Application to the ABAP System
3.6.1 Upload the Fiori App
Use
In this step, you upload the above adapted app to the SAP Gateway system (frontend server).
Procedure
1.
In SAP GUI, access the following transaction:
Transaction Code
2.
54
SE38
Choose Enter.
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
3.
On the Initial Screen, make the following entry:
Field Name
Entry Value
Program
/UI5/UI5_REPOSITORY_LOAD
4.
Choose Execute.
5.
Enter the name of the application:
Field Name
Entry Value
Name of SAPUI5
Application
<Z_SD_MYQUOTES>
6.
Choose Upload option.
7.
Choose Execute.
8.
In the Browse For Folder pop-up, choose the WebContent folder from your project.
9.
Choose OK.
10. Scroll down to the bottom of the page.
11. Choose the Click here to Upload text.
12. If a pop-up window appears, choose Allow.
13. In the pop-up window, make the following entries:
Field Name
Entry Value
Package
<your Package name> (in case you do not want to transport you can use
$tmp)
Transport Request
<your transport request>
Caution
In case you do not use $tmp, maintain a number of a workbench
request here. You can create a new request using transaction se10.
External Codepage
<empty>; in case of error enter Cp1252
14. Choose Continue.
15. If you are asked for a developer code, enter the requested code.
16. If a SAP GUI Security pop-up window appears, select Remember My Decision and choose Allow.
17. When you are back on the screen from point 5 and, at the bottom, there is the amount of data transferred, the upload is
complete.
Result
You have uploaded an SAP Fiori app to the chosen location.
SAP Fiori App Extensibility
(MF8)
Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
55
4
Configure the Custom Application on the Fiori
Launchpad
Within the above sections different applications were extended. Additional configuration in the SAP Frontend Server (SAP
Gateway) and settings in the Launchpad Designer are required.
This chapter is required independently from the fact how you extended your app (SAP Web IDE or Eclipse IDE).
In order to avoid confusion, for each app an own launch pad will be created using example values that can be replaced by
customer specific values of course.
4.1
Create a New Launchpad
Use
In this step, you create a new custom Launchpad.
Procedure
1.
Search and open your uploaded app in the ABAP Development Workbench (transaction Code SE80) as described in
chapter ‘Retrieving the Fiori App Name’ using the values of your own extended app.
2.
Expand the folder Page Fragments.
3.
Select the file Component.js.
4.
Keep this modus open for further references.
5.
In SAP GUI, access the following transaction in a new modus:
Transaction Code
LPD_CUST
6.
Choose Enter.
7.
Choose New Launchpad.
8.
In the Enter Values for a New Launchpad enter the following information (leave the fields not mentioned as is):
Field Name
Entry Value
Role
Quotation Example: <ZLPD_QUOTE>
Track Purchase Order Example: <ZLPD_PURO>
Instance
TRANSACTIONAL
Description
Quotation Example: <Extended Sales Order Quot>
Track Purchase Order Example: <Extended TrPuRo>
9.
56
Choose Continue.
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Configure the Custom Application on the Fiori Launchpad
10. If the Namespace required? window appears, choose Yes.
11. Choose New Application and make the following entry:
Field Name
Entry Value
Link Text
Quotation Example: <my Quotations Ext>
Track Purchase Order Example: <Track Purchase Order Ext>
Application Type
URL
URL
Quotation Example:
</sap/bc/ui5_ui5/sap/z_sd_myquotes>
Note
The App name that was uploaded in step ‘Upload the Fiori App’ needs
to be maintained here.
Track Purchase Order Example:
</sap/bc/ui5_ui5/sap/Z_MM_PUROD_EXT>
Note
The value to be maintained here is the name of the BSP application
which was created either during upload via the report (Eclipse
example) or via deployment from SAP Web IDE.
Caution
Choose the Edit icon next to the URL field.
12. Choose the Show Advanced (Optional) Parameters option and make the following entry:
Field Name
Entry Value
Application Alias
Quotation Example: <Z_MyQuotes>
Track Purchase Order Example:<Z_MM_PURORD>
Note
The application alias can be chosen as you want. However – this
parameter is used later during Catalog creation.
SAP Fiori App Extensibility
(MF8)
Configure the Custom Application on the Fiori Launchpad
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
57
Field Name
Entry Value
Additional
Information
Quotation Example:
SAPUI5.Component=zcus.sd.myquotations
Track Purchase Order Example:
SAPUI5.Component=
ui.s2p.mm.purord.tracking.MM_PURORD_TPOExtension
Note
You can derive the parameter like this:

Open your BSP application as described in chapter
‘Retrieving the Fiori App Name’

Open the folder Page Fragments -> WebContent

Select Components.js

The first codeline has the following format:
jQuery.sap.declare("XYZ.Component");

XYZ is a placeholder of the name to be maintained. In the
above mentioned examples it is zcus.sd.myquotations or
ui.s2p.mm.purord.tracking.MM_PURORD_TPOExtension.

The full parameter to be maintained here:
SAPUI5.Component=XYZ
13. Choose Save.
Result
You have created a custom Launchpad so that you can use your adapted SAP Fiori app.
4.2
Create a New Catalog
Use
In this step, you create a catalog for the extension app to the new custom Launchpad.
Procedure
1.
58
Open Launchpad Designer in your browser using the following URL:
http://<server>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap-client=<client>?scope=CUST
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Configure the Custom Application on the Fiori Launchpad
2.
If prompted, enter your User Name and Password and choose Log In.
3.
Select Catalogs to get the list of catalogs displayed
4.
Choose the
5.
Select Standard in the displayed pop up window.
6.
In the Create Catalog window, make the following entry:
button to create a new Catalog.
Field Name
Entry Value
Title
Quotation Example: <myQuotes_ext>
Track Purchase Order Example: <TrackPuro_ext>
ID
Quotation Example: <zmyQuotes_ext>
Track Purchase Order Example: <zTrackPuro_ext>
Caution
You need this value later, so keep it in mind.
7.
Choose Save.
Result
You have created a new Catalog.
4.3
Create a New Tile in the Catalog
Use
In this step, you create a tile for the extension app in the catalog.
Procedure
1.
Open Lauchpad Designer in your browser using the following URL:
http://<server>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap-client=<client>?scope=CUST
2.
If prompted, enter your User Name and Password and choose Log In.
3.
Choose Catalogs.
4.
Choose your catalog in the catalogs list on the left you have created in the previous step.
5.
Choose
6.
Depending on the app you are working on select the following option:
button Add Tile.
SAP Fiori App Extensibility
(MF8)
Configure the Custom Application on the Fiori Launchpad
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
59
7.
Field Name
Entry Value
App Launcher Dynamic
Quotation Example: Select this option
App Launcher Static
Track Purchase Order Example: Select this option
Maintain the following values:
Field Name
Entry Value
Title
Quotation Example: <My Quotes Extension>
Track Purchase Order Example: <Track Purchase Order
Extension>
Icon
Quotation Example: <sap-icon://Fiori2/F0390>
Track Purchase Order Example: <sap-icon://Fiori2/F0407>
Service URL
Quotation Example:
</sap/opu/odata/sap/LORD_MY_QUOTATION_SRV
/QuotationSet/$count>
Note
This URL returns the number of assigned quotations which is
displayed in the dynamic tile.
Track Purchase Order Example: This field is not available in the Static
Applauncher. This step is obsolete in this case.
Refresh Interval
Quotation Example: 0
Track Purchase Order Example: This field is not available in the Static
Applauncher. This step is obsolete in this case.
Use semantic object
navigation
Quotation Example: Selected
Semantic Object
Quotation Example: SalesQuotation
Track Purchase Order Example: Selected
Track Purchase Order Example: PurchaseOrder
Action
Quotation Example: zdisplayQuotation
Track Purchase Order Example: ztrack
Caution
As action please create a new one for each app created in the system.
8.
Save your settings.
9.
Choose
button.
10. Choose Create Target Mapping.
11. Make the following entries:
60
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Configure the Custom Application on the Fiori Launchpad
Field Name
Entry Value
Semantic Object
Quotation Example: SalesQuotation
Track Purchase Order Example: PurchaseOrder
Action
Quotation Example: zdisplayQuotation
Track Purchase Order Example: ztrack
Caution
Maintain here exactly the same action you have maintained in the
App Launcher as Action.
Source of the
Navigation Target
Quotation Example: ABAP Report Launchpad Report: selected
Launchpad Role
Quotation Example: <ZLPD_QUOTE>
Track Purchase Order Example: <ZLPD_PURO>
Track Purchase Order Example: ABAP Report Launchpad Report:
selected
Note
You created this role in chapter ‘Create new Launchpad’
Launchpad Instance
Quotation Example: <TRANSACTIONAL>
Track Purchase Order Example: <TRANSACTIONAL>
Application Alias
Quotation Example: <Z_MyQuotes>
Track Purchase Order Example:<Z_MM_PURORD>
Note
You created this role in chapter ‘Create new Launchpad’
Application ID
Quotation Example: <empty>
Track Purchase Order Example: <empty>
Note
Nothing needs to be maintained here.
Device Types:
Desktop
Selected for all apps
Device Types: Tablet
Selected for all apps
Device Types: Phone
Selected for all apps
Allow additional
paramenters
Selected for all apps
12. Choose Save.
13. If a Confirmation window appears, choose OK.
SAP Fiori App Extensibility
(MF8)
Configure the Custom Application on the Fiori Launchpad
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
61
Result
You have created a new tile to the catalog.
4.4
Create a New Role for the Catalog
Use
In this step, you create a role for the access to the catalog.
Procedure
1.
In SAP GUI, access the following transaction:
Transaction Code
2.
PFCG
In the Role Maintenance window, make the following entry:
Field Name
Entry Value
Role
Quotation Example: <Z_Quotation_Extended>
Track Purchase Order Example: <Z_Track_Puro_Extended>
3.
Choose Single Role. Maintain a Description.
4.
Save your entries.
5.
If requested, make the following entry:
Field Name
Entry Value
Package
<your package name> (you can use $TMP package in case you do not
want to transport this role)
6.
Choose Continue (in the role attributes window if shown).
7.
In the Create Roles or Change Roles screen, choose the Menu tab.
8.
Choose Insert Node (small arrow next to Transaction).
9.
Choose SAP Fiori Tile Catalog (or Catalog Provider depending on the SAP Gateway version). The catalog
provider Fiori Launchpad Catalogs is already selected.
10. Choose Browse (F4 value help) in the Catalog ID.
11. Choose the name of the catalog you created in the Create new Catalog section:
Field Name
Entry Value
Catalog ID
Quotation Example: <myQuotes_ext>
Track Purchase Order Example: <TrackPuro_ext>
12. Choose Continue.
13. Choose the User tab.
62
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Configure the Custom Application on the Fiori Launchpad
14. In the User ID, add the users that should have access to the catalog.
15. Choose Save.
Result
You have created a new role and given access to the catalog for the users in that role. The assigned users can now access the
created Fiori app via the Launchpad.
4.5
Add a New Tile to the Launchpad
Use
In this step, you add a new tile to the Launchpad so that you can test the extension app. You can access the Fiori Launchpad
using the following URL:
http://<Gatewayhost>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html
Procedure
1.
Open the Launchpad with your credentials.
2.
Choose Show/hide group panel.
3.
Choose the desired Group. In case you want to add the application to a new groupe select the New Group button on
the low end of the list.
4.
Choose Tile Catalog.
5.
Find your new tile.
6.
Select the Tile and assign it to the group to be added.
7.
Choose OK.
8.
The new tile is displayed now in the Launchpad.
9.
Choose the tile for the extended app.
10. The extended app is now executed.
Result
You have added the new tile to the Launchpad, and it will be available for the users who have access to it; and those users may
now access the extended app.
SAP Fiori App Extensibility
(MF8)
Configure the Custom Application on the Fiori Launchpad
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
63
5
Additional Information
You can quickly derive the SAP delivered Extension Points by calling the SAP Fiori apps reference library:
https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detailInfo
You can search here for a SAP Fiori app and check the Extensibility View. The available Extension Points and Controller Hooks
are listed here.
64
CUSTOMER
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
SAP Fiori App Extensibility
(MF8)
Additional Information
www.sap.com/contactsap
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or
for any purpose without the express permission of SAP SE or an SAP
affiliate company.
The information contained herein may be changed without prior notice.
Some software products marketed by SAP SE and its distributors contain
proprietary software components of other software vendors. National
product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for
informational purposes only, without representation or warranty of any
kind, and SAP or its affiliated companies shall not be liable for errors or
omissions with respect to the materials. The only warranties for SAP or SAP
affiliate company products and services are those that are set forth in the
express warranty statements accompanying such products and services, if
any. Nothing herein should be construed as constituting an additional
warranty.
SAP and other SAP products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of SAP SE (or an
SAP affiliate company) in Germany and other countries. All other product
and service names mentioned are the trademarks of their respective
companies. Please see www.sap.com/corporateen/legal/copyright/index.epx for additional trademark information and
notices.
Material Number: