Embed an SAP Analytics Cloud Story in a Simple Web App
- How to create a simple web application hosted on your local computer
- How to use OAuth to authorize your app to access your protected SAP Analytics Cloud data
- How to embed an SAP Analytics Cloud story
Prerequisites
- A user with story read permission on an SAP Analytics Cloud system
- Access to the administration settings
- SAP Analytics Cloud story for which you have access rights (a story that you have created, or a story that is shared with you)
- Node.js installed on your local computer
- A Google Chrome or a Microsoft Edge browser
SAP Analytics Cloud is SAP’s cloud-based analytics solution. All data visualizations are provided by so-called stories. This tutorial describes how to embed an existing SAP Analytics Cloud story into a simple external web app. It makes use of the SAP Analytics Cloud URL API that allows you to directly open stories in a URL. The embedding happens in an <iframe>
element of a web page of the app.
For that purpose you need:
-
A user for a non-trial SAP Analytics Cloud system. Such a system could also be a system that belongs to an instance of SAP Analytics Cloud, embedded edition. A trial account would not be sufficient as the user does not have required permissions.
-
Edit rights of the administration settings. If you do not have edit rights another user with the Admin or the BI Admin role might help you here.
The challenging part is how to handle the login screen of the identity provider assigned to your SAP Analytics Cloud system. A mandatory step is to authenticate the user on whose behalf the app wants to access the user’s protected SAP Analytics Cloud content before the story data can be rendered in the <iframe>
element.
SAP Analytics Cloud runs on SAP Cloud Platform which provide the environment Cloud Foundry. Cloud Foundry is supported by data centers of SAP partner vendors like AWS.
Cloud Foundry environment (non-SAP data centers):
The redirect to the identity provider happens not in the <iframe>
but in a separate popup window, so clickjacking is not relevant. However, we want to avoid this interruption in the UI experience (separate browser window). In this scenario, we achieve a seamless experience again by separating the user authentication from the rendering of the SAP Analytics Cloud story in the <iframe>
.
This is the workflow of the app:
-
The starting page lets the user log in to their SAP Analytics Cloud system. In the background, the user gets authenticated and the app receives the authorization to access the user’s SAP Analytics Cloud data leveraging an OAuth authorization workflow.
-
On the second page, the user requests an SAP Analytics Cloud story whose URL is preconfigured in the app code. The story is displayed on this page inside an
<iframe>
.