SAP Fiori UI Extension: Adding a custom fragment to make UI changes.

Hi Folks this is my first attempt to write something on developer network. I saw many tutorials to help fellow developers to understand the way customization work on SAP Fiori and got inspired to write one.

Problem:

So my challenge for this particular one was to remove the prices in header details from check price and availability app filter on the left side.

I followed the guide below which allowed me making some modifications to this existing UI, like hiding fields adding new buttons.

Use Cases for Extending the UI of SAP Fiori Apps.pdf

Since the price appears in something called header part of the list item and the guide mentioned above only talks about the standard possible extensions provided by SAP, this particular scenario was out of scope.

Solution:

I would love to list down the process to extend the app from scratch, but since it’s explained in many tutorials already we can give it a rest. So in case you have any doubts about extending the FIORI app please visit the link below and you would find a lot of resources, which talk about the same with detailed explanation.

https://wiki.scn.sap.com/wiki/display/Fiori/SAP+Fiori+-+Extensibility

So I am at a point where, I have already started extending the SAP Fiori SD App called “Check Price and Availability”, the app name which is deployed to SAP is “SD_PRAV_MON”.

I am using the local version of SAP WebIDE connected to my gateway backend system connected to my Local WebIDE.

So first point to check where we need the modification is to check the extensibility pane for the extended application. And the screen below shows how to open that.

At this point you may see a popup asking for your credentials to the backend gateway system, depending on how the logon preferences are set up.

Next, we need to look at the extensibility mode as shown below:

Switching to extensibility mode enables you to highlight the areas that are extendible. It also shows the possible extensions with the part extensible on the right hand side in a pane called Outline view.

For example, if you point your mouse at the element S2Custom->changeCustomerButton->page->customheader->sap.m.bar->contentright->changeCustomerButton.

The screen automatically highlights the control on the left side pane:

However, if I try to highlight the list items headers where the price shows up, I could not see any extension point for the same.

This typically means two things,

1. The list item provides the way of extension by allowing extending the UI fragments.
2. The list items are not to be extended.

Ours is the second case in which the header part of the List Item is not allowed for extensions.

Since there is no standard way available to achieve this, we need to look at the fragments closely and provide with a custom fragment to replace the standard one.

Following steps should show us how that works.

1.The UI fragments are typically loaded from the UI Controllers. So let’s take a look at the S2Custom.controller.js in our case. This represents the UI controller for the List.

Look carefully at the screen shot above, where it shows the bindItems method at line 67 depicts how an XML fragment is being loaded. This fragment is responsible for rendering the list items header in our case.

2.Next we need to create a custom fragment which is exactly same to the standard one. For this I refer to the original code copy of the application which can be brought into the WebIDE during the wizard of creating the extension project. Please refer to the screen shot below to get the original application code.

3.Copy the fragment file from the original code of the application and paste the same in your extension project’s View directory.

Paste to view directory.

4.Next we need to make the modifications to the custom copy of the fragment file (I usually use the naming convention Z<<objectName>> while creating custom copy of the standard components.)

5.Now we need to make a small modification to the Component.js file in our extension project to accommodate the custom fragment we introduced.

Open the Component.js file and add change the existing entry for the code lines below:

To

6.Now we need to revisit the controller S2Custom.controller.js to make a change and point the controller to the custom version of the fragment so that the UI changes can take effect.

This should look like below after making the change.

We need to make this change everywhere it has the old (original) xml fragment.

After following all the steps above we are now ready to test the application which should look like below screen shot:

Notice there are no price and currency displayed in the left hand filter list.

This example is basic one, but I hope this provides a an understanding of how to go about making your own XML fragments and replace a standard one to make the desired UI changes in the application.

Also being my first blog, please spare a minute to provide your valuable feedback so that I can improve the way of writing things, and also let me know if I made any mistakes during this first attempt.

Thanks,

Samir Kulkarni