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:
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.
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”.
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.
Now that the fragment is created we shall invoke the fragment in the event – method handler using the fragment load method.
Now, on click of the button the popup opens up.
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”.
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.
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.
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.
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”.
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.
As always, I would love to hear your feedback, experience and suggestions. Please use the comment section to share your views.
For further read on Fiori Elements, please use the link: https://community.sap.com/topics/fiori-elements , post and answer questions (https://answers.sap.com/tags/ed5c1ef6-932f-4c19-b2ba-1be375109ff5), and read other posts on the topic (https://blogs.sap.com/tags/ed5c1ef6-932f-4c19-b2ba-1be375109ff5/)
Regards,
Sharath M G
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
- One filter is a property from the existing entity set
- Override Annotations
- Provide Custom buttons in the toolbar
- UX feature – provide icons to the buttons
- Invoke a custom OData service on the click of the buttons
- Usage of JS promise in service calls
- Remove the navigation from List Report to Object Page
- « Manifest.json » configurations on the table
- Multi selection of elements in the table
- Provide excel export feature on the table
- Provide a popup on click of the custom button
- 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
- 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 Folder Structure
Now that the fragment is created we shall invoke the fragment in the event – method handler using the fragment load method.
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 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.
As always, I would love to hear your feedback, experience and suggestions. Please use the comment section to share your views.
For further read on Fiori Elements, please use the link: https://community.sap.com/topics/fiori-elements , post and answer questions (https://answers.sap.com/tags/ed5c1ef6-932f-4c19-b2ba-1be375109ff5), and read other posts on the topic (https://blogs.sap.com/tags/ed5c1ef6-932f-4c19-b2ba-1be375109ff5/)
Regards,
Sharath M G
- SAP Managed Tags:
