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.
Perhaps you read the release notes for release Q4 2019 of SAP Analytics Cloud, you might have run across this bit of text.
“You can now create your own custom widgets with the SAP Analytics Cloud Custom Widget SDK, which will allow you to extend the predefined set of widgets provided by the Analytics Designer! For more information please visit the help section.
”
Or perhaps you logged into your tenant and found a new menu option
That’s right, the first iteration of custom widgets is finally available! So… what are custom widgets, why would you want them and how can you use them?
What custom widgets are
Custom widgets They are normal widgets that show up in the widget palette and work like any other widgets; except that they were built by customers or partners, instead of by SAP developers. They have properties, events and a script interface, just like SAP supplied widgets. You may have already seen custom widgets in demos. If you are familiar with the airline flight planning dashboard that we demoed at this year at SAPPHIRE or SAPInsider, you saw four custom widgets in action:
An animated gauge.
An SVG widget, for showing various custom shapes in the dashboard.
A date picker, which filtered the days on which we were looking at flights.
A chart that looked a bit like a airline booking seat picker, but was in fact a heatmap of currently booked occupancy on a particular flight.
All four of these were built and deployed using the same custom widget workflow that is now publicly available.
Why you would want them
Our list of requests for supporting chart types and controls is miles long. Miles…Long…. We have to prioritize the scenarios where we can benefit the majority of our customers. That’s where custom widgets come in. It seems that every everyone has at least one unique wish. You almost certainly have them too. Put a pen to paper and think of the different ways that you’d like to display information or interact, if you could.
Want to have that highly specialized KPI tile that displays your information exactly so, has scriptable fonts and is clickable? Or one that has an asymmetric layout?
Want a butterfly table, with the dimensions shown down the middle and the measures to either side?
There are a million variants of the gauge.
Want a 3D pie chart? Every data design guru out there agrees that anything 3D is hard to read chart junk and we’ll probably never ship them in the standard product. But I guarantee you that there is someone out there that thinks they are the bees’ knees.
Want to show a particular one-off diagram in a particular way?
Now you can!
How do customers use them?
It is very simple. Every widget consists of two things; a bit of JavaScript and metadata file. The metadata file has a .json filename extension and is called that because the metadata is organized as, wait for it, json. A customer who want to enable a custom widget on their system has to do one thing; simply upload that json file. That’s it. The widget will be enabled and will show up in your palette. If the future, we’ll enable the distribution of widgets via the content network, to make this management even easier.
How are they made?
You might already be familiar with the custom components that are available for Lumira Designer. SAP Analytics Cloud custom widgets are conceptually similar; a more advanced 2.0 version if you will. We began by interviewing customers who built their own widgets, partners who built widgets for customers and active members of the community component team. What did they like about the architecture, what was problematic and what would they like? A few things stood out.
Widget developers wanted us to minimize the learning curve but be forward looking. We did this by keeping many development concepts the same (e.g the metadata management file, the broad approach to adding properties and script methods), but modernizing (using json, instead of XML) using WebComponents for a clean extension of html, etc.
Widget developers want to use their favorite IDE and not be forced to use a particular one. Lumira Designer’s design time is an Eclipse RCP application. It extends eclipse and in turn offers up extension points. Lumira Designer component developers are in fact developing Eclipse extensions that extend Lumira Designer. In SAP Analytics cloud, we moved away from this. You only need to worry about your web design and can use your favorite IDE.
Widget developers edit, host and update their widgets on their own cycle. The javascript can be hosted on their favorite cloud hosting service and the customer only needs to install the metadata file to enable the widget. This allows for easy management and updating of widgets; something both developers and customers can agree is a good thing.
In the next days and weeks, I’ll be writing a short series on creating your first widget, along with some tips and tricks. You can also read the developer's handbook here.
Looking to the future
With this first release of customer widgets, the sky is the limit on what you can build in SAP Analytics cloud. We have big enhancements planned as well. In mid 2020, we plan to bring direct data binding to widgets, so that they can directly read from data models. We also plan to enable custom widgets in stories. Right now, they only run in apps, but we’ll enable them in stories as well, allowing for write-once, run-anywhere widgets.
Sorry about that. I had the original draft version linked, not the productive (and public) version. I updated the documentation link, so you should be good to go.
Right now, just in apps. The basic architecture is designed to work in stories too, but some work needs to be done to enable them in stories and we do plan to enable them in stories. Unfortunately, I can't say when that will be.
I am really looking forward to this blog series. We already created some widgets, but we struggle with more complex ones, e.g. which import other JS/ TS libraries from existing widgets/ web components. Will you cover this in your series?
From what I can understand so far, we can't create an input table widget right now. Data binding is expected in mid-2020 and there is no API to set a value in a data-cell in a hidden existing table. Are my thoughts correct?
Hi David, Any idea on how to use javascript libraries in our custom widgets. In the SDK docs it was mentioned we can use additional javascript libraries but it was not implemented anywhere in the docs or sample widgets. Any supporting docs or sample will be helpful. Thanks
As a custom widget author you have the freedom to choose the Web Server vendor or service vendor you want to use. You can even use a public Content Delivery Network (CDN) if you want. It is just the contribution JSON which needs to be installed into SAP Analytics Cloud system.
The idea is just to use state of the art JavaScript development tooling with bundlers like WebPack which bundles all your content into one or more files.
Depends on what you mean with "set a value in a data-cell". It is not possible to change data cell values in general. However in planing models you can change the value using Table.getPlanning().setUserInput(...). So if you pass a table reference to your custom widget you can use this function.
Say, we do not want to make the javascript public and what to host the same in an authentication enabled web server (like google drive). How to specify the credentials in the metadata file in this case?
The js files don't need to be hosted on a public server. You could host them locally, inside your firewall. E.g. I have Node.js installed on my laptop and the http-server package. Whenever I need to statically host a file, it is a single command in the terminal. Node would also be my go-to tool if I were hosting on Azure or AWS.
At present I am hosting the code files in a tomcat web server within corporate firewall. But this way, the dashboard throws error when opened from a client outside firewall.
We do not have a server in the dmz or an AWS ec2 instance at present. Hence checking if we can upload the same in google drive and protect it's download using some authentication.