Skip to Content
Product Information
Author's profile photo David Stocker

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?

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.

Stay tuned!

Assigned tags

      25 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Aditya Garg
      Aditya Garg

      Excellent

      I was waiting for it.

      Thanks David.

      Author's profile photo Prathamesh Acharya
      Prathamesh Acharya

      Good to know and much awaited, thanks for sharing David !

      Author's profile photo Martijn van Foeken
      Martijn van Foeken

      Hi David,

      Thanks for the update regarding Custom Widgets! Looking forward to your blog series.

      Kind regards,

      Martijn van Foeken | Interdobs

      Author's profile photo Cristina Talmaciu
      Cristina Talmaciu

      Hi David! This custom widget can be used in stories as well or just in applications?

      Author's profile photo David Stocker
      David Stocker
      Blog Post Author

      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.

      Author's profile photo Emiliyan Tanev
      Emiliyan Tanev

      You can also read the developer’s handbook here.

      403: You don't have access.

      Hi David,

      I guess the developer handbook is not yet released for the general public? How can we enroll?

       

      Author's profile photo David Stocker
      David Stocker
      Blog Post Author

      Hi Emiliyan,

       

      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.

       

      Cheers,

      Dave

      Author's profile photo Emiliyan Tanev
      Emiliyan Tanev

      Thank you very much, Dave. It works now!

       

      Question:

      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?

      Author's profile photo Bob Pfeiffer
      Bob Pfeiffer

      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:

      https://help.sap.com/doc/958d4c11261f42e992e8d01a4c0dde25/release/en-US/index.html

      Author's profile photo Andreas Kramer
      Andreas Kramer

      Hi David,

      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?

      Kind regards,

      Andreas

      Author's profile photo Savith Satheesh
      Savith Satheesh

      Hi David,

       

      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 ?

       

      Regards,

       

      Savith

      Author's profile photo Bob Pfeiffer
      Bob Pfeiffer

      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.

      Author's profile photo Ferry Djaja
      Ferry Djaja

      hi all,

      I am using SAC version 2019.21.8, but in SAC menu > Browse, I could not find the Custom Widget option. Any idea why ?

      Regards

      Ferry Djaja

      Author's profile photo Ferry Djaja
      Ferry Djaja

      I managed to get the option. It is due to security settings.

      Author's profile photo Vignesh Kamath
      Vignesh Kamath

      yes i too found it, it was the application creator role that needs to be assigned

      Author's profile photo Vignesh Kamath
      Vignesh Kamath

      I am also using the latest build of SAC, yet not able to find the Custom Widget option

      Author's profile photo Bob Pfeiffer
      Bob Pfeiffer

      Make sure you have the right permissions for your user. See https://help.sap.com/doc/00f68c2e08b941f081002fd3691d86a7/2020.1/en-US/c5708dc365714dc89f9ef396e485b891.html

      Author's profile photo Devaraj NS
      Devaraj NS

      Can we create table widget right now? Any ETA for Data binding?

      Author's profile photo Praveen singh
      Praveen singh

      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

      Author's profile photo Bob Pfeiffer
      Bob Pfeiffer

      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.

      Author's profile photo Arijit Das
      Arijit Das

      Hi David,

      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?

      Thanks,

      Arijit

      Author's profile photo David Stocker
      David Stocker
      Blog Post Author

      Hi Arijit,

       

      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.

       

      Cheers,

      Dave

      Author's profile photo Arijit Das
      Arijit Das

      Hi David,

      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.

      Thanks,

      Arijit

      Author's profile photo Arijit Das
      Arijit Das

      Hi,

      Just realized that there is no point in protecting the source code as anyways in browser developer tools, the code will be visible.

      Thanks,

      Arijit

      Author's profile photo Antony Savari
      Antony Savari

      Any update on the data binding for custom widgets? Per this blog, it had to be available by mid 2020.