Extend a Fiori Application with SAP Web IDE Part 3

[former_member5235]

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
    
  
  
  • 
    Extend the data model using the EDMX editor
    
  
  

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 :smile:

See you

Claudi