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.
cancel
Showing results for 
Search instead for 
Did you mean: 
david_stocker
Advisor
Advisor
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!
25 Comments
0 Kudos
Excellent

I was waiting for it.

Thanks David.
PrathameshA
Participant
0 Kudos
Good to know and much awaited, thanks for sharing David !
mfoeken
Active Contributor
0 Kudos

Hi David,

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

Kind regards,

Martijn van Foeken | Interdobs

cristina_talmaciu
Participant
0 Kudos
Hi David! This custom widget can be used in stories as well or just in applications?
former_member192555
Participant
0 Kudos
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?

 
david_stocker
Advisor
Advisor
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
david_stocker
Advisor
Advisor
0 Kudos
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.
Andreas_Kramer
Explorer

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

former_member192555
Participant
0 Kudos
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?
former_member549257
Discoverer
0 Kudos
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
ferrygun18
Contributor
0 Kudos
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
vignesh_kamath
Explorer
0 Kudos
I am also using the latest build of SAC, yet not able to find the Custom Widget option
ferrygun18
Contributor
0 Kudos
I managed to get the option. It is due to security settings.
vignesh_kamath
Explorer
0 Kudos
yes i too found it, it was the application creator role that needs to be assigned
former_member187102
Participant
Can we create table widget right now? Any ETA for Data binding?
0 Kudos
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
Bob0001
Advisor
Advisor
0 Kudos
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.
Bob0001
Advisor
Advisor
Bob0001
Advisor
Advisor
0 Kudos
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.
Bob0001
Advisor
Advisor
0 Kudos
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
arijit_das
Active Contributor
0 Kudos
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
david_stocker
Advisor
Advisor
0 Kudos
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
arijit_das
Active Contributor
0 Kudos
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
arijit_das
Active Contributor
0 Kudos
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
0 Kudos
Any update on the data binding for custom widgets? Per this blog, it had to be available by mid 2020.