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