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 ServiceCatalog 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 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 > model 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
Claudi