building block configuration guide sap fiori apps rapid-deployment solution

Building Block Configuration GuideSAP Fiori apps rapid-deployment solutionDocument Version: 1.0 – 2015-12-15

CUSTOMER

SAP Fiori App Extensibility (MF8)

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.

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, F2 or ENTER .

2

Customer © 2014 SAP SE or an SAP affiliate company. All rights reserved.

SAP Fiori App Extensibility 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 Table of Contents

CUSTOMER© 2014 SAP SE OR AN SAP AFFILIATE COMPANY. ALL

RIGHTS RESERVED. 3

Table of Contents

1 Purpose 5

2 Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE 62.1 Prerequisites 62.2 Check and Activate HTTP Service in SAP Gateway System 72.3 Configure SAP Web IDE 72.4 Extend Track Purchase Orders App 8

2.4.1 Create Extension Project for Track Purchase Orders App92.4.2 Hide Title Field 92.4.3 Hide Field on SAP Fiori Screen by Code Modifications 112.4.4 Change Label (Usage of Language File) 132.4.5 Change Label (View Replacement) 152.4.6 Add Field Showing Item Type Description 172.4.7 Replace View 202.4.8 Test your Extension in SAP Web IDE 222.4.9 Deploy Extension Project 23

3 Extend SAP-Delivered Standard Fiori Applications using Eclipse IDE 253.1 Prerequisites 253.2 Download the SAP-Delivered Standard Fiori Application from the ABAP System26

3.2.1 Retrieving the Fiori App Name 263.2.2 Retrieving the Fiori App 27

3.3 Import the SAP-Delivered Standard Fiori Application on Eclipse 283.3.1 Create the Application Project 283.3.2 Import the Downloaded Application to the Eclipse Project 29

3.4 Extend OData Service 293.4.1 Extend ABAP DDIC Structure Using an Append Structure 313.4.2 Extend OData Service 333.4.3 Test the Extended OData Service 37

3.5 Extend SAP-Delivered Standard Application 383.5.1 Create the Extension Application Project 383.5.2 Change a Field Label 393.5.3 Hide a Field 423.5.4 Implement the View Extension (Add Fields) 443.5.5 Implement a View Replacement50

3.6 Upload the Custom Application to the ABAP System 533.6.1 Upload the Fiori App 53

4 Configure the Custom Application on the Fiori Launchpad 554.1 Create a New Launchpad 554.2 Create a New Catalog 574.3 Create a New Tile in the Catalog 584.4 Create a New Role for the Catalog 614.5 Add a New Tile to the Launchpad 62

4



5 Additional Information63



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 fieldo add a field to the UI – including the required extensions on backend and frontend server

(ODATA extensions).o change the sequence of fieldso 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.

NoteThe 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


SAP Fiori App Extensibility Additional Information

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.

ExampleThe 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.

NoteThis 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 Configure the Custom Application on the Fiori Launchpad


RIGHTS RESERVED. 7

http://help.sap.com/fiori

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.

Procedure1. 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)

NoteThis 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



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.

NoteWhen 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.



RIGHTS RESERVED. 9

http://scn.sap.com/docs/DOC-55882

http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/004f38ec-b5d6-3110-67b0-df30d3257c04?QuickLink=index&overridelayout=true&59575491499406

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.

Procedure1. 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. In the list of applications, choose the following entry:

Application Description

MM_PURORD_TPO TPO Upload Wave 2

7. 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.

10



CautionAccording 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.

Procedure1. 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.

CautionBoth 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.



RIGHTS RESERVED. 11

NoteYou 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.

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.

Procedure1. 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’.

12



Code before change <Label text="{i18n>XFLD_Material}"/>

Code after change <Label visible='false' text="{i18n>XFLD_Material}"/>

11. In the code for POItemCustom.view.xml change the visible attribute of the text for field Material ID to ‘false’.

Code before change <Text text="{MaterialID}"/>D DescriptionCode 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.



RIGHTS RESERVED. 13

NoteYou can quickly check the result in the preview by navigating via the menu Tools -> Extensibility Pane.

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.

Procedure1. Open SAP Web IDE.2. Select the extension project MM_PURORD_TPOExtension.3. Choose File → New → Folder.4. Enter the Folder Name

Folder name i18n

5. Select the created folder i18n.6. Choose File → New → File

File name i18n_custom_xx.properties

(replace xx with the language needed, for example de for Germany or en for English)

CautionMake 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.

14



9. In the code for Component.js change code as follows:

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.



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.

CautionSince 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.

Procedure1. Open SAP Web IDE.2. Select the extension project MM_PURORD_TPOExtension.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.

16



Code before change <Label text="{i18n>XFLD_Plant}"/>D DescriptionCode after change <Label text="Delivering Plant"/>D}"/>


Syntax

14.

Choose Save.

NoteThis 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.

Result

You have changed the label of a field on the purchase order item details screen.



RIGHTS RESERVED. 17

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.

ExampleIn 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.

Procedure1. 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

18



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.


Code to be added <layout:VerticalLayout>

<Text text="{Description}" textAlign="Right"/>

</layout:VerticalLayout> Description

Syntax



RIGHTS RESERVED. 19

15. Choose Save.

2.4.7Re

place 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

20



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.

NoteIn 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.

Procedure1. 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.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.



RIGHTS RESERVED. 21

Code before change sap.ui.controller("ui.s2p.mm.purord.tracking.MM_PURORD_TPOExtension.view.S2Custom", {

// sFilterLastNDays: 7,

// sFilterWithAlerts: false,

// sSearchText: "",

// sFilterKey: "FILTER7", // oFilterDialog: null,

// onInit: function() {

Code after change sap.ui.controller("ui.s2p.mm.purord.tracking.MM_PURORD_TPOExtension.view.S2Custom", {

sFilterLastNDays: 30,

// sFilterWithAlerts: false,

// sSearchText: "",

sFilterKey: "FILTER30",

// oFilterDialog: null,

onInit: function() {

Code before change //

this.oFilterDialog.setSelectedPresetFilterItem("FILTER7");

// }

Code after changethis.oFilterDialog.setSelectedPresetFilterItem("FILTER30");

}

After you have made the changes the relevant sections of coding are as follows

Syntax

....

22



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.

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.



RIGHTS RESERVED. 23

Procedure1. Open SAP Web IDE.2. Select the extension project MM_PURORD_TPOExtension 3. Select the file index.html.4. Choose Run → Run.

NoteIf 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.

NoteThe usage of a Git repository is not part of this document.

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.

NoteWithin 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.

24



Procedure1. 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 Extension8. Choose a valid package to add the changes to an existing transport request or choose $TMP for a

local object in the ABAP Repository.

CautionIn 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 Navigator13. 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.

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.



RIGHTS RESERVED. 25

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 installedo SAPUI5 plugin version 1.16.4 or higher for Eclipse. For details, check

https://tools.hana.ondemand.com/#sapui5o Tomcat local webserver (only for local testing). The recommended

versions of Tomcat are 7.0 or higher.

NoteThe 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.

NoteThis 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.

26



http://help.sap.com/fiori

https://tools.hana.ondemand.com/#sapui5

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:


16. Select Repository Browser.17. Select BSP Application from the drop-down menu.18. Enter a search value using * as wildcard.

NoteWithin this document, the SAP Fiori app My Quotation is used as an example. Hence, enter *quot* in the input field.

19. Choose the triangle shaped button.20. The result list shows up.

NoteThe 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.



RIGHTS RESERVED. 27

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:


21. Choose Enter.22. On the Initial Screen, make the following entry:

Field Name Entry Value

Program /UI5/UI5_REPOSITORY_LOAD

23. Choose Execute.24. Enter the name of the application:


Name of SAPUI5 Application

<your application name> (for example, SD_MYQUOTES)

25. Choose Download option.26. Choose Execute.27. In the Browse For Folder pop-up, choose Make New Folder.28. Change the name and location of the folder where you want to save the app.29. Choose OK.30. If a pop-up window appears, choose Allow.31. Scroll down to the bottom of the page.32. Double-click the Click here to Download text.33. If a pop-up window appears asking for External Codepage, choose Continue.34. If you get an error, make the following entry:


External Codepage Cp1252

35. If an SAP GUI Security pop-up window appears, select Remember My Decision and choose Allow.

36. 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.

28



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.37. Choose File → New → Project.38. Select SAPUI5 Application Development.39. Select Application Project.40. Choose Next >.41. In the New Application Project window, make the following entry:


Project name <name of the app> (for example, SD_MYQUOTES)

42. Select Use default location.43. Select Mobile (or sap.m) in Target Device (or Library).44. Remove selection from Create an Initial View.45. Choose Finish.

Result

You have created an SAPUI5 application project.



RIGHTS RESERVED. 29

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.46. In the Project Explorer on the left, select the project <project name> (for example,

SD_MYQUOTES).47. Expand project.48. Right-click the WebContent folder.49. Choose Import….50. In the Import window, select General → File System.51. Choose Next >.52. Choose Browse… in the From directory: field.53. Select the folder where the content of the downloaded app is (used in step Retrieving the SAP Fiori

App).54. Choose Ok.55. Choose Select All.56. 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:

30



Procedure

Example1: ‘Title’ for the Partner Function ‘Ship-to party1. 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

57. Open a quotation and navigate via the menu: Goto Header Partner.58. Select the partner function Ship-to party.59. 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

60. Open a quotation and navigate via the menu: Goto Header Billing.61. The fields Incoterms are used as second example:



RIGHTS RESERVED. 31

CautionThis 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)’.

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.

NoteThis step is carried out in the back-end system.

Procedure



62. Choose Enter.63. Choose Repository Browser.64. From the dropdown, choose Package.65. Choose the arrow button.66. Choose the Information System button.67. Make the following entry:


Package ERP_SD_ODATA*

68. Choose Execute.69. Select package ERP_SD_ODATA_MYQUOTATION and double-click it.70. On the left side, choose Dictionary Objects → Structures.

Example1: Title1. Double-click the option TDS_ODATA_QUOTATION_PARTNER_IN.71. Choose the Append Structure… button on top.72. In the Create Append Structure for TDS_ODATA_QUOTATI… window, make the following entry:

32




Append Name Z<your append structure name> (for example, Z00_PARTNER_EXT)

73. Choose Continue.74. Enter a Short Description.75. Make the following entry:


Component TITLE_T

Typing Method Types

Data Type CHAR

NoteYou need to choose the Predefine Type button to change this.

Length 25

76. Choose Save.77. Choose your Package. In case you do not want to transport, you can use package $tmp.78. Choose Save.79. Choose Activate to activate the append structure.80. Choose Back.

Example2: Incoterms1. Double-click the option TDS_ODATA_QUOTATION_HEADER_INC.81. Choose the Append Structure… button on top.82. In the Create Append Structure for TDS_ODATA_QUOTATI… window, make the following entries:


Append Name Z<your append structure name> (for example, Z00_HEADER_EXT)

83. Choose Continue.84. Enter a Short Description.85. Make the following entries:


Component INCO1

Typing Method Types

Component Type INCO1

86. Enter a second line for the long text of the incoterms:



RIGHTS RESERVED. 33


Component INCO2

Typing Method Types

Component Type INCO2

87. Choose Save.88. Choose your Package. In case you do not want to transport, you can use $tmp.89. Choose Save.90. Choose Activate to activate the append structure.91. 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


Transaction Code /NSEGW

92. Choose Enter.93. Choose Create Project.94. In the Create Project window, make the following information entries:


Project <your project name> (for example Z_LORD_MY_QUOTATION)

NoteThe project name Z_LORD_MY_QUOTATION is used in the following example.

Description <your description> (for example: My Quotations Extended OData Service)

34




Package <your Package name> (in case you do not want to transport you can use $tmp)

95. Choose Continue.96. Select your project and choose the Display <-> Change button for edit mode.97. If prompted choose Yes to save.98. 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:


Technical Service Name LORD_MY_QUOTATION_SRV

Version 0001

99. Choose Next.100. Choose Select All in the top left.101. Choose Finish.

Example1: Title1. In your new project, expand Data Model, Entity Types and Partner.102. Double-click the Properties.103. Choose Display <-> Change button for edit mode.104. Choose Append Row.105. Make the following entries:


Name Title

Edm Type Edm.String

CautionChoose value helper button, select Edm.String and choose Copy.

Max Length 25

Label Title

ABAP Field Name TITLE_T

CautionChoose value helper button, select TITLE_T and choose Copy.

106. Choose Check Project Consistency on the top left to check for errors.



RIGHTS RESERVED. 35

Example2: Incoterms1. In your new project, expand Data Model, Entity Types and QuotationHeader.107. Double-click the Properties.108. Choose Display <-> Change for edit mode.109. Choose Append Row.110. Make the following entries:


Name Inco1

Edm Type Edm.String

CautionChoose the value helper button, select Edm.String and choose Copy.

Max Length 3

Label Inco1

ABAP Field Name INCO1

CautionChoose the value helper button, select INCO1 and choose Copy.

111. Append a second line:


Name Inco2

Edm Type Edm.String

CautionChoose the value helper button, select Edm.String and choose Copy.

Max Length 28

Label Inco2

36




ABAP Field Name INCO2

CautionChoose 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.112. Choose Generate Runtime Objects.113. Choose Continue.114. Choose your Package. In case you do not want to transport, you can use $tmp.115. Choose Save.116. Expand folder Runtime Artifacts in your project.117. Double-click ZCL_Z_LORD_MY_QUOTAT_MPC_EXT.118. In the right screen area, double-click the ZCL_Z_LORD_MY_QUOTAT_MPC_EXT.119. Expand Methods -> Inherited Methods in the navigation area.120. Right-click DEFINE and select Redefine.121. Select the Redefinitions and double-click DEFINE.122. In the content, insert the following code:

Example1: Title

Syntaxmethod 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.

123. Choose Check.124. Choose Save.125. Choose Activate.



RIGHTS RESERVED. 37

126. Choose Continue.127. To register the OData service in SAP GUI, access the following transaction:

Transaction Code /NSEGW

128. Expand your project and Service Maintenance.129. Double-click LOCAL.130. Choose Register.131. Choose Yes if a pop-up window appears.132. Choose your Package. In case you do not want to transport, you can use $tmp.133. Choose Continue.

Result

You have now extended the OData service, and the fields are now part of your service.

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

134. Carry out the following steps:

135. Double-click the service in the list you have created in the previous step.136. Choose Gateway Client.137. In the line Request URI replace ?format=xml with the following text:

Example 1: TitleQuotationHeaderSet('<your QuotationID>')?$expand=PartnerSetExample 2: IncotermsQuotationHeaderSet('<your QuotationID>')

138. Choose Execute.

38



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.

CautionYou must create this extension application project for all the scenarios described below.

Procedure

1. Open Eclipse.139. Choose File → New → Project.140. Select SAPUI5 Application Development.141. Select Application Project.142. Choose Next >.143. In the New Application Project window, make the following entries:


Project name <name of the app> (for example, Z_SD_MYQUOTES)

144. Select Use default location.145. Select Mobile (or sap.m) in Target Device (or Library).146. Remove the selection from Create an Initial View.147. Choose Finish.148. In the project folder, select the WebContent folder, choose the right-button and choose New →

File.149. In the New File window, make the following entry:


File name Component.js



RIGHTS RESERVED. 39

150. Choose Finish.151. In the content of the file, insert the following code:

SyntaxjQuery.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:{

}

});

152. Choose Save.

NoteThe 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.

40



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.

153. From the menu, choose Edit → Find/Replace…154. In the Find/Replace window, make the following entry:


Find: ship

155. Choose Find.156. The Label for ship to is the result. Note down the following code for further use:

#XFLD, 10: Label for ship toSHIPTO=Ship-To Party

157. 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.

158. In the New Folder window, make the following entry:


Folder name i18n

159. Choose Finish.

NoteThis is the language folder where the different languages for the extentions are maintained.

160. In the i18n folder, choose the right button and choose New → File.161. In the New File window, make the following entry:


File name i18n_custom.properties

162. Choose Finish.

CautionIn this example, the content of the file remains empty (change of an existing field label).

163. Choose Save.164. 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.



RIGHTS RESERVED. 41

165. In the New File window, make the following entry:


File name i18n_custom_xx.properties (replace xx with the language needed, for example de for Germany or en for English)

CautionMake sure that you use small characters!

166. Choose Finish.167. In the content of the created language file, insert the following code:

Syntax

#XFLD, 20: Label for ship-to addressSHIPTOADDRESS=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)

168. Choose Save.

NoteRepeat these steps for all the languages needed.

169. Open the Component.js file.170. 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:{

42



"sap.ca.i18Nconfigs":{"bundleName":"zcus.sd.myquotations.i18n.i1

8n_custom"},"sap.ca.serviceConfigs":[{

name:"lord_my_quotation_srv",serviceUrl:"

/sap/opu/odata/sap/LORD_MY_QUOTATION_SRV",isDefault:true

}]}

}});

171. 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:

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:



RIGHTS RESERVED. 43

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.

172. From the menu, choose Edit → Find/Replace…In the Find/Replace window, make the following entry:


Find: id (Find the id of the element that you want to change)

173. Choose Find.174. Get the name of the id. In this example, the expirationDate is used later.

Choose Close (to close the Find/Replace window).175. In the extension project folder (created in chapter Create the Extension Application Project),

select the folder WebContent, open the file Component.js.176. In the content of the file, inside the metadata tag, insert the following code:

SyntaxjQuery.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 : {

44



"customizing" :{"sap.ui.viewModifications" : {

"cus.sd.myquotations.view.Master" : {"expirationDate" : {

"visible" : false},

}},

}, }})

177. Choose Save.

CautionYou have now hidden the field expirationDate from the original SAP-delivered master view.The app will look like as displayed in the following screenshot:

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.



RIGHTS RESERVED. 45

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.

178. From the menu, choose Edit → Find/Replace…179. In the Find/Replace window, make the following entry:


Find: ExtensionPoint

180. Choose Find.181. Get the name of the ExtensionPoint (for example extQuotationDetailsInfoTop) for later use.

NoteThis extension point is connected to the information area of the app.

182. Choose Close (to close the Find/Replace window).183. In the extention project folder (created in chapter Create the Extension Application Project),

select the folder WebContent, right-click, and choose New → Folder.184. In the New Folder window, make the following entry:


Folder name view

185. Choose Finish.186. In the view folder, right-click and choose New → File.187. In the New File window, make the following entry:


File name extQuotationDetailsInfoTop.fragment.xml

188. Choose Finish.189. 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}" />

46



<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>

190. Choose Save.

CautionYou have now created an extension of the original SAP delivered view.

191. In the WebContent folder, right-click and choose New → Folder.192. In the New Folder window, make the following entry:


Folder name i18n

193. Choose Finish.

CautionThis 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.

194. In the i18n folder, right-click and choose New → File.195. In the New File window, make the following entry:


File name i18n_custom.properties

196. Choose Finish.

CautionIn case you have carried out the steps in the previous chapter Change a Field Label, this file was already created.



RIGHTS RESERVED. 47

197. In the content of the file insert the following code:

Example 1: Title

Syntax

EXT_TITLE=Title


Syntax

INCO1=Inco1INCO2=Inco2

198. Choose Save.199. After this step, you must create the custom properties files for all the languages needed. See

these steps next.200. In the i18n folder, right-click and choose New → File.In the New File window, make the following entry:


File name <i18n_custom_XX.properties> (replace XX with the language needed, for example de for Germany)

NoteMake sure you use small characters!

201. Choose Finish.

NoteIn case you have carried out the steps in the previous chapter Change a Field Label, this file was already created.

202. In the content of the file insert the following code:Example 1: Title

48



Syntax

EXT_TITLE=XXXXXX

Note(replace the XXXXXX for the property in the language of the selected file)


Syntax

INCO1=Inco1INCO2=Inco2

Note(replace the values Inco1 and Inco2 for the property in the language of the selected file)

203. Choose Save.

NoteRepeat these steps for all the languages needed.

204. Open the Component.js file.205. 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",{



RIGHTS RESERVED. 49

metadata:{"customizing":{

"sap.ui.viewExtensions":{"cus.sd.myquotations.view.S3":{

"extQuotationDetailsInfoTop":{

className:"sap.ui.core.Fragment",fragmentName:"zcus.sd.myquotations.view.ext

QuotationDetailsInfoTop",type:"XML"

}}

}

},config:{

"sap.ca.i18Nconfigs":{"bundleName":"zcus.sd.myquotations.i18n.i18

n_custom"},"sap.ca.serviceConfigs":[{

name:"lord_my_quotation_srv",

serviceId:"/sap/opu/odata/sap/Z_LORD_MY_QUOTATION_SRV",isDefault:true

}]}

}});

NoteThe 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.

206. Choose Save.

Result

You have added a field to the original app with an extension app.

50



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.

NoteSince 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.

NoteAs 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.

207. In the New Folder window, make the following entry:



RIGHTS RESERVED. 51


Folder name view

208. Choose Finish.209. In the view folder, press the right button and choose New → File210. In the New File window, make the following entry:


File name Z_S3.view.xml

211. Choose Finish.212. In the content of the file, you copy the complete coding of the S3.view.xml from the original

app.

NoteThe 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.

213. The following coding explains two different small cases.Example 1: Change sequence of fieldsHere 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'}], 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:

52



Example 2: Hiding the item tableHere 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>

214. Choose Save.

NoteYou have now created a replacement of the original SAP delivered view.

215. In the extension project folder (created in chapter Create the Extension Application Project), select the folder WebContent , open the file Component.js.

216. In the content of the file, inside the customizing tag, insert the following code:

Syntaxcus.sd.myquotations.Component.extend("zcus.sd.myquotations.Component", {metadata : {

"customizing" : {"sap.ui.viewReplacements" : {



RIGHTS RESERVED. 53

"cus.sd.myquotations.view.S3" : {viewName :

"zcus.sd.myquotations.view.Z_S3",type : "XML"}

}, }, }});

217. Choose Save.

NoteYou 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



218. Choose Enter.

219. On the Initial Screen, make the following entry:


Program /UI5/UI5_REPOSITORY_LOAD

220. Choose Execute.221. Enter the name of the application:

54




Name of SAPUI5 Application

<Z_SD_MYQUOTES>

222. Choose Upload option.223. Choose Execute.224. In the Browse For Folder pop-up, choose the WebContent folder from your project.225. Choose OK.226. Scroll down to the bottom of the page.227. Choose the Click here to Upload text.228. If a pop-up window appears, choose Allow.229. In the pop-up window, make the following entries:


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

230. Choose Continue.231. If you are asked for a developer code, enter the requested code.232. If a SAP GUI Security pop-up window appears, select Remember My Decision and choose Allow.233. 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.



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.234. Select the file Component.js. 235. Keep this modus open for further references.3. In SAP GUI, access the following transaction in a new modus:

Transaction Code LPD_CUST

236. Choose Enter.

237. Choose New Launchpad.238. In the Enter Values for a New Launchpad enter the following information (leave the fields not

mentioned as is):


Role Quotation Example: <ZLPD_QUOTE>Track Purchase Order Example: <ZLPD_PURO>

Instance TRANSACTIONAL

56




Description Quotation Example: <Extended Sales Order Quot>Track Purchase Order Example: <Extended TrPuRo>

239. Choose Continue.240. If the Namespace required? window appears, choose Yes.241. Choose New Application and make the following entry:


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>

NoteThe 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>

NoteThe 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.

CautionChoose the Edit icon next to the URL field.

242. Choose the Show Advanced (Optional) Parameters option and make the following entry:


Application Alias Quotation Example: <Z_MyQuotes>Track Purchase Order Example:<Z_MM_PURORD>

NoteThe application alias can be chosen as you want. However – this parameter is used later during Catalog creation.



RIGHTS RESERVED. 57


Additional Information Quotation Example: SAPUI5.Component=zcus.sd.myquotations

Track Purchase Order Example:SAPUI5.Component= ui.s2p.mm.purord.tracking.MM_PURORD_TPOExtension

NoteYou 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

243. 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.

58



Procedure

1. 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

244. If prompted, enter your User Name and Password and choose Log In.245. Select Catalogs to get the list of catalogs displayed

246. Choose the button to create a new Catalog.247. Select Standard in the displayed pop up window.248. In the Create Catalog window, make the following entry:


Title Quotation Example: <myQuotes_ext>Track Purchase Order Example: <TrackPuro_ext>

ID Quotation Example: <zmyQuotes_ext>Track Purchase Order Example: <zTrackPuro_ext>

CautionYou need this value later, so keep it in mind.

249. 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

250. If prompted, enter your User Name and Password and choose Log In.251. Choose Catalogs.252. Choose your catalog in the catalogs list on the left you have created in the previous step.



RIGHTS RESERVED. 59

253. Choose button Add Tile.254. Depending on the app you are working on select the following option:


App Launcher - Dynamic

Quotation Example: Select this option

App Launcher - Static Track Purchase Order Example: Select this option

255. Maintain the following values:


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>

NoteThis 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: 0Track 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: SelectedTrack Purchase Order Example: Selected

Semantic Object Quotation Example: SalesQuotationTrack Purchase Order Example: PurchaseOrder

Action Quotation Example: zdisplayQuotationTrack Purchase Order Example: ztrack

CautionAs action please create a new one for each app created in the system.

256. Save your settings.

257. Choose button.

60



258. Choose Create Target Mapping.259. Make the following entries:


Semantic Object Quotation Example: SalesQuotationTrack Purchase Order Example: PurchaseOrder

Action Quotation Example: zdisplayQuotationTrack Purchase Order Example: ztrack

CautionMaintain 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

Track Purchase Order Example: ABAP Report Launchpad Report: selected

Launchpad Role Quotation Example: <ZLPD_QUOTE>Track Purchase Order Example: <ZLPD_PURO>

NoteYou 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>

NoteYou created this role in chapter ‘Create new Launchpad’

Application ID Quotation Example: <empty>Track Purchase Order Example: <empty>

NoteNothing 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



RIGHTS RESERVED. 61

260. Choose Save.261. If a Confirmation window appears, choose OK.

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


Transaction Code PFCG

262. In the Role Maintenance window, make the following entry:


Role Quotation Example: <Z_Quotation_Extended>Track Purchase Order Example: <Z_Track_Puro_Extended>

263. Choose Single Role. Maintain a Description. 264. Save your entries. 265. If requested, make the following entry:


Package <your package name> (you can use $TMP package in case you do not want to transport this role)

266. Choose Continue (in the role attributes window if shown).267. In the Create Roles or Change Roles screen, choose the Menu tab.268. Choose Insert Node (small arrow next to Transaction).269. Choose SAP Fiori Tile Catalog (or Catalog Provider depending on the SAP Gateway version).

The catalog provider Fiori Launchpad Catalogs is already selected.270. Choose Browse (F4 value help) in the Catalog ID.271. Choose the name of the catalog you created in the Create new Catalog section:

62




Catalog ID Quotation Example: <myQuotes_ext>Track Purchase Order Example: <TrackPuro_ext>

272. Choose Continue.273. Choose the User tab.274. In the User ID, add the users that should have access to the catalog.275. 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.276. Choose Show/hide group panel.277. 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.278. Choose Tile Catalog.279. Find your new tile.280. Select the Tile and assign it to the group to be added. 281. Choose OK.282. The new tile is displayed now in the Launchpad.283. Choose the tile for the extended app.284. The extended app is now executed.



RIGHTS RESERVED. 63

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.

64



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.



RIGHTS RESERVED. 65

https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detailInfo

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/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

Material Number:

http://www.sap.com/corporate-en/legal/copyright/index.epx

building block configuration guide sap fiori apps rapid-deployment solution

Documents