Skip to Content
Author's profile photo Claudia Polster

Extend a Fiori Application with SAP Web IDE Part 3

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

Replace the OData Service by an extended Service

Select your project folder and start a new wizard to replace the service (File > New > Extension)


Make sure the right project name is displayed in the text field.  Click Next.


Click on Replace Service to select the OData Service replacing wizard, and then click Next.


At wizard step 3 (Data Connection), click on Service Catalog to get all available OData Services on the SAP Gateway system.

  • Click the drop down list and select your Gateway system. The list of OData Services is being fetched.
  • Scroll down the list to display all OData Services available on the Gateway system selected.

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


Search for “poapproval” to display search and filter capabilities.

  • Expand the OData Service and show defined data collections for the OData Service ZGBAPP_POAPPROVAL_DEMO_SRV is shown here.
  • Select the relevant OData Service, ZGBAPP_POAPPROVAL_DEMO_SRV.


Scroll down to WorkflowTaskCollection and expand it

Scroll down to the end of the WorkflowTaskCollection and show that the new field DemoExtension has been added


Go back up to the list, select ZGBAPP_POAPPROVAL_DEMO_SRV and click Next


At wizard step 4, click Finish to confirm adding the extension


We will now add a text field to the UI to display the extended OData field.
Double-click the file S2_extListInfoCustom.fragment.xml in the view folder.


Paste the following code: <ObjectAttribute text=”OData Extension: {DemoExtension}”/>


The filename has a prefixed * indicating the file has been edited and not saved. Save the file.


Select the index.html file and Run the application.

You can now see the new OData field.


Extend the data model using the EDMX editor

Navigate to the project > webapp > localService folder. You may want to close all other tabs


Double-click on the file metadata.xml to open the file in the editor


Locate the EntityType with Name=”HeaderDetail” You may use the search with Ctrl-f and enter the workflowtask in the search field.


Add a new property to this EntityType:

<Property Name=”NewField” Type=”Edm.String” Nullable=”false” MaxLength=”10″ sap:label=”New Field”/>


Save the metadata.xml file.

Now, we will be adding a UI text field in the detail view to display the added New Field.

Open the file with the extension fragment in the view folder: S3Custom.view.xml
Search for NewField by pressing Ctrl-f and enter ‘newfield’


Uncomment the block that contains the New Field definition by selecting the commented block


Edit > Comment > Toggle Block Comment


Save the file.

Ensure that the URI is /sap/opu/odata/ZGBAPP_POAPPROVAL_DEMO_SRV and that the JSON files as Mock Data Source is unchecked:

  • Select project name, right mouse click, select Project Settings.
  • Click on Mock Data, verify Mock Data Source.

This will allow the system to generate data for the different data fields.



Now we will run the app with Mockdata to demonstrate that the new field is displayed by using the extended metadata.xml file.
Select the file index.html of the application. Run the app (Run > Run with Mockdata).


Verify that data has been generated


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

      Hi Claudi,

      thank you for this detailed walkthrough. I will try it tomorrow.

      Thank you for all the pictures.


      Author's profile photo Y. Mauricio Pacheco Pedraza
      Y. Mauricio Pacheco Pedraza

      Hi Claudia,

      i am implementing this post, but in my case not refresh the called service, and continue run the odata standard service

      your help please

      Author's profile photo Michael Appleby
      Michael Appleby

      Please create your own Discussion marked as a Question.

      Regards, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Y. Mauricio Pacheco Pedraza
      Y. Mauricio Pacheco Pedraza

      thanks michael,

      Author's profile photo Ignacio Cepeda
      Ignacio Cepeda

      I wonder if after more than two years since the creation of the entry will Claudi or anyone be there to answer.

      The depicted tutorial is quite clear and easy to follow. But my question is: how can you deploy the result of the extension to the ABAP UI5 system from which it has been imported, in order to replace the original standard application?

      I mean, is there any way, through Web IDE or through the GUI of the Gateway system (SE80 or SE19 transactions, perhaps) to replace the BSP application which responds to a standard one?