Skip to Content
Author's profile photo Claudia Polster

Extend a Fiori Application with SAP Web IDE Part 1

In this blog, I will show you how to extend a standard SAP Fiori application (here: Purchase Order Approval)  using a SAP Web IDE. The different possibilities of extending a Fiori app view are shown:

Part 1: hide a control,

Part 2: extend by implementing an extension point & replace a view

Part 3: replace a service

Start creating a new Extension Project

+++new Version:  SAP Web IDE 1.16 +++ (for more Informations about the new Features look here  )

Start SAP Web IDE from your browser

Click on Local folder and start by creating a new extension project (File > New > Extension Project)

/wp-content/uploads/2015/03/01_814104.png

From step 1 in the wizard, click Remote…, and select SAPUI5 ABAP Repository to access the remote SAP Gateway system which has the
standard SAP Fiori PO Approval application deployed.

02.PNG

In the Select Application from SAPUI5 ABAP Repository dialog, select your SAP Gateway System.

NOTE: Please be aware that the server used in this blog is just an example, thus you may not have granted access to it.

/wp-content/uploads/2015/03/03_656676.png

All available applications on you system are shown.

/wp-content/uploads/2015/03/04_656677.png

Search for “purchase” to show search and filter capabilities

/wp-content/uploads/2015/03/05_656696.png

Select MM_PO_APV Approve Purchase Orders and click OK.

/wp-content/uploads/2015/03/06_653200.png

You may change the proposed project name to e.g. POApprovalExtended or leave it as proposed by SAP Web IDE ‘MM_PO_APVExtension’ Then click Next.

10.PNG

Check Open Extension Project in extensibility pane and click Finish.  An extension project is created in your workspace

/wp-content/uploads/2015/03/11_674349.png

If authentication is required, enter User Name and PW for your SAPGateway system.

The application Preview Pane automatically opens in Preview Mode. Once the application is loaded and the data has been fetched from the backend, you can see that the application is fully running.

04.PNG

Explore the features of the preview. Display the app in the different screen sizes. When in Small size, change the orientation.

At the end, go back to Large or Medium size.

05.PNG.

In the application Outline, select the Show property Extensible Elements in the drop down list

/wp-content/uploads/2015/03/11_674349.png

Toggle to Extensibility Mode by clicking Preview Mode down arrow. Notice that the app gets a shadow.
Hover the mouse of the controls in the app. Notice how views are highlighted and the scrolling occurs automatically.

06.PNG

Extend the app by hiding an existing control

In the app, navigate to the view S4 by scrolling down in the detail view until you see the Items table, click on an item.

Note:  You may need to toggle off Extensibility Mode, because in Extensibility Mode you cannot navigate to other views.

07.PNG

We are going to hide the Pricing Conditions in the view S4.

Make sure you are in Extensibility Mode.

Select the Pricing Condition at the bottom of the view. To highlight the control you need to point the mouse pointer to the right or left side of the table.
Alternatively, you may select in the Outline the PricingCondTable under S4.

14.PNG

Select Hide Control in the drop-down of Extend to hide it – busy indicator appears, followed by a popup message saying the extension was added successfully.

/wp-content/uploads/2015/03/09_814113.png 

Alternatively, you can right-click on PricingCondTable in the Outline and select Hide Control

/wp-content/uploads/2015/03/13_674354.png

A pop-up window appears to indicate that the control is successfully hidden. Click Yes to refresh the application.

10.PNG

Navigate to S4 view and show the control was hidden

11 - Copy.PNG

In Outline section, under Show field, drop down to select Extended Elements.  Now, you can see that under S4 element PricingCondTable is listed as Hidden.

/wp-content/uploads/2015/03/19_1_653450.png

Close the Extensibility Pane by clicking on the X on the top right

/wp-content/uploads/2015/03/19_653221.png

In the next part I will show you how you can extend an Fiori App by implementing an extension point and how you can replace a view.

More Web IDE stuff published by Technology RIG 🙂

See you

Claudi

Assigned Tags

      21 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Matthias Nott
      Matthias Nott

      Claudi,

      this is really awesome stuff! That's stuff we've been, on a different level, working on for years at Business Objects, and it allows to have a light-weight, mostly declarative approach, reducing complexity and maintenance, as well as allowing to create a whole ecosystem around apps that you build. It would be interesting to see whether you've looked at pattern matching to inject your extensions.

      Very cool stuff.

      M

      Author's profile photo Former Member
      Former Member

      Hi Claudi,

      good stuff, but can we have some more information on technical prerequisites for this task like which software is required and under what licensing, e.g. is it available through a SAP HANA Enterprise Cloud / Cloud Appliance Library?

      thx,

      greg

      Author's profile photo Claudia Polster
      Claudia Polster
      Blog Post Author

      Hi Gregory,

      please check my other blog post: http://scn.sap.com/community/developer-center/front-end/blog/2015/02/11/set-up-your-sap-web-ide-on-hana-cloud-part-1 --> Prerequisites

      You can use a Hanatrial account 🙂

      More  documents about WEB IDE you can find here http://scn.sap.com/docs/DOC-55465

      Regards

      Claudi

      Author's profile photo Former Member
      Former Member

      Nice blog Claudia 🙂 . It was very helpful.

      Author's profile photo JULIAN BELLARMIN
      JULIAN BELLARMIN

      Nice blog...can easily understandable....Very helpful...............

      Regards,

      Julian.

      Author's profile photo Pavan Golesar
      Pavan Golesar

      Wow, nice Blog...

      Thanks

      --PavanG

      Author's profile photo Former Member
      Former Member

      Thank for this nice blog.

      Kind regards, Henning

      Author's profile photo Former Member
      Former Member

      Nice blog! I'm running into a problem though. I have just created the following question on the SAP UI5 Developer center forum. Do you know how I can solve it?

      Br

      Göran

      Author's profile photo Merve Gül
      Merve Gül

      Hello everyone,

      It is a very nice and useful blog. I found the blog when I came across a problem about replacing service. I applied all the steps in this blog but still couldnt find a solution.

      Kindly, can somebody look through my post and help me about my problem?

      Replace service does not work - WEB IDE

      Thank you so much!

      Merve

      Author's profile photo Sam Sam
      Sam Sam
      Author's profile photo JULIAN BELLARMIN
      JULIAN BELLARMIN

      Excellent Blog claudi..

      Regards,

      Julian.

      Author's profile photo Bhuvnesh Kumar Gupta
      Bhuvnesh Kumar Gupta

      Hello Guys,

      I have selected the service and opened project in extensiblity pane but no data is displaying , What I need to do to get the data fro bakend.

      Author's profile photo Claudia Polster
      Claudia Polster
      Blog Post Author

      can you run the app?

      Author's profile photo SAP Learner
      SAP Learner

      Hello Claudia,

      You have explained it with excellence. Everything is very clear with detailed screen shot. Thanks for writing such a great blog..

      I have a small issue while doing this excercise in my system. I am able to import MM_PO_APV to my Web IDE. However, I got the following error message while opening it in Extensibility Pane.

      Cmoponent.jpg

      Then I tried to reach the link /sap/opu/odata/SAP/GBAPP_POAPPROVAL;mo/ using browser. However, it does not see available as I got the following response

      <code>/IWFND/MED/170</code>

      <message xml:lang="en">

      No service found for namespace , name GBAPP_POAPPROVAL, version 0001

      </message>


      I could not see this service in SICF as well. I think I am missing some basic things. Can you tell me what should I do?


      Please note that I am able see the BSP application mm_po_apv in SE80.


      Regards,

      Faddy


      Author's profile photo Michael Hu
      Michael Hu

      Hi Claudi,

      Thank you for this wonderful blog, but I have a problem with you can help.

      How can I deploy the extension project which I've finished in Web IDE to Gateway system? I've tried to deploy with "update an existing application" option, however, it'll only upload a few files like the manifest.json etc. then deleting all the xml views and js controller files as shown in the picture.

      I can go to SE80 and change the manifest.json file at Gateway system manually, but I guess that must be the stupidest way to do it.

      /wp-content/uploads/2016/08/01_1026392.jpg

      I've also tried to create the extension project with "import original application" option, but there were no application files (xml view js controller files etc.) loaded.

      /wp-content/uploads/2016/08/02_1026393.jpg

      Any help would be appreciated, thank you Claudi!

      Regards,

      Michael

      Author's profile photo Punith Babu
      Punith Babu

      Hi Michael,

      Create an Extension application in WebIDE and this you can (create/update) to Gateway system.

      However do no bother at application files (xml view js controller files etc.) in extension application as these will be loaded form parent application with below code written in component.js of extension application.



      Extended_Component.jpg

      Regards,

      Punith

      Author's profile photo Michael Hu
      Michael Hu

      Hi Punith,

      Thank you for your helpful information, I was too stupid to figured it out the right way to do so.

      Regards,

      Michael

      Author's profile photo Rohitash Sharma
      Rohitash Sharma

      Hello All,

      Thanks you for this blog.

      I have extended the standard app SOFULFIL_MONS1 by replicating the steps mentioned above.

      I have replaced the view SO_ALL and have added 3 new additional columns.

      I have also replaced the oData service with custom Odata so that the new columns gets populated.

      Problem:
      I had manually added my new fields in the query set of file component-preload.js and added in the extension.

      In extensibilty pane I can see the data.

      When i Try to deploy the application through web ide, it gives me a time out error because of the file.
      Also, when I remove this file, the deploy is succesful but I cannot see the changes in the app.

      What am I missing here?

      Regards,
      R

      Author's profile photo tisha dharod
      tisha dharod

      Hello Claudia ,

       

      Thanks for the informative blog . I am trying to create new extension project for MM_PR_APV . I am getting the below error . Could you please help me resolving this issue ?

       

      Author's profile photo Former Member
      Former Member

      Hi,

       

      When i'm triying to add a new extension i'have this error : Cannot read property 'name' of undefined.

      Until August  i had no problem with it.

       

       

      Regards,

      Driss

      Author's profile photo Soham Kulkarni
      Soham Kulkarni

      Hi Experts,

      Post creating extension project, what will be the deployment steps? Do we need any further steps for deployment of extension project to ABAP repository? What needs to be done in case the standard application is already deployed on Fiori launchpad?

      Need some information regarding changes/amendments that needs to be done in-terms of launchpad tile configuration.

      Thank You.