Instrumenting SAP Fiori Apps

SAP Fiori is a new user experience (UX) for SAP software and applications. It provides a set of applications that are used in regular business functions like work approvals, financial apps, calculation apps and various self-service apps.

eG RUM offers support to Fiori Apps running on the SAP Cloud Platform and on the SAP On-Premises setup. The procedure to RUM-enable Fiori Apps varies with where the Apps are running - whether on the cloud or on-premises.

TheInstrumenting SAP Fiori Apps Running on the SAP Cloud Platform topic details the procedure for instrumenting Fiori Apps running on the cloud.

The Instrumenting SAP Fiori Apps Running On-premises topic details the procedure for instrumenting Fiori Apps running on-premises.

Instrumenting SAP Fiori Apps Running on the SAP Cloud Platform

To RUM-enable Fiori Apps running on the SAP cloud, do the following:

  1. First, manage the SAP Fiori App to be monitored as a Real User Monitor component using the eG admin interface (see Figure 41).

    Figure 41 : Managing a SAP Fiori APP using the eG admin interface

  2. Then, to instrument the SAP Fiori App, you need to download the egrum.js to be embedded into the app to any folder on the local host. For that, click the Download button indicated by Figure 41.
  3. Next, login to the SAP Cloud Platform (see Figure 42).

    Figure 42 : Logging into the SAP Cloud Platform

  4. When Figure 43 appears, click on the Services option in the left panel of Figure 43. Then, with All Categories selected from the drop-down in the right panel, type SAP Web IDE in the text box adjacent to that drop-down and press Enter on your keyboard. This will trigger a search for the service that has the string SAP Web IDE as whole/part of the service name. Once SAP Web IDE Full-Stack appears as the search result, click on it.

    Figure 43 : Clicking on SAP Web IDE Full-Stack

  5. This will openFigure 44. Here, enable the SAP Web IDE Full-Stack service, if it is not done already. For that, click on the Enabled button in Figure 44. Then, click on the Go to Service link in Figure 44.

    Figure 44 : Enabling the SAP Web IDE Full-Stack service

  6. Figure 45 then appears. Here, click on the Gear () icon in the list of icons displayed in the left panel. Then, in the right panel of Figure 45, turn On the SAP Fiori Launchpad Extensibility feature, and click the Save button to save the changes.

    Figure 45 : Enabling SAP Fiori Launchpad Extensibility

  7. Next, click on the icon in the list of icons displayed in the left panel of Figure 45. This will display the Workspace folder in the right panel. Then, right-click on the Workspace folder, move your mouse pointer over New, and select the Project from Template option (see Figure 46).

    Figure 46 : Choosing to create a new Project from a template

  8. Using Figure 47 that then appears, you can create a new SAP Fiori Launchpad Plugin. For that, select the SAP Fiori Launchpad Plugin template displayed therein and click the Next button.

    Figure 47 : Choosing to create a new SAP Fiori Launchpad Plugin

  9. Figure 48 will then appear. Enter the name of the new project in the Project Name text box in Figure 48. Type eGRUMPlugin as the name of the new project. Then, click the Next button to proceed.

    Figure 48 : Providing the name of the new project

  10. Figure 49 will then appear. Here, type com.eg.rum as the Plugin ID, eG RUM Plugin as the Title, and click the Finish button to complete plugin creation.

    Figure 49 : Assigning an ID and title to the new plugin

  11. When Figure 50 appears, you will find that the project you just created - i.e., eGRUMPlugin - has been added as a sub-folder of the Workspace folder. Now, proceed to create a sub-folder for the eGRUMPlugin folder. For that, right-click on the eGRUMPlugin folder, move your mouse pointer over the New option, and select the Folder option (see Figure 50). A New Folder dialog box will then appear (as shown by Figure 50), where you can specify the Folder Name. Enter lib as the Folder Name of the sub-folder, and click the OK button in the dialog box.

    Figure 50 : Creating a lib folder under the eGRUMPlugin folder

  12. Figure 51 will appear, where you will be able to see the lib folder under the eGRUMPlugin folder. Now, proceed to create a file under the lib folder, where the RUM JavaScript code snippet needs to be stored. For that, right-click on the lib folder, move your mouse pointer over New, and choose the File option (see Figure 51). A New File dialog box will now appear, where you will have to specify the File Name of the new file. Type egrum.js as the name of the new file and click the OK button.

    Figure 51 : Creating the egrum.js file under the lib folder

  13. Figure 52 then opens. You will now find that an egrum.js file has been created under the Workspace -> eGRUMPlugin -> lib folder. Open the egrum.js file by clicking on it in the left panel of Figure 52. An empty file will open in the right panel. Now, using a Text Editor, open the egrum.js file that you downloaded at step 2 above, copy the contents of that file, and paste the copied contents to the empty file in the SAP console. Press Ctrl+S on your keyboard to save these changes.

    Figure 52 : Copying the contents of the downloaded egrum.js file to the empty egrum.js file in the SAP console

  14. Then, double-click the manifest.json file under the eGRUMPlugin folder to open it (see Figure 53). Look for the entry, "componentName": "com.eg.rum" in the file. Once you find the entry, append the following code block to that entry, as depicted by Figure 53. Then, save the changes by pressing Ctrl+S on your key board.

    ,"resources": {

    "js": [{

    "uri": "lib/egrum.js"

    }]

    }

    Figure 53 : Editing the manifest.json file

  15. Next, proceed to deploy the eG RUM Plugin to the SAP Cloud platform. For that, first right-click on the eGRUMPlugin folder, move your mouse pointer over Deploy, and choose the Deploy to SAP Cloud Platform option (see Figure 54).

    Figure 54 : Initiating the deployment of the eGRUMPlugin to the SAP Cloud platform

  16. Then, choose the Deploy a new application option from Figure 55, provide egrumplugin as the Application Name, and click the Deploy button therein to deploy the plugin.

    Figure 55 : Deploying the eGRUMPlugin

  17. Upon successful deployment, a message to that effect will appear (see Figure 56). Click the Close button in Figure 56 to close the message.

    Figure 56 : A message confirming the successful deployment of the plugin

  18. Now, you need to select a portal and attach it to the eG RUM Plugin you created and deployed previously. For that, return to the SAP Cloud Platform Cockpit (see Figure 57). Click on the Services option in the left panel of the Cockpit. Using the Search option provided by the right panel, search for the string 'Portal'. A service named 'Portal' will then appear in the search results. Click on the Portal service link in Figure 57.

    Figure 57 : Clicking the Portal service link in the Cockpit

  19. When Figure 58 appears, click on the Go to Service link at the bottom of Figure 58.

    Figure 58 : Clicking on the Go to Service link

  20. Doing so will open the Site Directory. From here, choose the site for which you want to enable RUM. Then, click on the Edit link that appears when you hover your mouse pointer over the site URL (see Figure 59).

    Figure 59 : Choosing the site to be RUM-enabled

  21. Figure 60 will then appear. Expand the Content Management node in the left panel of Figure 60, and choose the Apps sub-node within. Then, to add the eG RUM Plugin to the chosen site, click the button that is last in an array of buttons that you will find at the bottom of the right panel.

    Figure 60 : Clicking the '+' icon to add the eGRUMPlugin to the chosen site

  22. Figure 61 will then appear. Here, you need to select the eG RUM Plugin as the App Resource you want to associate with the site. To perform this selection, you first need to browse the list of available App resources. For that, click the Browse () button at the end of the App Resource text box in Figure 61.

    Figure 61 : Clicking the App Resource Browse button to look for the eGRUMPlugin

  23. Figure 62 will then appear, where the available app resources will be listed. Browse the list and select the egrumplugin resource from it. Then, click the OK button in Figure 62.

    Figure 62 : Selecting the eGRUMPlugin from the list of App Resources

  24. This will bring you back to Figure 61. This time however, you will see that the egrumplugin is displayed as the App Resource (see Figure 63). Now, indicate what type of an app the egrumplugin is. For that, select the Shell Plugin option from the App Type drop-down (see Figure 61). Then, click the Save button.

    Figure 63 : Setting Shell Plugin as the App Type

  25. When Figure 64 appears, click on Catalogs to assign the eG RUM Plugin to a catalog. Then, click the Edit button in Figure 64.

    Figure 64 : Clicking on the Catalogs icon

  26. Figure 65 then appears. Click on the '+' icon in Figure 65 to add a catalog.

    Figure 65 : Clicking on the '+' icon to add a catalog

  27. From the list of catalogs that appears, select the catalog in which you want to add the eG RUM Plugin (see Figure 66). Then, click the OK button.

    Figure 66 : Selecting the catalog in which the eG RUM Plugin is to be added

  28. Upon selection, you will return to Figure 65. This time however, you will see the catalog you selected displayed under Assigned Catalogs (see Figure 67). Now, click the Save button to save the changes.

    Figure 67 : The selected catalog displayed under Assigned Catalogs

  29. Finally, to make sure that all changes are applied, you will have to publish the site. For that, when Figure 68 appears, click on the button at the right, top corner of Figure 68. A Publish Site dialog box will then appear. Check the Clear HTML5 application cache check box in the dialog box, and then click the Publish and Open button therein, to publish the site.

    Figure 68 : Publishing the site

Once the site is successfully published, it automatically opens. You can now invoke Developer Tools from the site. If you find a GET request to the site, as indicated by Figure 69, you can conclude that the egrum.js has been successfully loaded. If you find a POST request bearing the RUM collector's IP and port number (as indicated by Figure 69), it means that the browser is sending beacons to the eG RUM collector.

Figure 69 : Verifying successful loading of egrum.js and the transmission of beacons to collector using Developer tools

Instrumenting SAP Fiori Apps Running On-premises

The broad steps for instrumenting SAP Fiori Apps running On-premises are as follows:

  1. Configure the SAP Cloud Connector; this step is required only if you do not have on-premises full stack SAP Web IDE;
  2. Configure the SAP Cloud Platform destination;
  3. Configure SAP full stack Web IDE and deploy it to On-premises application;
  4. Configure SAP user and backend;
  5. Verify whether configuration works

These steps have been elaborately discussed below:

  1. First, manage the SAP Fiori Apps to to be monitored as a Real User Monitor component using the eG admin interface (see Figure 41).

  2. Then, to instrument the SAP Fiori Apps, you need to download the egrum.js to be embedded into the app to any folder on the local host. For that, click the Download button indicated by Figure 41.
  3. Then, connect to the SAP Cloud Connector using the URL, https://localhost:8443/, and login to it using valid login credentials (see Figure 70). Before attempting to connect, make sure that the SAP Cloud Connector is installed.

    Figure 70 : Logging into the SAP Cloud Connector

  4. After logging in, proceed to create a sub-acccount. For that, in the SAP Cloud Platform Cockpit that appears, click on the option that corresponds to your SAP cloud platform subscription - eg., Cloud Foundry Trial, Neo Trial etc. In the case of the example illustrated by Figure 71, the Neo Trial option is clicked as the Neo trial subscription is in use.

    Figure 71 : Clicking on the option that corresponds to the SAP Cloud Platform subscription in use

  5. In the page that appears next, click on the Create Subaccount button to create a new subaccount. Figure 72 will then appear.

    Figure 72 : Creating a new subaccount

  6. In Figure 72, select a Region for the new subaccount. Then, specify the Subaccount name. To know what the subaccount name is, first minimize the Add Subaccount dialog box of Figure 72, so that the SAP Cloud Platform Cockpit comes into view (see Figure 73). Scroll down the cockpit until you can view a Subaccount Information section. The value displayed under Name in this section is the name of the new subaccount you are creating. Copy this name and paste it against Subaccount name in Figure 72. Then, proceed to specify the Subaccount User name. This should be the same as the Subaccount name, but sans the 'trial' suffix. For instance, if the Subaccount name is p1940914553trial, the Subaccount User name should be just p1940914553. Then, specify the Password of the user. Leave the Location ID empty and click the Save button in Figure 72 to save the new subaccount.

    Figure 73 : Determining the Subaccount name

  7. Next, proceed to create a virtual system on the Cloud Platform, which will map to the system on-premises. For that, first select the Cloud to On-Premise option in the left panel of the SAP Cloud Platform Cockpit (see Figure 74).

    Figure 74 : Clicking the Cloud to On-Premise option

  8. When the Cloud To On-Premise section appears in the right panel, click the '+' button (indicated by Figure 74) in that section to map the virtual system to the internal system. In the dialog box that appears next (not shown in this topic), set the Back-end type as ABAP System and set Protocol as HTTP. Then, specify the Internal Host name. To know the internal host name, go to the Application Server section in your SAP Logon. Then, configure the Internal Port. To know the internal port, execute the transaction SMICM, and go to Services -> HTTP -> Port. Then, provide any name against Virtual Host and any port number against Virtual Port. Let the Principal Type be None. Once you Save this configuration, the new mapping will appear in the Mapping Virtual to Internal System list, as depicted by Figure 75.

    Figure 75 : The new mapping appended to the Mappint Virtual To Internal System list

  9. If you now scroll down the Cloud to On-Premise section, you will find a Resources Accessible section. Select the new mapping you created from the Mapping Virtual to Internal System section of Figure 74, and then click the '+' button in the Resources Accessible section to add a new resource (see Figure 76).

    Figure 76 : Selecting the new mapping and clicking the '+' icon to add a new resource

  10. Figure 77 will then appear. To RUM-enable SAP Fiori Apps, we need to add the eG RUM Plugin as a cloud application. To make the necessary resources available to this cloud application, you first need to add each resource the eG RUM Plugin needs to the SAP Cloud Platform (see Figure 77). The first resource to be added is the URL to which the eG RUM Plugin should be deployed. Therefore, first enter sap/bc/ui5_ui5 in the URL Path text box in Figure 77. Then, set Path and all sub-paths as the Access Policy, and click the Save button to save the changes.

    Figure 77 : Adding a new resource

  11. You will now return to Figure 76, where the new resource will be appended to the list of resources in the Resources Accessible section. Next, proceed to add another resource that the eG RUM Plugin needs. For that, click the '+' icon in the Resources Accessible section of Figure 76. When Figure 77 comes up again, set the URL Path as /sap/opu/odata, set Path and all sub-paths as the Access Policy, and click the Save button to save the changes. This path allows the eG RUM Plugin access to odata gateway services it requires for its functioning.
  12. Once both the resources are added, proceed to check whether the cloud to on-premises connection is working. For that, select the new mapping from the Mapping Virtual to Internal System section, and click the Check Availability button corresponding to it. If the Check Result column returns the value 'Reachable', you can conclude that the mapping is working.

    Figure 78 : Checking connectivity

  13. Next, proceed to configure a destination. For that, once again login to the SAP Cloud Platform and select your cloud subscription. Figure 79 will then appear. In the left panel of Figure 79, expand the Connectivity node, and select the Destinations node within.

    Figure 79 : Selecting the Destinations option from the Connectivity node

  14. This will invoke Figure 80. Here, click the New Destination button to create a new destination.

    Figure 80 : Clicking the New Destination button

  15. Figure 81 will then appear.

    Figure 81 : Configuring a new destination

  16. In Figure 81, first assign any unique Name to the new destination. Then, set Type to HTTP. Provide any Description for the new destination. Next, in the URL text box, provide a URL of this format: <Name_of_virtual_host_in_new_mapping_you_created>:<Port_number_of_virtual_host>. For the name and port number of virtual host, refer to step 9 above. Then, set ProxyType to OnPremise and Authentication to BasicAut. Against User and Password, specify your system username and password. Then, under Additional Properties, set the WebIDEEnabled flag to true. Specify the name of the backend system in the WebIDESystem text box, and enter odata_gen,odata_abap,dev_abap in the WebIDEUsage text box. Once all the destination parameters are configured, click Save to create the new destination.
  17. After saving the new destination, click the Check Connection button (indicated by Figure 82) corresponding to the new destination to check if the destination is accessible. If it is, a message to that effect will pop up, as depicted by Figure 82.

    Figure 82 : Checking connectivity to the new destination

  18. Next, proceed to configure the SAP full stack Web IDE in the SAP Cloud Platform. For that, open the SAP Cloud Platform using the link, https://cockpit.hanatrial.ondemand.com/cockpit/#/home/trial.
  19. When Figure 83 appears, click Launch SAP Web IDE.

    Figure 83 : Launching SAP Web IDE

  20. Figure 84 will then appear. First, enable SAP Fiori Launchpad extensibility for Sap Web IDE. For that, click the Preferences icon in the left panel of Figure 84, select Extensions, and turn On the SAP Fiori Launchpad Extensibility flag (see Figure 84).

    Figure 84 : Enabling SAP Fiori Launchpad Extensibility

  21. Next, proceed to create a new project from template. For that, follow the menu sequence File -> New -> Project from Template (see Figure 85).

    Figure 85 : Selecting the option to create a new project from template

  22. When Figure 86 appears, click on SAP Fiori Launchpad Plugin.

    Figure 86 : Selecting the SAP Fiori Launchpad Plugin

  23. When prompted for a Project Name, specify eGRUMPlugin (see Figure 87). Then, click the Next button to proceed.

    Figure 87 : Specifying the new project name

  24. In Figure 88 that appears next, specify com.eg.rum as the Plugin ID and eG RUM Plugin as the Title. Then, click the Finish button to complete the plugin creation process.

    Figure 88 : Providing the plugin ID and title

  25. You will now find that an eGRUMPlugin folder is created under the Workspace folder (see Figure 89). Now, create a lib folder under eGRUMPlugin. For that, right-click on eGRUMPlugin, move your mouse pointer over New, and select the Folder option.

    Figure 89 : Creating a sub-folder under eGRUMPlugin

  26. When Figure 90 appears, specify lib as the Folder Name.

    Figure 90 : Naming the sub-folder 'lib'

  27. Next, create an egrum.js file under the lib folder. For that, right-click on the lib folder, move your mouse pointer over New, and select the File option. When Figure 92 appears, specify egrum.js against File Name.

    Figure 91 : Creating a file under the lib folder

    Figure 92 : Specifying the new file name as egrum.js

  28. You will now find that an egrum.js file has been created under the Workspace -> eGRUMPlugin -> lib folder. Open the egrum.js file by clicking on it in the left panel of Figure 93. An empty file will open in the right panel. Now, using a Text Editor, open the egrum.js file that you downloaded at step 2 above, copy the contents of that file, and paste the copied contents to the empty file in the SAP Cloud Platform cockpit. Press Ctrl+S on your keyboard to save these changes (see Figure 93).

    Figure 93 : Pasting the contents of the downloaded egrum.js file into the empty egrum.js file

  1. Then, double-click the manifest.json file under the eGRUMPlugin folder to open it (see Figure 94). Look for the entry, "componentName": "com.eg.rum" in the file. Once you find the entry, append the following code block to that entry, as depicted by Figure 53. Then, save the changes by pressing Ctrl+S on your key board.

    ,"resources": {

    "js": [{

    "uri": "lib/egrum.js"

    }]

    }

    Figure 94 : Editing the manifest.json file when RUM-enabling SAP Fiori Apps On-Premises

  2. Now, deploy the plugin to the SAP ABAP repository. For that, right-click on eGRUMPlugin, move your mouse pointer over Deploy, and select Deploy to SAPUI5 ABAP Repository (see Figure 95).

    Figure 95 : Deploying the eGRUMPlugin to the SAPUI5 ABAP Repository

  3. A Deployment Options tab page will then appear. From the System drop-down here, select the destination to which the eG RUM Plugin is to be deployed. Here, make sure you select the same destination you created using steps 14-17 above. Then, select the Deploy a new application option to deploy the plugin as a new application. Click the Next button to proceed.

    Figure 96 : Selecting the deployment destination

  4. In Figure 97, specify the Name of the new application, provide a Description for the application, and indicate the Package name. In the case of the example illustrated by Figure 97, the application Name is zegrumfiori. Now, click Next to move to the next step.

    Figure 97 : Deploying a new application

  5. When Figure 98 appears, click Finish to save the changes and complete the deployment process.

    Figure 98 : Finishing the application deployment

  6. Once application deployment is successful, a service with the same name as the application will be automatically created in the SAP Fiori system. In the case of our example therefore, a service named zegrumfiori will be automatically created.
  7. Let us now proceed to activate this service in the SAP backend. For that, first login to the SAP GUI as a SAP administrator. In the SAP GUI, type SICF in the text box you will find at the right top corner of the GUI, and press the Enter key on the keyboard. Figure 99 will then appear. Here, to search for the service that was automatically created, type the name of the service against ServiceName. Once the service is found, the tree-structure under Virtual Hosts/Services will change to indicate the location of the service. You have to activate only that service that is listed under ui5_ui5 -> sap in the tree-structure. For that, right-click on the service name and select the Activate Service option.

    Figure 99 : Activating the service

  8. Next, let us proceed to create a catalog. For that, in the text area indicated by Figure 99, type the transaction code, /n/UI2/FLPD_CUST, and press the Enter key on your keyboard. This transaction will open in a web browser. To create a catalog, click on the encircled '+' icon indicated by Figure 100.

    Figure 100 : Clicking on the + icon to create a new catalog

  9. When Figure 101 appears, specify the catalog Title (i.e., name of the new catalog), and assign a unique ID to the catalog. For easy identification, it is recommended that you provide the service name / application name you previously created as the catalog name. Then, click Save to save the changes.

    Figure 101 : Creating a new catalog

  10. Once the catalog is created, you will find the new catalog listed in the Catalog Collection panel of Figure 102. Double click on that catalog to open it. Then, click on the Target Mapping option indicated by Figure 102.

    Figure 102 : Clicking on the Target Mapping option

  11. Then, click on the Create Target Mapping option indicated by Figure 103.

    Figure 103 : Clicking on the Create Target Mapping option

  12. Configure the target mapping using Figure 104 that appears. Here, select Shell as the Semantic Object and plugin as Action. In Title, enter the application name of the eG RUM Plugin. Against URL, specify the path to the service that was automatically created after the eG RUM application was deployed (see step 34 for details). To know the path, look up the Virtual Hosts/Services tree-structure in Figure 99. Even if the eG RUM service is deployed in many locations, the URL should contain the path to the service in the ui5_ui5 location only. As per Figure 99 therefore, the URL will be /sap/bc/ui5_ui5/sap/ zfiorirumplugin. Against ID, specify the Plugin ID that you provided at step 24 above (see Figure 88).

    Figure 104 : Creating a new target mapping

  13. Finally, click Save in Figure 104 to save the catalog. Next, proceed to assign the catalog to a user role. For that, in the text box indicated by Figure 99 above, specify PFCG and press the Enter key on the keyboard. When Figure 105 appears, provide a name to the new role in the Role text box, and click the Single Role button.

    Figure 105 : Creating a new role

  14. Figure 106 then appears. Click the Menu option indicated by Figure 106. Under Hierarchy, you will find Role Menu. Right-click on Role Menu and select Assign Catalog from the shortcut menu that appears. A list of catalogs will appear. Select the new catalog you created using steps 36 and 37 above. This will assign that catalog to the role.

    Figure 106 : Assigning the newly created catalog to the new role

  15. Next, click on the User option indicated by Figure 106 above to assign the new role to one/more Fiori users.
  16. Finally, save all the changes.
  17. Now, proceed to verify whether the SAP Fiori Apps has indeed been RUM-enabled or not. For that, first wait for the SAP Fiori Apps you added as a Real User Monitor component in eG Enterprise to start reporting metrics. Then, open the Fiori Launchpad. Click on the F12 key and refresh it to reload. If you find a GET request as indicated by Figure 107, you can conclude that the egrum.js has been successfully loaded. If you find a POST request bearing the RUM collector's IP and port number (as indicated by Figure 107), it means that the browser is sending beacons to the eG RUM collector.

    Figure 107 : Verifying whether the eG RUM configuration for SAP Fiori Apps for On-Premises setup is working or not