Introduction: There are a lot of requirements where the customer asks to customize standard Fiori Applications. I got the opportunity to work on one such customization where the customer wants to hide certain sections on the selection of particular value in other fields. Trying to explain it from ABAPer's perspective.
This is just a trivial detail:
First of all, you need to have access to the customer account in Web IDE. For that, your web IDE user-id should be mapped to customer account and sub-account. Once your ID is mapped to the customer account, then it will be visible in the Global Accounts section.
https://account.hana.ondemand.com/cockpit/#/home/allaccounts
Now the customer can have several sub-accounts like SCM, EHS…so your ID needs to be mapped to correct sub-account also. Click on Account, all sub-accounts to which your ID is mapped will be visible.
Click on Sub-account: All cloud-related connections and Destinations will be pre-configured. So, you don’t have to put any effort into configuring cloud settings and destinations. You can directly go to WEB-IDE and start work.
Now go to Services, then proceed to Web IDE Full-Stack. it will open your personal Workspace.
For debugging and analyzing standard Applications, you need to first import the application into your workspace.
For that, we need technical name of the standard App, which can be found in the SAP Fiori App library.
https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/
Search for App, then go to IMPLEMENTATION INFORMATION and then to the CONFIGURATION tab, below you can find the technical name.
Now in your workspace, import the application using technical name.
Once Import is finished, the application will be there in your workspace.
Once you are ready for Application extension -> right-click on App and create an Extension project.
Now select the extension project and go to tools -> extensibility pane.
Extensibility Pane will open Application along with different views displayed. You can navigate applications in extensibility pane just as you do from the launchpad. It will show Views, fragments, and controllers in the Outline view. Elements that cannot be extended will be grayed out.
Currently, pane is in preview mode, change it to extensibility mode to trace the element you want to edit. You can navigate/click on the app only in preview mode, extensibility mode only lets you trace the view/controller of the selected element. So first navigate till the point where you see the corresponding element on-screen in preview mode, and then switch to Extensibility mode.
Now on the right-hand side Outline view, try to select views, the corresponding view will be highlighted in display, this will help in tracing elements in source code.
Now say you have identified the element or section, which you want to customize.
Now once we figure out the element in view, you can permanently hide it by clicking EXTEND->HIDE CONTROL. It can be undone by REMOVE EXTENSION.
But this will permanently hide the element, in case of bad luck, you may want to hide it based on some condition, like if RISK type = ‘XYZ’ then only hide impacts, otherwise it should be in display mode. In that case, we need to write some code in the appropriate controller.
Now that we have figured out the view, go to the controller section, and select controller(usually it's of the same name). Then you have two options to extend controller, with empty code or with a copy of code from the original controller. Also, that now we have controller details we can put a breakpoint in a controller and debug using F12 to figure out the logic.
You can also use extensibility pane just to figure out the section/element/controller. Once done you can come back to the workspace and create an extension from there also.
There you will get different options for extension types. I have not tried all, but commonly used are Hide Controls, Extend controller, extend View/Fragment(In case you want to add some mapping to existing view ).
In case 'Hide control' is selected, all views of Apps and their elements will be displayed. Select the appropriate one and create an extension.
In case 'Extend controller' is selected, it will list all controllers and extension options. They are basically the same thing that you can do from extensibility pane also.
Try to copy the code from the original controller. A new custom controller.js file will be created with the name of the original controller suffixed with 'Custom' with the original code commented. Figure out the function where you want to add/change code and add your logic there. Its like redefinition in OOPs, the function you uncomment and change, redefined version of it will be called at run time, otherwise original logic in the standard controller will be called.
For e.g. in my case, I wanted to hide the impact section based on the selection of certain values in other dropdown. I added the below piece of code in the _onObjectMatched function.
There is one more thing, you need to do once you are done. You need to push your changes to GIT Repository. So that other developers can pull your changes if further changes are required in your object. Other developers can check all the GIT repositories at the centralized place in the sub-account in the SAP Cloud platform and clone your object to their workspace using the GIT URL.
There are various blogs explaining GIT push/Pull concepts.
GIT Repository can be found at
Last Step: Deploy your extension project as SAP UI5 application and map it as a separate tile on Fiori Launchpad.
This is just a trivial detail:
First of all, you need to have access to the customer account in Web IDE. For that, your web IDE user-id should be mapped to customer account and sub-account. Once your ID is mapped to the customer account, then it will be visible in the Global Accounts section.
https://account.hana.ondemand.com/cockpit/#/home/allaccounts
Now the customer can have several sub-accounts like SCM, EHS…so your ID needs to be mapped to correct sub-account also. Click on Account, all sub-accounts to which your ID is mapped will be visible.
Click on Sub-account: All cloud-related connections and Destinations will be pre-configured. So, you don’t have to put any effort into configuring cloud settings and destinations. You can directly go to WEB-IDE and start work.
Now go to Services, then proceed to Web IDE Full-Stack. it will open your personal Workspace.
For debugging and analyzing standard Applications, you need to first import the application into your workspace.
For that, we need technical name of the standard App, which can be found in the SAP Fiori App library.
https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/
Search for App, then go to IMPLEMENTATION INFORMATION and then to the CONFIGURATION tab, below you can find the technical name.
Now in your workspace, import the application using technical name.
Once Import is finished, the application will be there in your workspace.
Once you are ready for Application extension -> right-click on App and create an Extension project.
Now select the extension project and go to tools -> extensibility pane.
Extensibility Pane will open Application along with different views displayed. You can navigate applications in extensibility pane just as you do from the launchpad. It will show Views, fragments, and controllers in the Outline view. Elements that cannot be extended will be grayed out.
Currently, pane is in preview mode, change it to extensibility mode to trace the element you want to edit. You can navigate/click on the app only in preview mode, extensibility mode only lets you trace the view/controller of the selected element. So first navigate till the point where you see the corresponding element on-screen in preview mode, and then switch to Extensibility mode.
Now on the right-hand side Outline view, try to select views, the corresponding view will be highlighted in display, this will help in tracing elements in source code.
Now say you have identified the element or section, which you want to customize.
Now once we figure out the element in view, you can permanently hide it by clicking EXTEND->HIDE CONTROL. It can be undone by REMOVE EXTENSION.
But this will permanently hide the element, in case of bad luck, you may want to hide it based on some condition, like if RISK type = ‘XYZ’ then only hide impacts, otherwise it should be in display mode. In that case, we need to write some code in the appropriate controller.
Now that we have figured out the view, go to the controller section, and select controller(usually it's of the same name). Then you have two options to extend controller, with empty code or with a copy of code from the original controller. Also, that now we have controller details we can put a breakpoint in a controller and debug using F12 to figure out the logic.
You can also use extensibility pane just to figure out the section/element/controller. Once done you can come back to the workspace and create an extension from there also.
There you will get different options for extension types. I have not tried all, but commonly used are Hide Controls, Extend controller, extend View/Fragment(In case you want to add some mapping to existing view ).
In case 'Hide control' is selected, all views of Apps and their elements will be displayed. Select the appropriate one and create an extension.
In case 'Extend controller' is selected, it will list all controllers and extension options. They are basically the same thing that you can do from extensibility pane also.
Try to copy the code from the original controller. A new custom controller.js file will be created with the name of the original controller suffixed with 'Custom' with the original code commented. Figure out the function where you want to add/change code and add your logic there. Its like redefinition in OOPs, the function you uncomment and change, redefined version of it will be called at run time, otherwise original logic in the standard controller will be called.
For e.g. in my case, I wanted to hide the impact section based on the selection of certain values in other dropdown. I added the below piece of code in the _onObjectMatched function.
There is one more thing, you need to do once you are done. You need to push your changes to GIT Repository. So that other developers can pull your changes if further changes are required in your object. Other developers can check all the GIT repositories at the centralized place in the sub-account in the SAP Cloud platform and clone your object to their workspace using the GIT URL.
There are various blogs explaining GIT push/Pull concepts.
GIT Repository can be found at
Last Step: Deploy your extension project as SAP UI5 application and map it as a separate tile on Fiori Launchpad.
- SAP Managed Tags:
7 Comments
