Instrumenting SAP BTP Fiori Apps

SAP Business Technology Platform (SAP BTP) is SAP's cloud platform for building, integrating, automating, and extending business applications and data services across SAP and non-SAP systems. SAP Fiori is SAP's user experience and design system that provides modern, role-based web applications with a consistent, responsive interface for enterprise users.

eG RUM offers support to SAP BTP Fiori Apps. The procedure to RUM-enable SAP BTP Fiori Apps varies with the type of Apps that are running - whether it is Basic App or Other/Advanced App.

The Instrumenting SAP BTP Fiori Basic Apps topic details the procedure for instrumenting SAP BTP Fiori Basic Apps.

The Instrumenting SAP BTP Fiori Other/Advanced Apps topic details the procedure for instrumenting SAP BTP Fiori Other/Advanced Apps.

Instrumenting SAP BTP Fiori Basic Apps

To RUM-enable SAP BTP Fiori Basic Apps, 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 1).

   

   Figure 1 : 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 against the DOWNLOAD CODE SNIPPET + egrum.js parameter as indicated by Figure 2.

   

   Figure 2 : Downloading the egrum.js file

3. Next, login to the SAP BTP Cockpit. In our example, we are using the trial version of SAP BTP Cockpit and hence, logging into SAP BTP Cockpit Trial (see Figure 3).

   

   Figure 3 : Logging into the SAP BTP Cockpit

4. When Figure 4 appears, click on the account of your choice from the Subaccounts section.

   

   Figure 4 : The Home page of SAP BTP Cockpit

5. In Figure 5 that appears, expand the Services option in the left panel and click the Instance and Subscriptions option that appears.

   

   Figure 5 : Clicking the Instances and Subscriptions

6. Figure 6 then appears listing the applications to which your subaccount is subscribed to. Click the SAP Business Application Studio application.

   

   Figure 6 : Accessing the SAP Business Application Studio application

7. Figure 7 then appears prompting you to login into the SAP Business Application Studio. Specify the appropriate credentials and login.

   

   Figure 7 : Logging into the SAP Business Application Studio

8. As soon as you login, the development environments that pre-exist in your SAP Business Application Studio will be displayed (see Figure 8). You can either use a pre-exiting development environment or create a new development environment using the Create Dev Space button in Figure 8.

   

   Figure 8 : Viewing the pre-existing development environments

9. If you pick a pre-exiting development environment (see Figure 8) to proceed further, then, clicking a development environment will lead you to Figure 9.

   

   Figure 9 : Accessing the development environment of your choice

10. You can either create a new project in the development environment by clicking the New Project button in Figure 9 or use an existing project. If you use an existing project, then click the icon and follow the menu sequence: File -> Open Folder.... This will reveal Figure 10.

    

    Figure 10 : Opening the Project folder

11. Now, in the Open Folder window (see Figure 10), navigate across /home/user/projects menu and select the project of your choice. In our case, it is zmanageorders. Clicking the OK button reveals Figure 11 where the sub folders within the project are listed.

    

    Figure 11 : Viewing the sub folders in the project

12. In Figure 11, expand the webapp folder and create a new sub folder named lib within it (see Figure 12).

    

    Figure 12 : Creating the lib folder

13. Once the lib folder is created, right click on it and click New File option that appears. Now, in the text box that appears, specify egrum.js as shown in Figure 13.

    

    Figure 13 : Creating the egrum.js file

14. Figure 14 displays the newly created egrum.js file.

    

    Figure 14 : Viewing the newly created egrum.js file

15. Now, open the egrum.js file downloaded to any location of your localhost as mentioned in Step 2, and copy the contents of the file. Then, paste the contents in the right pane of Figure 14. Figure 15 then appears displaying the pasted contents.

    

    Figure 15 : Copying the contents of the downloaded egrum.js file

16. Then, open the Component.js file available in the localService folder as shown in Figure 16.

    

    Figure 16 : Viewing the Component.js file

17. Next, inject the RUM script mentioned below into the Component.js file (see Figure 16) below the UIComponent.prototype.init.apply(this, arguments); line which corresponds to Line 14.

    const url = new URL(window.location.href);

    const hasParam = url.searchParams.has('sap-statistics');

    if (!hasParam) {

    // First time: inject param and reload

    url.searchParams.set('sap-statistics', 'true');

    window.location.replace(url.toString());

    }

    // Inject custom script (non-AMD)

    var script = document.createElement("script");

    script.src = sap.ui.require.toUrl("<Projectname>/lib/egrum.js");

    script.onload = function () {

    console.log("egrum.js loaded successfully");

    if (typeof window.egrumInit === "function") {

    window.egrumInit(); // call global function from egrum.js

    }

    };

    script.onerror = function () {

    console.error("Failed to load egrum.js");

    };

    document.head.appendChild(script);

    Here, you should replace the <Projectname> with the fully qualified project name in your environment. In our example, it is zmanageorders and hence, the script will be as follows:

    const url = new URL(window.location.href);

    const hasParam = url.searchParams.has('sap-statistics');

    if (!hasParam) {

    // First time: inject param and reload

    url.searchParams.set('sap-statistics', 'true');

    window.location.replace(url.toString());

    }

    // Inject custom script (non-AMD)

    var script = document.createElement("script");

    script.src = sap.ui.require.toUrl("zmanageorders/lib/egrum.js");

    script.onload = function () {

    console.log("egrum.js loaded successfully");

    if (typeof window.egrumInit === "function") {

    window.egrumInit(); // call global function from egrum.js

    }

    };

    script.onerror = function () {

    console.error("Failed to load egrum.js");

    };

    document.head.appendChild(script);

    

    Figure 17 : Component.js file injected with the RUM script

18. Once you are done injecting the RUM script as shown in Figure 17, save your changes and redeploy the SAP BTP Fiori application.

19. To verify whether the RUM script is injected successfully and the script is active, do the following:

    • Empty the cache and hard reload your application tab.

    • Monitor the browser console for the message: "egrum.js loaded successfully"

Instrumenting SAP BTP Fiori Other/Advanced Apps

To RUM-enable SAP BTP Fiori Other/Advanced Apps, do the following:

1. Follow the Steps 1 to 15 mentioned in Instrumenting SAP BTP Fiori Basic Apps topic. In our example, however, we take the project name as zmangeordersnew.

2. Open the Component.js file available in the localService folder as shown in Figure 18.

   

   Figure 18 : Viewing the Component.js file

3. Replace Line 3 in Figure 18 to function (AppComponent) and replace return Component in Line 6 to return AppComponent.

4. Next, inject the RUM script mentioned below into the Component.js file (see Figure 18) below the parentheses "}" underneath manifest: "json" line which corresponds to Line 9.

   ,constructor: function () {

   AppComponent.prototype.constructor.apply(this, arguments);

   const url = new URL(window.location.href);

   const hasParam = url.searchParams.has('sap-statistics');

   if (!hasParam) {

   // First time: inject param and reload

   url.searchParams.set('sap-statistics', 'true');

   window.location.replace(url.toString());

   }

   // Inject custom script (non-AMD)

   var script = document.createElement("script");

   script.src = sap.ui.require.toUrl("<Projectname>/lib/egrum.js");

   script.onload = function () {

   console.log("egrum.js loaded successfully");

   if (typeof window.egrumInit === "function") {

   window.egrumInit(); // call global function from egrum.js

   }

   };

   script.onerror = function () {

   console.error("Failed to load egrum.js");

   };

   document.head.appendChild(script);

    

   }

   Here, you should replace the <Projectname> with the fully qualified project name in your environment. In our example, it is zmanageorders and hence, the script will be as follows:

   ,constructor: function () {

   AppComponent.prototype.constructor.apply(this, arguments);

   const url = new URL(window.location.href);

   const hasParam = url.searchParams.has('sap-statistics');

   if (!hasParam) {

   // First time: inject param and reload

   url.searchParams.set('sap-statistics', 'true');

   window.location.replace(url.toString());

   }

   // Inject custom script (non-AMD)

   var script = document.createElement("script");

   script.src = sap.ui.require.toUrl("zmanageorders/lib/egrum.js");

   script.onload = function () {

   console.log("egrum.js loaded successfully");

   if (typeof window.egrumInit === "function") {

   window.egrumInit(); // call global function from egrum.js

   }

   };

   script.onerror = function () {

   console.error("Failed to load egrum.js");

   };

   document.head.appendChild(script);

    

   }

   

   Figure 19 : Injecting the RUM script in Component.js file

5. Once you are done injecting the RUM script as shown in Figure 19, save your changes and redeploy the SAP BTP Fiori application.

6. To verify whether the RUM script is injected successfully and the script is active, do the following:

   • Empty the cache and hard reload your application tab.

   • Monitor the browser console for the message: "egrum.js loaded successfully"