I recently came across a requirement to embed SAP Analytics Cloud(SAC) within SAP Cloud Platform(SAP CP)  based Fiori apps and Portal sites. In this blog, I will outline the steps which I followed to achieve this. Note that this is not a step-by-step guide to follow. I am assuming you know the fundamentals of building a Fiori app/Portal site and configuring trust between solutions. If you don’t know, there are plenty of resources on SAP Community that will be of help.

Setup Trust

For demonstration, I am using Identity Authentication Service (IAS) which is the Identity Provider configured with SAC and SAP CP.

IAS is the Identity Provider where all the users are maintained. If you already have your users maintained in an on-premise/cloud IdP, you can use IAS as a proxy and again there are plenty of documents on SAP Community to show you how can achieve this.

Configure IAS by adding a corresponding application for SAC tenant as well as SAP CP tenant.  Exchange the SAML certificates and set Name ID attribute as “E-mail”

Configure IAS as Application Identity Provider in SAP CP subaccount

Similarly setup the trust with IAS within SAC. Under System > Security menu, add new “SAML Single Sign-on (SSO)” entry. Ensure that you select Email as user attribute to map to your Identity Provider.

SAC App Integration Settings

To allow SSO to work seamlessly between SAP CP and SAC and prevent any issues related to Clickjacking, you need to add SAC as a trusted domain within the IAS Tenant settings.

To enable iFrame embedding, you would need to add trusted origin. In this case, I have just selected “Allow all origins”. As a best practise, you need to add only the required hostnames.

This is documented in SAP Help.

Finally, you would need to create a URL of the dashboard which needs to be invoked from SAP CP.

When you open a story in SAC, you will see the URL in the below format

https://tenant/sap/fpa/ui/tenants/tenant_id/app.html#;view_id=story;storyId=<STORY_ID>;forceOpenView=true"

This needs to be converted to the below format as documented in SAP Help.

https://<TENANT>/sap/fpa/ui/tenants/<TENANT_ID>/bo/story/<STORY_ID>

Embedding SAC Story in Fiori App

In your Fiori app, you can refer to the URL of the SAC story within the XML file using <html:iFrame> tag . Notice that in the below screenshot, I have provided the complete URL of the SAC story (including the hostname)

The output should be similar to the below. The SAC story will render within the iFrame.  Since I have used the URL parameters “mode=embed&pageBar=disable”, the user will not be able to see any navigation menus and hence wouldn’t be able to open other stories.

To overcome the hardcoded URL, I would suggest to create destinations in SAP CP subaccount and read them in your Fiori App. This way you can transport your app to production without having to modify the source code. More info on how to obtain the destination values can be found in SAP API Hub.

You can similarly embed SAC stories within SAP CP Portal sites too. When designing a freestyle site in your Portal service, use the HTML widget to refer to the URL of the SAC story. Below is the design time of the portal site.

Once you have made your changes, you can publish the portal site and view the SAC story embedded within the site.

This is a good approach to use especially when you have users accessing lot of transactional applications and also want to have the ability to view reports/dashboards without having to switch to another browser tab in a different context. However, please note that there could be limitations of accessing a dashboard embedded within a iFrame. Though this blog focuses on embedding SAC stories within Fiori apps, I would highly recommend to launch the SAC story in a separate browser tab to when you need to give more freedom to the user to freely navigate and jump off to other reports/functionality within SAC.

Using Parameters/variables:

When passing variables & parameters to the SAC story, one of the issues we noticed was the iFrame will break the navigation for the encapsulating UI5 app as the redirect modify the global navigation history of the browser which ends up in an infinite navigation loop.

The Help documentation instructs us to change the URL in the below format when using variables.

https://<tenant-name>.eu1.sapbusinessobjects.cloud/sap/fpa/ui/tenants/009/bo/story/E7174ADADAB43F54939ED816A31F50CB?v01Model=model&v01Par=variable&v01Val=1

To resolve this issue, change the URL to the below format.

https://<tenant-name>.eu1.sapbusinessobjects.cloud/sap/fpa/ui/tenants/009/app.html#;view_id=story;storyId=E7174ADADAB43F54939ED816A31F50CB;url_api=true;v01Model=model;v01Par=variable;v01Val=1