Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Product and Topic Expert
Product and Topic Expert
This one you're all going to like....

No really, you're going to love this... however I cannot take credit for the idea, just this blog post. I love creating customer specific SAC stories, I use tools to get proper logos, I use ColorPic to make sure the colours I use are exactly what the customer has in his / her logos but now we can take the personalisation one step further.

So you have created your SAP Analytics Cloud (SAC) story with fully interactive visualisations and feeling proud of yourself. The next step in the process is to do a playback of the solution to the business and wait for those familiar words “That’s great …. but” and you hope and pray to whatever deity is currently available that the sentence after the “but” is close to achievable.

I was recently given one of those “buts” from a client when they asked me if we could include the current live exchange rates between currencies and also their company’s stock value as part of their story. After picking myself off the floor, my initial thoughts were “This is not possible”, however it turns out to be reasonably easy to do and in the remainder of this blog I am going to explain how to go about it.

You may or may not be aware of a website called Trading View.

This website provides an overwhelming amount of information and analytical capability relating to the Stock Market and one very cool feature with the website is its abundance of free widgets that provide this information and these can be embedded into other third-party solutions and this is where SAC comes in.

For the purposes of this blog, let’s assume we want to include a widget that contains a Stock Ticker and Line Chart that tracks the GBP vs EUR performance over time in our Story.

The first thing we need to do is go to the Trading View website and look for the “Widget” section. (This can be found under the “More” option on main menu bar at the top of the webpage). Once in the widget section, scroll down until you find a section titled “Mini Chart Widget”. Select the “Get Widget” option and you will be presented with the screen below. You can use any and all of the widgets in this section but for this blog we'll just use the "Mini Chart Widget" - the method however is identical for all of them.

You are presented with a number of options and the first thing we want to do is change the symbol field so that it reports GBP vs EUR. Under Symbol field enter the value “GBPEUR” and you will be presented with two options as shown in the screen below. We now select the option that is appropriate for our use case.

Once we have changed the symbol we then click on the “Apply” option and the changes we have made will be reflected through on the chart. As you can see from the screen below, there are a number of options available which allow you to:

  • Determine how far back you analyse the exchange rate

  • The colour theme you want to use

  • The size

The widget is now ready to take into SAC but the question is, how do we get it into SAC?

To include the widget in SAC we need to make use of the Console in Chrome Developer Tools and to access this we can either press F12 or access the console by selecting the Chrome Options (Ellipses at the top right hand corner of Chrome) and choosing “More Tools” and “Developer Tools”. This should bring up a window shown in the screen below.

We want to select “Element” tab and this will display the HTML code that was used to build the webpage as shown above. As we hover over the code it highlights the corresponding elements on the webpage. The easiest way to identify the element that makes up the widget that we want is to search for a specific container. To search select Ctrl + F to bring up the search bar and enter “iframe”. There could be several iframes in the code so look for the one that highlights the widget we want when you hover over it.

Now the eagle-eyed ones amongst you will notice within this container there is a URL and this is what we are looking for. The next step is to copy this URL and go back into our SAC story where we want to include the new widget. Finding the correct bit of HTML can be a little awkward but once you've done it for the 1st time it's very obvious what code to copy.

Once in the SAC story, select the option to insert a “Web Page” as shown below.

Give the Web Page a Title and paste the copied URL into the “Web Page Address” entry. Once you have completed the fields hit Enter. Et Voila! We now have a stock chart widget in our story. Multiple stock widgets can be included in our story as shown in the video below. *Note you only need the URL elements and not the iFrame HTML code as well.

There is obviously a lot more you can do with these widgets such as styling, etc. One very cool feature of these widgets is that they are live and they will update the information in real time whilst our Story is open.

Trading View is a fantastic website for providing stock exchange based information and offers a whole host of new and interesting widgets that can be utilised to bring much more to your SAP Analytics Cloud Story. Trading View are happy for their widgets to be included in third-party solutions and have given their full consent for this blog to be published.

Many thanks to my colleagues at iTelligence for providing the original ideas and blog post that I have basically stolen / reproduced (with their full permission) and thanks specifically to Garry Stewart and Charles Braybrook. Also thanks to Andrew Fox who pointed me in the direction of the original blog post in the 1st place.

So now you have it... there are almost 20 different types of widgets we can use - I certainly would not put them all on one SAC story but perhaps the customer stock or financial fundamentals on the 1st page of a story - that would work...

Happy Demos

Daniel Davis
1 Comment