Extend a Fiori App in Eclipse,Web IDE and launch the App in Enterprise Portal

SAP Fiori Apps are delivered by SAP taking up the best use business case.Many times based on company requirements we need to extend a Fiori App.

Fiori apps can be extended in Eclipse or Web ide .

This document provides steps to :

1. Extend a Fiori application in Eclipse

2. Extend a Fiori application in Web Ide

3. Launch the Fiori app in SAP Enterprise Portal

Note:

1. In this document I have taken the example of Purchase Requisition approval application.

2. Please check SAP service marketplace Product availability matrix to setup the system landscape, it is out of the scope of this document.

1. Extending a Fiori app via Eclipse

Prerequisites: Download and install  the Fiori toolkit and SAP UI5 tools in Eclipse.

1.1     Download the Fiori app component (MM_PR_APV) from SAP Gateway .

1.2  Create a new SAP UI5 application project in Eclipse

1.3  Unselect the option : Create an Initial View

1.4 Copy the downloaded Fiori application project under WebContent of the created SAP UI5 application project. The project structure should look like the one shown below in screenshot.

1.5   Right click on SAP UI5 application project and select New>Other>SAP Fiori Toolkit>New Extension project

1.6  You can replace the parent application ODate service with a new Odata service if required. In our case we are not replacing the parent

O data service

1.7   Once the Extension project is created we need to select the view or controller that is to be extended. To do that right click on created extended project and select New>Other>SAP FioriToolkit>New Extension.

1.8   I am  modifying the fields in S3 view therefore extending the same.

1.9   As we are adding new fields to the view, our starting point is Parent view.

1.10   Post making the code changes, you can deploy the code by right clicking on created extension project > Team>Share Project. The project will be shared on the Gateway server that is configured in the GUI installed on your system. Post share, you need to submit the Extension Project by following the same path Team>Submit.

2. Extending a Fiori app via Web IDe

Prerequisite: SAP Web ide is setup as per SAP guidelines to connect to backend SAP Gateway server.

2.1   Launch SAP Web ide.To create an extension project , select File>New>Extension Project

2.2 Select the fiori application to be extended from the SAP UI5 ABAP Repository

2.3   Select the option to open extension project in extensibility pane. The extension project will open in extensibility mode .The extensibility mode displays the screen in the form of a tree structure, you can hide or extend a field, view or extend a controller.

2.4 Once extended you can run the extended project on browser for testing .

2.5 To deploy the extended application on the Gateway ,right click on the name of the project and select Deploy>Deploy to SAPUI5 ABAP repository

2.6 The application is deployed as a BSP application.You can go to transaction SE80 in gateway and test the application.

3  Launch the Fiori App in Enterprise Portal

Prerequisite: Single Sign on between Gateway and Portal servers.

3.1   Create a fiori iView. Go to Content Admin>Portal Content>New>Iview from template. Select Fiori iView from given options.

3.2   Pass the following parameters post providing the iview name and id:

• System alias(Gateway server alias)
• Relative path for SAP Fiori application(relative path to fiori Launchpad )
• Parameters to Pass on the Location String in the URL:

Shell-runStandaloneApp?sap-ushell-SAPUI5.Component=”UI Component Name”&sap-ushell-url=”relative path to the created BSP application”

   Note: You can find UI5 component name in the index.html file of the extended fiori project, relative path to the created BSP application by testing the created BSP application from SE 80 transaction in Gateway.

In a scenario where you need to pass dynamic parameters to a Fiori application, you need to append the keyword <DynamicParameter> in the parameter sap-ushell-url.

Example URL :

Shell-runStandaloneApp?sap-ushell-SAPUI5.Component=ui.s2p.mm.requisition.approve.PurchaseRequestApprovalExtension&sap-ushell-url=/sap/bc/ui5_ui5/sap/z_approve_req

&<DynamicParameter>

3.3 Post creating the view ,open the iview properties and add the below property:

• Object id: Enter the object ID of the device group. You can find the object ID in the Device Group Manager(eg.com.sap.portal.dg.tablet;com.sap.portal.dg.smartphone;com.sap.portal.dg.desktop)

3.3 Assign the Fiori iview to a role and assign the role to a user. The user should have required authorization in Gateway as well as backend R/3 server from where the data is flowing. The Fiori application loads for the user with the assigned role:

3.4  You can setup Fiori framework/Desktop in Portal and assign the same to the user in Master rule collection.

In addition to above mentioned iview properties you need to assign the below property:

• Mobile App Categories: Specifies the category in which the iview will appear in the Fiori desktop. You can add different categories in Content Administration > Portal Content Management > Portal Content > Standard Portal Users >iViews >Fiori Launchpad >Fiori Launchpad Categories.