My Fiori Elements Story – Part 2

This blog series on Fiori Elements is my experiences with Fiori Elements – development and customizations. The part 1 of the blog is available in the link: My Fiori Elements Story – Part 1.

The list of topics covered over the two blogs are below:

Provide additional filters
1. One filter is a property from the existing entity set
2. Override Annotations
Provide Custom buttons in the toolbar
1. UX feature – provide icons to the buttons
Invoke a custom OData service on the click of the buttons
1. Usage of JS promise in service calls
Remove the navigation from List Report to Object Page
« Manifest.json » configurations on the table
1. Multi selection of elements in the table
2. Provide excel export feature on the table
Provide a popup on click of the custom button
1. Integrate the help into the popup fields
UX feature – provide an Info toolbar to the table on selection of entries
Adaptation Project of the Duplicate App
1. One filter was a new custom property with predefined values
Enable features – Enable Excel export, Growing threshold
Change files in the changes folder
Launchpad configuration of the adaptation project

Point 1 to 5 are covered in the Part 1 of the blog. In this blog, we will look into the points 6 to 11.

Provide a popup on click of the custom button

To add a custom button to the table, we discussed the steps in the part 1 of the blog, by using the extension wizard on the project. In the process of creating the custom button, a controller is created by the wizard. We will be using the same controller throughout the project to implement our customizations to the Fiori elements – List report app.

The generated custom controller is defined using sap.ui.controller. In continuing the same definition, to define the modules I made the use of jquery.sap.require.

In my project, have synchronously loaded the modules “ExtensionAPI” and “ushell”.

jQuery.sap.require("sap.suite.ui.generic.template.ListReport.extensionAPI.ExtensionAPI");
jQuery.sap.require("sap.ushell.library");

Detour: The extensionAPI is used to refresh the list report table. It can used especially when the there is a need to update table records and ensure that changed data is immediately visible to users.

Once we have the custom button, the relevant event method is also available in the controller.

Prior to invoking a popup, we need to create fragments for the same. In my project, I maintained fragments in a separate folder under ext folder.

App%20Folder%20Structure

App Folder Structure

Now that the fragment is created we shall invoke the fragment in the event – method handler using the fragment load method.

Controller%20code%20to%20open%20popup

Controller code to open popup

Now, on click of the button the popup opens up.

Integrate the help into the popup fields

Additional to the popup, I made use of the ValueHelpDialog control inside the help fragment, to provide the standard help framework. So, on the separate fragments for value help, valuehelpdialog control is included with method handlers for “ok”, “cancel”, “afterClose”. The parameters are passed using the parameters “key” and “descriptionKey”.

ValueHelpDialog%20control

ValueHelpDialog control

UX feature – provide an Info toolbar to the table on selection of entries

The info toolbar was not requested by the client. However, the intention was to display to users the number of entries selected for the operation.

The approach to include an information toolbar on the table was as follows:

i. Get the handler to the table

The static id of the list report table can be pulled up from the Elements tab of the browser in which app is tested.

ii. Prepare the object of type sap.m.ToolBar

iii. Include content for the info tool bar

The object infoToolbar’s method insertContent shall be used to include the text to be shown to the users.

iv. Insert the info tool bar to the table

v. Additionally, I made the info tool bar as sticky to ensure that message is displayed , when user scrolls the entries in the table.

vi. In order to show the exact number of entries selected by user, I had to somehow trigger the event handler for the table on Select all. Now, the challenge with Fiori Elements List report was that I did not find a way to find event handler for the event “onSelectionChange” declaratively. So, I did the event binding using the “attachSelectionChange” method.

Adaptation Project of the Duplicate App

Now, we have the copy of standard app with customizations ready for use. However, for further personalization, I chose to adapt the project. Hence, I created an Adaptation project using the Web IDE.

In the Adaptation wizard, choose the newly created project and continue. On successful creation of the project, you can check the configurations in the “manifest.appdescr_variant”. So technically, adaptation project works as a variant. Infact, when you deploy the adaptation project, the variant gets deployed in the server.

The key parameters in the file are:

Reference – namespace of the project which is being adapted (in our case, the copy/duplicate app)

Id – the id of the adaptation project. This id is useful while configuring the app in the Fiori launchpad as a tile.

Now, open the “SAP UI5 Visual editor” from the adaptation project by right-click on the project.

Refer to the blogs on adaptation project to check on adding filter as a fragment.

Enable features – Enable Excel export, Growing threshold

Open the Adaptation project – Visual Editor. Click on Edit button and disable the Safe Mode.

Select the Table and Smart Table. Make changes in the outline/properties of the table/smart table.

Change files in the changes folder

Each change and save operation on adaptation project creates a separate file in the changes folder. The property changes, ex: useExportExcel results in file with name – “property change” and addition of fragment etc results in file with name – “addXML” and “codeExt”.

Launchpad configuration of the adaptation project

In the target mapping of the tile, only provide the ID of the adaptation project and include the parameter – sap-appvar-id as shown in the below screenshot.