Skip to Content

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)

/wp-content/uploads/2015/03/31_813303.png

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

/wp-content/uploads/2015/03/44_656047.png

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

32.PNG

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.

/wp-content/uploads/2015/03/46_656058.png

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.

/wp-content/uploads/2015/03/47_656059.png

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

/wp-content/uploads/2015/03/48_656060.png

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

/wp-content/uploads/2015/03/49_656061.png

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

/wp-content/uploads/2015/03/50_656062.png

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.

35.PNG

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

36.PNG

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

37.PNG

Select the index.html file and Run the application.

You can now see the new OData field.

38.PNG

Extend the data model using the EDMX editor

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

39.PNG

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

49.PNG

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

41.PNG

Add a new property to this EntityType:

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

/wp-content/uploads/2015/03/59_656205.png

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’

42.PNG

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

43.PNG



Edit > Comment > Toggle Block Comment


44.PNG


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.

/wp-content/uploads/2015/03/45_813338.png

46.PNG

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).

/wp-content/uploads/2015/03/47_656059.png

Verify that data has been generated


48.PNG


More Web IDE stuff published by Technology RIG 🙂

See you

Claudi

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply