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
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.
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.
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.
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:
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
20 | |
10 | |
9 | |
7 | |
7 | |
7 | |
6 | |
5 | |
5 | |
5 |