Connection to BW/4HANA is set up? Content is organized? Your users are heavily using SAC? Then it is time to further integrate SAC in your landscape! SAC has some nice and feature rich integration options which allow you to embed SAC in other HTML5 based services/apps. I will walk you through a short and crisp guide on how to do that!

You will learn about:

• How to use the SAP Cloud Platform Portal service
• SAC embedding / integration API possibilities
• Building a simple HTML5 portal which integrates some of your SAC stories

Having the end in mind

Let me first start by showing you what we want to achieve. We want to create a simple SAP Cloud Platform based website by using the portal service. In this website we will embed an SAC story which shows some basic data. The look and feel of the SAC application will be customized to integrate seamlessly into the website. Our end result should look like this:

Enabling SAC app integration

To embed SAC into other applications we need some prerequisites:

• Allow iframe embedding in your SAC tenant
• Allow cookies in your browser from SAC
• Clickjacking protection must be disabled in your identity provider (IdP)

To allow iframe embedding go to SAC, System, Administration, App Integration. In the Trusted Origins area, select Allow all origins or Add a trusted origin.

In Chrome go to advanced settings, Privacy and Security, Content settings, Cookies and add sapbusinessobjects.cloud.

The clickjacking protection setting depends on the IdP you are using. Please refer to the documentation for the used IdP.

Prepare SAC story

Go to SAC and create a story:

Add a Responsive Page:

Add a chart by clicking on the chart icon in the toolbar. You will be prompted to select the data source. In this guide we will just use the BestRun_Demo data set.

It would be interesting to see how our juice sales managers are performing, so we select some measures and dimensions in the builder panel:

Adjust the design to your liking and save the story:

Keep the story open for now as we will need some information from the story to create the embedding code.

Creating the embedding code

An iframe code is required to embed an SAC story in an HTML5 website. So how do we create such a code? The iframe code itself looks like this:

<iframe width="400px" height="400px" src="https://url-to-my-sac-story"></iframe>

Mozilla is a great resource to learn more about the iframe (and other HTML5 tags). Go check it out to learn what you can adjust! The iframe is basically a box which loads another website. In our case we would like to load the SAC story (which is also just a website).

Okay so we have the basic iframe code but we are still missing the correct URL. This is where the SAC URL API comes into play.

It allows to construct a URL to a single story (or page) and customize the look and feel. In detail you can:

• Change the display mode: edit, view, embed (hides toolbars)
• Hide the page bar (tab bar which shows all pages in a story)
• Open a specific page in a story
• Apply multiple story filters
• Apply model variables (e.g. for BW input parameters)

Let’s keep it simple and just embed the story we have created and hide the toolbars. To achieve that the basic embedding URL to the story must be created. Copy the URL of the browser address bar when you are viewing the SAC story. For example:

https://mytenant.eu1.sapbusinessobjects.cloud/sap/fpa/ui/tenants/001/app.html#;view_id=story;storyId=DC72B85073ED4DGDE10000000A4E7468

Some valuable information can be found in the URL. The first highlighted part is the tenant. The second one is the tenant id and the third one is the story id. All of these components are required to build the embedding URL. Now copy these three information pieces into a text file. Copy and paste the following URL to another file:

https://<tenant>/sap/fpa/ui/tenants/<tenant id>/bo/story/<story id>

Replace the highlighted placeholders with the information from your SAC story URL. The result would like this for example:

https://mytenant.eu1.sapbusinessobjects.cloud/sap/fpa/ui/tenants/001/bo/story/DC72B85073ED4DGDE10000000A4E7468

Great! This already would allow us to embed the story. But let’s make it a bit nicer by applying some of the URL API options to hide the toolbars:

https://mytenant.eu1.sapbusinessobjects.cloud/sap/fpa/ui/tenants/001/bo/story/DC72B85073ED4DGDE10000000A4E7468?mode=embed&pageBar=disable

And finally copy the URL into the iframe template:

<iframe width="400px" height="400px" src="https://mytenant.eu1.sapbusinessobjects.cloud/sap/fpa/ui/tenants/001/bo/story/DC72B85073ED4DGDE10000000A4E7468?mode=embed&pageBar=disable"></iframe>

The documentation about the URL API is very helpful if would like to dive deeper into the options.

That’s it for now on the SAC side. Let’s move on with integrating the story in a custom website by using the portal service.

Registering for SAP Cloud Platform trial

Go to https://cloudplatform.sap.com/ and click on Start your free trial:

You will be prompted with a short registration dialog. Go ahead and fill out the required fields:

After the registration you will receive an email in which you must activate your account:

Activating the portal service

Head over to https://account.hanatrial.ondemand.com and select Neo Trial:

On the left side go to Services and search for Portal in the section User Experience:

Enable the service (it is free):

After a few seconds the service should be active. Now you can go to the portal service by clicking on Go to Service:

Embedding SAC into a portal website

You will be greeted with a welcome page. Click Create New Site:

Choose a site name and select the Starter Site template:

The portal service is mainly a WYSIWYG editor. We now need to embed the SAC story we have created as an iframe. For that purpose hover over the main section and press on the + icon:

This allows you to add some content. As we need an iframe we must search for HTML and select the HTML Widget:

The widget will be added to your site. Hover over the widget (it has some sample content) and click on the gear icon:

Now we are where we want to be! We have access to the HTML source code. The only thing you have to do is to paste the iframe code you have created before:

Save and publish the site (in the header toolbar):

Select Publish and Open:

Voilà you have embedded an SAC story in a custom HTML5 website:

The website and SAC story are fully functional and the story reacts to filters etc. Go ahead and try it out by selecting a sales manager and comparing them to someone else:

I hope you enjoyed this blog and it helps you to further increase the usage of SAP Analytics Cloud in your company!