Skip to Content

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.

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.

Beautify the JS-code by selecting Edit -> Beautify (or shift + command + B)

Now to make the Dynatrace JS code work correctly in the FLP, we need to make a small change in the JS code. To do this, search for “document.write” in the Dynatrace.js file.

Replace this piece of code:

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

With:

var eb = e.agentUri || ka(e.featureHash);
var script = document.createElement('script'); 
script.type = 'text/javascript';
script.src = "" + eb;
e.async ? ja(eb, e.async): document.getElementsByTagName("head")[0].appendChild(script);

Now go to the manifest.json file 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

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

  1. 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,

     

     

    (0) 
    1. Pieter-Jan Deraedt 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

      (0) 
  2. 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

    (0) 
  3. 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.

    (0) 

Leave a Reply