Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 

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

Extend the App by adding a new UI field to an extension point

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.

Extend the App by replacing a view


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

8 Comments