Skip to Content
Author's profile photo Former Member

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 .

/wp-content/uploads/2015/04/1_691655.png

1.2  Create a new SAP UI5 application project in Eclipse

/wp-content/uploads/2015/04/2_691656.png


1.3  Unselect the option : Create an Initial View

/wp-content/uploads/2015/04/3_691657.png

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.

/wp-content/uploads/2015/04/4_691658.png

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

/wp-content/uploads/2015/04/5_691659.png

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

/wp-content/uploads/2015/04/6_691660.png

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.


/wp-content/uploads/2015/04/7_691667.png

/wp-content/uploads/2015/04/8_691668.png

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

/wp-content/uploads/2015/04/10_691670.png

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


/wp-content/uploads/2015/04/11_691672.png


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.


/wp-content/uploads/2015/04/13_691677.png

/wp-content/uploads/2015/04/13_691677.png

/wp-content/uploads/2015/04/16_691679.png

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

/wp-content/uploads/2015/04/17_691680.png

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

/wp-content/uploads/2015/04/18_691681.png


/wp-content/uploads/2015/04/19_691682.png


/wp-content/uploads/2015/04/20_691683.png


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.


/wp-content/uploads/2015/04/22_691684.png



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

/wp-content/uploads/2015/04/23_691688.png


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


/wp-content/uploads/2015/04/25_691689.png


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

/wp-content/uploads/2015/04/28_691692.png


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.


P1.png

P2.png


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>

P4.png


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)

P5.png

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:


P6.png


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.

P7.png


P8.png

Assigned Tags

      16 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sheetal Deshmukh
      Sheetal Deshmukh

      Very nice blog ! Thanks !

      Sheetal

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank you Sheetal.

      Author's profile photo Nitin Sikka
      Nitin Sikka

      Hi,

      I am new to fiori and as per your document when I try to download the standard application through /UI5/UI5_REPOSITORY_LOAD, I am not getting any thing..

      Not even any message... Can you help?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Nitin,

      Can you post a screenshot of the steps you are following.

      Please note:

      1.You have to give the application name to download it.

      2.Please check with Basis if all the required configurations are in place to enable fiori apps in Gateway.

      Regards

      Radhika

      Author's profile photo Former Member
      Former Member

      Hi,

      I have the same problem. I know is too much to ask but do you know anything about config to enable the fiori apps in Gateway? My Basis is learning too so we don't know where to start.

      Thanks for the help.

      Author's profile photo Former Member
      Former Member

      Informative blog! Simple and easy to follow.

      Thanks.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank you Ajay!!

      Author's profile photo Former Member
      Former Member

      ialready extended S3Custom.js(detail view) myinbox and displayed it through the iview in portal

      it appear as below any suggest

      when itried to debug the S3Custom it wasnot stop there

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Hi Ahmed

      If you have an issue please raise a Discussion in the forum of the Fiori space.

      You are much more likely to get an answer if you post it to the forum where many more people can help, rather than burden a single blog author.

      Rgds,

      Jocelyn

      Author's profile photo Rajesh Kumar Polavarapu
      Rajesh Kumar Polavarapu

      Hi Jocelyn,

      Ahmed asking clarification on same topic. It is not deviated to the topic extended Fiori app.

      is there any step missing for extension of Myinbox, because workitems will be extracted from ECC .

      Regards

      Rajesh

      Author's profile photo Rock Well
      Rock Well

      Hi

      I am Rock Well, I am new to fiori I have followed your steps but, I observed that there no fiori toolkit is not downloaded from my server, so pleas help me..

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Rock Well,

      You can build /extend fiori applications in SAP Web ide which is very easy to use and build applications.You will find multiple tutorials online to develop /extend fiori applications on web ide.

      Let me know if you need further details.

      Regards

      Radhika

      Author's profile photo Karthikeyan Rajendran
      Karthikeyan Rajendran

      Hello Radhika,

      Very useful information in your blog. Thanks for sharing.

      We tried to use the local installation of Web IDE but the extensibility option just hangs with blue screen in the preview mode. Have you tried using the latest local web ide and confirm that the extensbility works?

      And btw, which flavor of eclipse have you used? Did you also install the Fiori toolkit as well?

      Thanks

      Karthikeyan.

      Author's profile photo manjunatha nennavath
      manjunatha nennavath

      Hi All,

      i am newer to fiori. I have fallowed the steps which you have provided. i have downloaded the mycontact app code in eclipse and i extended it. the extended code has been submitted to BSP application.  now my question is
      1)How to run this extended application in browser ..how to get url to run in browser?
      2) I have configured standard mycontact app in fiori lanch pad, how can see the changes in launch pad?

      Author's profile photo Brian Malaka
      Brian Malaka

      Hi Guys,

      I hope to find help. I'm trying to follow this post step by step, but the problem is that I cannot find the SAP Fiori Toolkit plugin anywhere. Also, unfortunately the SAPUI5 plugins do not have the Fiori Toolkit.

      All the links that I find are dead-links. I've tried links (for SAP Fiori Toolkit Plugin) from the following sites:

      https://archive.sap.com/discussions/thread/3943837
      https://blogs.sap.com/2014/05/13/extending-a-fiori-app-simple-use-case-part-2/

      Please help.

      Regards,
      Brian

      Author's profile photo Rakesh Kumar
      Rakesh Kumar

      Hi Brian,

      SAP Fiori toolkit is no longer being used for the extension of fiori apps, and hence it’s not available and SAP has disabled it also.

      For any new extension/custom development, WEB IDE (cloud/on-premise) is recommended by SAP and i would recommend to use the same.

      Thanks,                                                                                                                                              

      Rakesh