SAP Analytics Cloud and Custom Widgets
Author Arianit Lutfiu, Analytics Consultant, NTT DATA Business Solutions UK
What is a Widget?
You may not be aware of the term widget, custom or otherwise, but I am certain you have used them before even if you weren’t aware of it. Perhaps you were booking a seat for your flight or maybe browsing through your favourite social media site, if so then you probably looked at, or interacted with, a widget.
Fundamentally, a widget is a stand-alone functional element that can be embedded into websites or applications to provide additional capabilities for your audience. In the context of SAP Analytics Cloud (SAC), SAP’s cloud-based Analytics SaaS solution, Widgets are mainly used for presentation and display purposes. They are used to visualise information as graphs or charts to show data on maps or by other representations like gauges.
SAC has a set of standard widgets that can be used either within stories, where users can explore and visualise data for reporting and analysis, or as part of Analytic Applications, where developers are able to create rich, interactive applications. Depending on your requirements, together these standard widgets will likely cover the majority of your common visualisation needs.
Example of custom globe visualisation
But what if you want to use a particular type of map or chart to better visualise your information? Or perhaps you want to include custom functionality to allow your audience to interact with the data? Maybe you would like your users to be able to enter amended values and write them back to your data model or send an email with commentary about particular findings?
If you have a desire to create more tailored stories or applications, then this means you’ll need to look beyond the standard widgets available within SAC.
You will need the ability to create a bespoke solution, aligned to your specific requirements which extends SAC Cloud beyond what is in the box and into whatever you can imagine.
When you have this kind of need, then this is where Custom Widgets might come in very useful.
Example of custom functionality
What goes into creating a Custom Widget?
At their simplest, custom widgets are a collection of different files which, when read together, tell SAC what additional visualisation and functionality is available to the user and how to execute this functionality within a story or analytical application.
Some files are mandatory, and others are only required depending on the type and scope of functionality that you want your widget to offer.
The simplest example of a custom widget just requires a .JSON File, a Main Web Component (JavaScript File) and an Icon File:
The .JSON file contains the metadata of your custom widget in the form of tags, Id’s, methods, events and other properties. It also tells SAC where to find the other webcomponent files (Main, Styling, Builder) used by the widget.
The Main webcomponent file is essential as this file contains the JavaScript that provides the core functionality to the widget by providing the code containing the relevant methods and events for you to use within SAC.
Finally, we have an Icon file which is used to provide an image to represent your custom widget within SAC.
Depending on your needs this could be sufficient, but to create a more complex widget, you might want to include a Styling Webcomponent file and a Builder Webcomponent file. These files will better enhance your widget giving it more functionality and purpose to your analytical application:
You can have the optional Styling Webcomponent file which allows you to enhance your custom widget’s look and feel by making use of the styling pane within SAC.
You can also add another JavaScript file for an optional Builder Webcomponent, which is used to set certain property values and control functional settings of the custom widget.
Incorporating custom widget code into SAC
So how do you get your Custom Widget and its code into SAC? At the heart of the process is the use of a Shadow Document Object Model. This is a method by which you can encapsulate custom code within an application or an HTML page without affecting the main source code of the HTML page.
SAP has taken this route to ensure that you are able to change, add or remove from your widget without actually affecting the applications code. SAC does not allow you to interfere with the HTML & JavaScript of your SAC Tenant, so they allow you to use a shadow DOM where you are able to have added adjustments of the HTML code on the widget, but without affecting the SAC HTML and JavaScript.
This is the reason why we need to have access to an external webserver, as SAC doesn’t allow us to host our files and code within SAC. We need somewhere to host our custom widget files so that SAC can access them when it needs to.
Working with custom widgets in SAC
1 All files apart from the .JSON file are stored on your external Webserver.
2 You upload your main .JSON file on to your SAC tenant and use it within a story or analytic application.
3 The end-user goes on to run the story or analytic application which contains the custom widget
4 This prompts SAC to use the custom widget’s .JSON file and connect with the external webserver.
5 Your SAC tenant fetches the relevant files outlined in the .JSON file and loads them onto the Shadow-Dom so the functional code and visualisations can be executed.
6 You are now able to interact with the widget within your analytic application.
SAC gives us a file format/structure you will need to follow to ensure that your widget works, it’s ok, it’s not as daunting as it sounds and it’s just a simple process to follow to ensure that your widget is created.
How do I go about starting to develop my own?
Hopefully I’ve piqued your interest in custom widgets and explained why you might want to move away from the standard ones available to you and start thinking about what you could create yourself.
If you now want to create your own widget but don’t know where to get started, there are tons of walkthroughs and blogs about custom widgets you can find, and I have highlighted some excellent blogs and walkthroughs which were beneficial to me.
SAP Documentation
Blog
Videos
Coding Help
Finally, if you feel you do not want to go through the process of scripting and creating your own bespoke widget then you are able to buy widgets from 3rd party vendors. With this approach, the scripting has been done for you and all you need to do is configure the widget to include your data and host the files on your webserver.
The sky is the limit on what you can build in SAC, and Custom Widgets are a great example in how we can make stories more impactful and entertaining. Custom Widgets allow you to make your stories and analytical applications more engaging for your users, and that’s the first step in them getting more value out of their data and making better decisions for their business.
Want to find out more about the latest analytics developments in the world of SAP? Then why not register for #itelliFest2020 On Demand