Skip to Content
Technical Articles
Author's profile photo Pieter-Jan Deraedt

Monitoring a Fiori Launchpad on SAP Cloud Portal using Dynatrace.

While a lot of SAP customers use a Fiori Launchpad, they often lack insight in how the Fiori Launchpad is used. What apps are used? How often? What is the general performance of these applications? Do our users experience any problems they are not telling us about?

To get more insight in Fiori Launchpad usage, we can use a solution like Dynatrace. Dynatrace is an AI powered full stack application monitoring solution. As it’s a full stack solution, it can also be used to get more insight in our Fiori Launchpad’s usage. In this blog I will show you how to connect Dynatrace to your Fiori Launchpad running on the Cloud Portal.

This blog post has three sections:

  • Step 1: Creating your Dynatrace account
  • Step 2: Creating a Fiori Launchpad plugin
  • Step 3: Adding the plugin to the Fiori Launchpad

Step 1: Creating your Dynatrace account

Go to www.dynatrace.com, click on “Free trial” in the top right corner and start your free trial by entering your email address and clicking the “Start free trial” button.

Enter your email address and password:

Enter your account details:

Select a region and accept the terms and conditions.

After clicking “Create account” and waiting a few seconds you will be able to Deploy Dynatrace.

To deploy Dynatrace, select “Set up agentless or AMP monitoring”.

Choose a name for your application and click on “Add web application”

After creating your application, Dynatrace will show you a code snippet you can embed in your web application. Don’t copy this snippet just yet, we will first change some settings of our application.

To do this, go to “Applications” in the left navigation pane.

In the application list, click on your application name.

In the top right, click on the three dots and click “Edit”.

Go to the “Async requests and single page apps” section and change the settings as indicated on the screenshot.

Next Go to the “Setup” section and change the settings as indicated on the screenshot.

We have now finished our Dynatrace account creation and application setup and are now ready to embed this into our Fiori Launchpad. To do this, the next step is to create a Fiori Launchpad plugin.

 

Step 2: Creating a Fiori Launchpad plugin

Open a new browser tab and navigate to the WebIDE Full Stack.

Go to the settings of the WebIDE and make sure SAP Fiori Launchpad Extensibility is activated.

Create a new project from template

Select “SAP Fiori Launchpad Plugin” as template.

Choose a project name

Set the Plugin ID and Title and click “Finish”.

In the webapp folder, create a new folder named “lib”.

In the “lib” folder, create a new filed named “dynatrace.js”

Now go back to your Dynatrace browser tab and go to the “Setup” section. Click on “copy code snippet” and paste this snippet in your newly created “dynatrace.js” file in the WebIDE.

Remove the opening <script type=”text/javascript”> and closing <script> tag.

Now go to the manifest.json file of your application and add the “dynatrace.js” file as a resource.

Now deploy your application to the SAP Cloud Platform

After deploying, make sure your Dynatrace HTML5 application is started in the cockpit:

Now that our plugin is ready, the next step is to add this plugin to the Fiori Launchpad on Cloud Portal.

 

Step 3: Adding the plugin to the Fiori Launchpad

Go to the Cloud Portal service on SAP Cloud Platform and select the Fiori Launchpad you would like to monitor using Dynatrace. Click Edit.

Go to the “Apps” section and click on the “+” to add a new app.

Browse for app resources

 

Select the Dynatrace app and click on “OK”.

Make sure you add the app to one or multiple catalogs active for all users.

After adding the app to a catalog, change the app type to “Shell Plugin” and click “Save”.

Publish the site and open it.

Congrats! You have now activated Dynatrace monitoring for your Fiori Launchpad site. Click around in the site and wait a few seconds. After a while your results will start coming into Dynatrace.

If you click on your application, you will be able to see a detailed breakdown of your application’s performance.

 

Some examples are Geolocation breakdown of your users:

 

Or a browser breakdown including Javascript errors, top user actions etc:

 

Have fun playing around with the Dynatrace dashboard!

You can also check out Dynatrace in the AppCenter:

https://www.sapappcenter.com/apps/16545/dynatrace#!overview

Assigned Tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      Hi Pieter-Jan Deraedt,

      Thanks for posting on this topic. I have heard about Dynatrace before but never got to see it in action. Can you please add a link to the Appcenter where we can find more info on this partner app – https://www.sapappcenter.com/apps/16545/dynatrace#!overview

      Few months back Ido Shemesh had posted on a similar topic around the usage of Google Analytics. I am keen to understand what is the difference between the two. Could you also add a link to the full set of features of Dynatrace which we can use to visualize after integration with a Fiori Launchpad.

      Cheers,

       

       

      Author's profile photo Pieter-Jan Deraedt
      Pieter-Jan Deraedt
      Blog Post Author

      Hi Murali,

      My knowledge about Google Analytics dates from quite a while back, but from what I remember it was purely focused on the analytical part.

      Dynatrace is focused on complete monitoring of applications. The analytics about the usage is really something that comes on top.

      The monitoring allows you to be alerted when errors on the pages occur, how often they occur, on what browsers they typically occur, ... All of this monitoring not only for your frontend code, but also for your complete backend solution. There's also an AI engine that correlates log data, monitoring data and is providing you insights on issues as soon as they occur.

      I will probably write some more blog posts about it. Stay tuned 🙂

      Greets,

      Pieter-Jan

      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      Thanks Pieter-Jan

       

      Author's profile photo Matthieu Pelatan
      Matthieu Pelatan

      Hi Pieter-Jan,

      Very nice blog! Thanks for sharing your experience of using Dynatrace on the SAP Cloud Platform.

      Cheers,

      Matthieu

      Author's profile photo Nabheet Madan
      Nabheet Madan

      Great Blog. Monitoring is a very important part of an application, something like this should actually come with FIORI, hopefully in next few months we will see such tool.

      Thanks

      Nabheet

      Author's profile photo Lakshmi Narasimhan Neelakantan
      Lakshmi Narasimhan Neelakantan

      Thanks, Peter!

      Can Dynatrace monitor all the components in a portal application?

      Let's say if we have SAP Cloud Portal application that stores data in HANA DBaaS.  Can it track and send alerts if the portal is not operational due to problems with HANA DBaaS outlined in following scenarios?

      Scenario 1: HANA DB is down but Portal app loads but some functionality doesn't work.

      Scenario 2: HANA DB is not operational due to memory leak but HANA and Portal application is up and running which doesn't allow IT to detect the problem proactively.

      Author's profile photo Pieter-Jan Deraedt
      Pieter-Jan Deraedt
      Blog Post Author

      Hi Lakshmi Narasimhan Neelakantan,

      Very good question. Stay tuned for a follow-up blog post after my holiday where I will show some of this.

      Greets,

      Pieter-Jan

      Author's profile photo Ashok Kumar M
      Ashok Kumar M

      Hi Pieter-Jan Dereadt

      Do you have any update? Can Dynatrace be used to monitor outage or exceptions coming from HANA and Java layers as well - like the Monitoring Service available in SAP Cloud Platform?

       

      Best Regards,

      Ashok.

      Author's profile photo vishnu Babu
      vishnu Babu

      Hello Pieter-Jan Deraedt ,

      Do we have any way to implement the same in onpremise system.

      Regards,

      Vishnu B

      Author's profile photo Lukas Huber
      Lukas Huber

      Hi together

      is there any solution now? I would also like to install Dynatrace on an onpremise system.

      Thanks!

      Author's profile photo Greg Malewski
      Greg Malewski

      Hi,

      I have described the solution for monitoring the SAP Fiori launchpad applications in on-premise systems in my blog:

      https://blogs.sap.com/2020/01/02/apps-usage-report-for-sap-fiori-launchpad/

       

      I hope it will be helpful.

       

      Regards and pozdrawiam

      Greg

       

      Author's profile photo Bart Abbink
      Bart Abbink

      Hi Pieter,

       

      Thanks for this blog, great help.

      We have put in the monitoring in our Fiori Launchpad on SAP Cloud Portal.

      I assume that the replacement of the document.write needs to be done to avoid browser blocking issues.

      However, the Dantrace javascripts has changed lately and I am not sure how to replace the code these days.

      before it was like as in the blog:

      var eb = e.agentUri || ka(e.featureHash);
      e.async ? ja(eb, e.async) : document.write('<script type="text/javascript" src="' + eb + '">\x3c/script>')

       

      Nowadays it looks like

                              if (!m("auto") && !m("legacy") && !Ib) {
                                  var P = l("agentUri") || Ja(l("featureHash")),
                                      Q;
                                  if (!(Q = m("async") || "complete" === document.readyState)) {
                                      var R = d.navigator.userAgent,
                                          S = R.indexOf("MSIE ");
                                      Q = 0 < S ? 9 >= parseInt(R.substring(S + 5, R.indexOf(".", S)), 10) : !1
                                  }
                                  Q ? Aa(P, m("async"), void 0, void 0, "dtjsagent") : (document.write('<script id="dtjsagentdw" type="text/javascript" src="' + P + '">\x3c/script>'), document.getElementById("dtjsagentdw") || Aa(P, m("async"), void 0, void 0, "dtjsagent"))
                              }
      

       

      Did you came accross this as well and do you have an update on how to replace the document.write with the new scripts.

       

      Thanks very much in advance

      Bart Abbink

       

      Author's profile photo Pieter-Jan Deraedt
      Pieter-Jan Deraedt
      Blog Post Author

      Hello Bart Abbink ,

       

      Sorry for the late reply, but it's no longer necessary to update the script. It works out of the box now. I've updated the blog post with this information.

       

      Kind regards,

      Pieter-Jan

      Author's profile photo Pieter Van Heck
      Pieter Van Heck

      Thanks Pieter-Jan

      Author's profile photo Haoran Li
      Haoran Li

      Hi Pieter-Jan,

      Thanks a lot for your sharing. Currently, we have a new issue during our monitoring.

      We find that report requests are sent to Dynatrace successfully, however, there’s nothing shown in Dynatrace.

       

       

      Do you know what wrong with it ? Could you please give us some suggestions?

      Thanks a lot for you kindly help!

       

      Best regards,

      Haoran

      Author's profile photo Pieter Van Heck
      Pieter Van Heck

      Hi Hoaran, please open up a support case with Dynatrace that will be the quickest way to get this resolved and if you have the chance add a small comment afterwards. Thank you Pieter.

      Author's profile photo Badrinath Srinivasan
      Badrinath Srinivasan

      Hi Pieter-Jan Deraedt,

      This is an useful blog for the Dynatrace implementation in our organization's Fiori launchpad. Thanks for the clear explanation.

      After implementing in our on-premise central HUB gateway system, we are able to run the Dynatrace script successfully. But our existing productive Fiori App Tiles are giving the below error

      "App could not be opened because the SAP UI5 component of the application could not be loaded."

      Do you feel whether we are missing any launchpad configuration other than the "Shell-plugin" one ? We assigned this to a catalog and group and finally to a role. Or Do you feel any missing notes which causes this disruption of existing tiles ?

      Regards,

      Badrinath.

      Author's profile photo Poonam Kshirsagar
      Poonam Kshirsagar

      Hi Badrinath,

       

      i am facing same issue. After activating Dynatrace plugin, FIori launchpad is not able to load some applications. have you found any solution.

      Author's profile photo Badrinath Srinivasan
      Badrinath Srinivasan

      Hi Poonam,

      The Dynatrace team had done some changes in the script provided and it started working for us. This is not because of our launchpad configuration.

      If I understood correctly, they changed some variables values n the script which made it work for us.

       

      Regards,

      Badri.

      Author's profile photo Shabir Rahim
      Shabir Rahim

      Hi Pieter,

      Thanks for the blog. Is this applicable for launchpad running from On Premise Gateway server? The Launchpad content manager in Gateway doesn't have APP option to choose Shell type.