Announcing Custom Widgets in SAP Analytics Cloud
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?
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.
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.
I was waiting for it.
Good to know and much awaited, thanks for sharing David !
Thanks for the update regarding Custom Widgets! Looking forward to your blog series.
Martijn van Foeken | Interdobs
Hi David! This custom widget can be used in stories as well or just in applications?
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 guess the developer handbook is not yet released for the general public? How can we enroll?
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.
Thank you very much, Dave. It works now!
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?
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.
See API reference:
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?
We created custom widget, but still in a confusion to understand where all JS files need to be hosted in ?
Is there any option to upload it in sac itself ?
or where else we can do that ?
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.
I am using SAC version 2019.21.8, but in SAC menu > Browse, I could not find the Custom Widget option. Any idea why ?
I managed to get the option. It is due to security settings.
yes i too found it, it was the application creator role that needs to be assigned
I am also using the latest build of SAC, yet not able to find the Custom Widget option
Make sure you have the right permissions for your user. See https://help.sap.com/doc/00f68c2e08b941f081002fd3691d86a7/2020.1/en-US/c5708dc365714dc89f9ef396e485b891.html
Can we create table widget right now? Any ETA for Data binding?
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.
Just realized that there is no point in protecting the source code as anyways in browser developer tools, the code will be visible.
Any update on the data binding for custom widgets? Per this blog, it had to be available by mid 2020.