Skip to Content

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.

11 - Copy.PNG

In the application Outline section, select the Show property Extensible Elements in the drop down list

13.PNG

Expand S2 view in the Outline and select the extension point extListItemInfo

14.PNG

Check that the possible extension at the bottom of the Application Outline shows Extend and click Extend View/Fragment.

/wp-content/uploads/2015/03/14_814042.png

Show that the extension point was successfully extended and click OKto refresh the application

15.PNG

Check to see that the element extListItemInfo displays (Extended). Select it and click Go to Code, Extension Code at the bottom

/wp-content/uploads/2015/03/03_732089.png

You are redirected back to the Code Editor and the generated extension fragment file is opened

17.PNG

Paste the following code:

<ObjectAttribute text=”{i18n>view.PurchaseOrder.purchaseOrderLabel}: {PoNumber}”/>

18.PNG

The filename has a prefixed * to indicate that the file has been edited and not saved. Click Save.

19.PNG

Run the app in the Extensibility Pane (Tools > Extensibility Pane)

/wp-content/uploads/2015/03/20_814050.png

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.

21.PNG

In the top bar, click on the down arrow next to the language English. Select another language, e.g. French.

/wp-content/uploads/2015/03/22_814067.png

Show that the language of the label has changed according to the language selected

23.PNG

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.

24.PNG

Select Extend and choose Replace with a copy of the parent view in the drop-down of Possible Extensions. 

/wp-content/uploads/2015/03/17_814047.png

On the success message, click OK.

Check the application Outline to validate that the S3 view now has the indication of (Replaced with S3Custom)

/wp-content/uploads/2015/03/35_654292.png

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.

/wp-content/uploads/2015/03/04_732069.png

You are redirected back to the Code Editor and the copied view file opens.

27.PNG

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.

28.PNG

Click Save to save the file.

Select the project, click Run to run the app.

29.PNG

Show the result.
30.PNG

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 🙂

See you

Claudi

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Laura Quinteros

    Hi Claudia,

    Great series of tutorials on WebIDE 🙂

    I have a general question on extension:

    Is it possible to re use a fragment in an extended view?

    I first added a field in an extension point (fragment) for view S4, now because of another requirement I have to replace view S4 and my fragment is not displayed anymore (not even changing its call in Components.js).

    I can simply add the fields manually in the replaced S4 view but I though it was possible to re use the fragments already created.

    Thanks

    (0) 
    1. Mat Beerkens

      Hi Laura & Claudia,

      i have the same issue. Although i can imagine you can manually change the view with the extension-implementation that was made, it would indeed be nice to inherit the extension also in a replaced view.

      Potentially it would also save time in upgrades because less changes will need to be re-done.

      Thanks,

      Mat

      ps. Your blogs were really helpful.

      (0) 
  2. Faddy Learner

    HI Claudia,

    Thanks for sharing an exceptional information.

    Can you please let me know the deployment procedure of the extended application to ABAP repository?

    Regards,

    Faddy

    (0) 
    1. Michael Appleby

      Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      (0) 

Leave a Reply