Skip to Content
Author's profile photo Claudia Polster

Extend a Fiori Application with SAP Web IDE Part 2

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

Extend the App by adding a new UI field to an extension point

Highlight the application folder and start the Extensibility Pane (Tools > Extensibility Pane or Ctrl-Shift-E) if not done yet.

11 - Copy.PNG

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


Expand S2 view in the Outline and select the extension point extListItemInfo


Check that the possible extension at the bottom of the Application Outline shows Extend and click Extend View/Fragment.


Show that the extension point was successfully extended and click OKto refresh the application


Check to see that the element extListItemInfo displays (Extended). Select it and click Go to Code, Extension Code at the bottom


You are redirected back to the Code Editor and the generated extension fragment file is opened


Paste the following code:

<ObjectAttribute text=”{i18n>view.PurchaseOrder.purchaseOrderLabel}: {PoNumber}”/>


The filename has a prefixed * to indicate that the file has been edited and not saved. Click Save.


Run the app in the Extensibility Pane (Tools > Extensibility Pane)


You can now see the added purchase order number and the label in English. The value of the purchase order has been fetched from the backend. 

Check the detail view to verify the same purchase order number.


In the top bar, click on the down arrow next to the language English. Select another language, e.g. French.


Show that the language of the label has changed according to the language selected


Repeat for other languages. At the end, you may go back to English.

Extend the App by replacing a view

Select S3 view (detail view) in the Outline.

Notice the icon tab bar and remember the number of icons you can see. In the case of the screenshot, there are 2 icons (information and notes). Other POs may have other icons shown, depending on the PO data.


Select Extend and choose Replace with a copy of the parent view in the drop-down of Possible Extensions. 


On the success message, click OK.

Check the application Outline to validate that the S3 view now has the indication of (Replaced with S3Custom)


Select S3 view in the Outline (if not already selected) and click Go to Code at the bottom.

You are redirected back to the Code Editor and the copied view file opens.


You are redirected back to the Code Editor and the copied view file opens.


We will be adding more icon tabs to the tab bar.  The attached file contains the extension we want to apply. Open the file and copy the code.

Paste the code to the S3Custom.view.xml file as follow:  At line 68, you can find multiple <IconTabFilter items.  Paste all the code before the <IconTabFilter items.


Click Save to save the file.

Select the project, click Run to run the app.


Show the result.

In this particular PO, we have 2 additional icons that have been added.

At the end, you may close the Application Preview browser tab.

In the last part I will show you how you can replace a service and extend the data model using the EDMX editor.

More Web IDE stuff published by Technology RIG 🙂

See you


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Really Awesome. I am trying to add vendor name in PR Aprroval App. Any solution?

      MM_PR_APVExtension shows read only.


      Author's profile photo Former Member
      Former Member

      I'm with the same extension project. Do you have a solution or link that you can recommend? . Thanks

      Author's profile photo Laura Quinteros
      Laura Quinteros

      Hi Claudia,

      Great series of tutorials on WebIDE 🙂

      I have a general question on extension:

      Is it possible to re use a fragment in an extended view?

      I first added a field in an extension point (fragment) for view S4, now because of another requirement I have to replace view S4 and my fragment is not displayed anymore (not even changing its call in Components.js).

      I can simply add the fields manually in the replaced S4 view but I though it was possible to re use the fragments already created.


      Author's profile photo Former Member
      Former Member

      Hi Laura & Claudia,

      i have the same issue. Although i can imagine you can manually change the view with the extension-implementation that was made, it would indeed be nice to inherit the extension also in a replaced view.

      Potentially it would also save time in upgrades because less changes will need to be re-done.



      ps. Your blogs were really helpful.

      Author's profile photo Faddy Learner
      Faddy Learner

      HI Claudia,

      Thanks for sharing an exceptional information.

      Can you please let me know the deployment procedure of the extended application to ABAP repository?



      Author's profile photo Michael Appleby
      Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Michal Keidar
      Michal Keidar

      You can check out the documentation: SAP Web IDE Developer Guide

      Author's profile photo Taylor Riley
      Taylor Riley

      For those curious, you can see the available set of standard fields by looking at the metadata of the service.