Add System Information on Fiori Launchpad

[Former Member]

Recently, while working on a project, I came across a requirement for displaying System Information on Fiori Launchpad Header. Traditionally in SAP GUI and SAP NWBC the system id is available on the screen. Therefore if a user has multiple SAP systems open at single time, for example Development, Quality and Production, quick view on the bottom corner of the screen can tell you what system are you working on. However in the case of SAP Fiori Launchpad while working on a desktop the only way to look at this information is by scanning the URL in web browser and then make a guess!! ( if you are not familiar with system domain name etc ).

With SAP Fiori Launchpad for SAP_UI 751 SP01 and SP00, we now have an option of extending the Launchpad. You can find information on following link:

https://uacp2.hana.ondemand.com/viewer/a7b390faab1140c087b8926571e942b7/7.51.1/en-US/56e9328978954c7...

I have used 'Shell Header Title' for extending the Header Title of SAP Fiori Launchpad. Please find below link from SAP Help about 'Adding a Title to the Shell Header'.

https://uacp2.hana.ondemand.com/viewer/a7b390faab1140c087b8926571e942b7/7.51.1/en-US/713472fef69f44f...

Although the above help link provides useful information, if you are totally new to the SAP Fiori Launhcpad extension concept then you may find it a bit hard to follow the steps.

Here is what I have done to add System information on Fiori Launchpad:

1. Logon to SAP GUI and go to transaction SE80. Create a new folder for example 'App Title' in SAP MIME repository at location: SAP->PUBLIC->BC->UI5->APPLICATIONS->demokit->1.44 ( UI version of your SAP system, it was 1.44 for the system I was working on )->test-resources->sap->ushell->demoapps. To create folder right click on demoapps and choose create folder.


2.  Now use Notepad or Notepad++ or any other notepad editor you may have to create a JavaScript (.Js) file. Please insert following code in the file and save file with name as 'Component.Js'
   

   var oRenderer = sap.ushell.Container.getRenderer("fiori2");
   
   oModel = new sap.ui.model.json.JSONModel();
   
   oModel.loadData("/sap/bc/ui2/start_up?", "", false);
   
   var systemid = oModel.getProperty("/system");
   
   var client = oModel.getProperty("/client");
   
   var info = 'Sys:'+ systemid + " " + 'Client:' + client;
   
   oRenderer.setHeaderTitle(info);​

   
   


3. Now select the folder you have created in step 1 and right click on it and choose option 'Import Mime Objects'. You will now need to select the file which you have created in step number 2. After you have selected the file you will be presented with following pop-up. You don't need to change anything on this pop-up. Just press save button.


4. To make sure this UI Plugin gets called we need to do 2 things. Firstly we need to make sure the Fiori Lauchpad HTML page calls this UI Plugin and the call for this plugin is assigned to a role.


5. FioriLaunchpad.html page is inside BSP application /UI2/USHELL. Please make a copy of this page before making any changes. In the copied page make sure you have following configurations setup
   

                       "NavTargetResolution" : {
   
                           "config" : {
   
                               "runStandaloneAppFolderWhitelist": {
   
                                   "*" : false,
   
                                   "/sap/bc/ui5_ui5/" : true,
   
                                   "sap/bc/ui2/" : true,
   
                                   "/sap/bc/ui5_demokit/test-resources/sap/ushell/renderers/" : true,
   
                                   "/sap/bc/ui5_demokit/test-resources/sap/ushell/demoapps/" : true
   
                               },​

   
   

    "launchpadConfiguration" :  {
   
                       "configurationFile" : {
   
                           "sap-ushell-config-url" : undefined, // optionally define a hard coded absolute or relative path here (prevents using url filename!)
   
                           "configurationFileFolderWhitelist": {
   
                               "" : true,
   
                               "cfg/" : true,
   
                               "cfg/sap/" : true,
   
                               "/sap/bc/ui5_ui5/ui2/ushell/shells/abap/" : true,
   
                               "/sap/bc/ui5_ui5/ui2/ushell/shells/abap/cfg/" : true,
   
                               "/sap/bc/ui5_ui5/ui2/ushell/shells/abap/cfg/sap/" : true,
   
                               "/sap/ushell_config/" : true,
   
                               "/sap/bc/ui5_demokit/test-resources/sap/ushell/demoapps/" : true,
   
                               "/sap/bc/ui5_demokit/test-resources/sap/ushell/renderers/" : true,

   
   


6. Please make sure you are using relevant FioriLaunchpad.html page in your config once you have done code changes.


7. Now, please open http(s)://hostname:port/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html? and create a new catalog for example Z_SAP_FIORI_HEADER_TITLE. You don't need to create any tile in this catalog, However you need to create a new 'Target Mapping' with Semantic Object as 'Shell' and Action as 'Plugin'. Please refer to below screen-shot for settings:


8. Please assign this catalog to a Role in PFCG transaction and assign that role to the user and you are good to go.


9. In following screen-shots I am testing it on a single S4HANA system with 2 clients:


10. Please note that in step number 2, in my JavaScript file, I have used JSon model for SICF service 'start_up'. You can see this service in SICF transaction and if you test this service you can see there is lots of useful information available which you would like to display.


11. As per SAP's help documentation, the title may disappear when you click on 'Search' button on Fiori Launchpad. From SAP Help :  "The search control and the title occupy the same space in the shell header. Opening the search hides the title."