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
Highlight the application folder and start the Extensibility Pane (Tools > Extensibility Pane or Ctrl-Shift-E) if not done yet.
In the application Outline section, select the Show property Extensible Elements in the drop down list
Expand S2 view in the Outline and select the extension point extListItemInfo
Check that the possible extension at the bottom of the Application Outline shows Extend and click Extend View/Fragment.
Show that the extension point was successfully extended and click OKto refresh the application
Check to see that the element extListItemInfo displays (Extended). Select it and click Go to Code, Extension Code at the bottom
You are redirected back to the Code Editor and the generated extension fragment file is opened
Paste the following code:
<ObjectAttribute text="{i18n>view.PurchaseOrder.purchaseOrderLabel}: {PoNumber}"/>
The filename has a prefixed * to indicate that the file has been edited and not saved. Click Save.
Run the app in the Extensibility Pane (Tools > Extensibility Pane)
You can now see the added purchase order number and the label in English. The value of the purchase order has been fetched from the backend.
Check the detail view to verify the same purchase order number.
In the top bar, click on the down arrow next to the language English. Select another language, e.g. French.
Show that the language of the label has changed according to the language selected
Repeat for other languages. At the end, you may go back to English.
Select S3 view (detail view) in the Outline.
Notice the icon tab bar and remember the number of icons you can see. In the case of the screenshot, there are 2 icons (information and notes). Other POs may have other icons shown, depending on the PO data.
Select Extend and choose Replace with a copy of the parent view in the drop-down of Possible Extensions.
On the success message, click OK.
Check the application Outline to validate that the S3 view now has the indication of (Replaced with S3Custom)
Select S3 view in the Outline (if not already selected) and click Go to Code at the bottom.
You are redirected back to the Code Editor and the copied view file opens.
You are redirected back to the Code Editor and the copied view file opens.
We will be adding more icon tabs to the tab bar. The attached file contains the extension we want to apply. Open the file and copy the code.
Paste the code to the S3Custom.view.xml file as follow: At line 68, you can find multiple <IconTabFilter items. Paste all the code before the <IconTabFilter items.
Click Save to save the file.
Select the project, click Run to run the app.
Show the result.
In this particular PO, we have 2 additional icons that have been added.
At the end, you may close the Application Preview browser tab.
In the last part I will show you how you can replace a service and extend the data model using the EDMX editor.
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 |
---|---|
38 | |
19 | |
13 | |
13 | |
10 | |
10 | |
10 | |
10 | |
8 | |
8 |