SAP Analytics Cloud: Custom Widget & Widget Add-Ons Samples Preview

[marouferchichi]

Background 

Now that Custom Widget is available with the Unified Story Experience since QRC/Q2 - 2023, and Widget Add-Ons since QRC/Q4 - 2023, we received a large amount of requests coming from SAC users searching for Samples in order to extend the Built-in set of visualisations in SAC.

In this article, I will highlight the Ready-To-Use Custom Widget Samples available in the SAP Public GitHub repository which you can download, edit and consume within SAP Analytics Cloud. You can use these Samples as a starting point to learn how to develop Custom Widget.

In addition I will highlight a Widget Add-on sample which you can use in order to extend the visual elements of the Built-in charts such a Bar chart, and with that you will have the possibility to modify the Tooltip or the Plot area by overwriting existing visual elements content or style.

Note: this article will be always updated every time we develop new Custom Widget Sample. Feel free to let us know your most requested visualisation that you wish to see as Custom Widget in the future in the comment section. Partners and Customers who wants to include their Custom Widget or Widget Add-on samples in this article, they can contact me so I can refer to their blog posts, and with that we can gather more type of visualisation and make it visible for everyone.

Custom Widget Samples: Preview

The Custom Widget Samples that I will preview in this article, are ready to be used within your Story. You can download the resource files and then upload it into your SAC tenant.

You can edit the Custom Widgets by modifying the source code from the resource files if it's required or even extend the Custom Widget by adding new web component files like: Styling.js, in case you wish adding some new settings to the sample. So let's get started with the first preview of our Samples.

Sankey Chart

You can download the Sankey Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, select your data model, set measure, set an hierarchical dimension and edit the default colors of the different depths from the Styling panel.

You can refer to this sample in case you want to understand how to add new settings into the Styling panel by creating the Styling.js file.

Gauge Chart

 

You can download the Gauge Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, select your data model, set your measure and from the styling panel set your threshold.

Custom Pie Chart

You can download the Custom Pie Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, select your data model, set your measure and your dimension. 

Gantt Chart

You can download the Gantt Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode). To know more about the Gantt chart, and how it was implemented, I invite you to read the blog of my colleague @alexander_khobotov.

Bar Gradient Chart

You can download the Bar Gradient Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, select your data model, set your measure and your dimension. 

Funnel Chart

You can download the Funnel Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, select your data model, set your measure and your dimension. You can export the Funnel chart as image from the top right icons, or also edit the data values.

Nested Pie Chart

You can download the Nested Pie Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, select your data model, set your measure and your dimension.

Datepicker

You can download the Datepicker from here. This Custom Widget provides a sophisticated input field for date values and date ranges. The date formatting is customizable and a dark mode is provided.

Sunburst Chart

You can download the Sunburst Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, select your data model, set measure, set an hierarchical dimension and edit the default colors of the different depths from the Styling panel.

Line Chart

You can download the Line Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, select your data model, set your measure and your dimension.

Half Doughnut Chart

You can download the Half Doughnut Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, select your data model, set your measure and your dimension.

File Upload Widget

The file upload widget extends upon the Data Import API to allow users to upload their FactData CSV or Excel datasets to public and private versions. The widget serves as an intermediary tool, parsing the file and sending the data contained within it to the Data Import API. You can refer to this blog to know more about this Custom Widget.

Pareto Chart

You can download the Pareto Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, you can pass your text and press the apply button.

Tree Chart

You can download the Tree Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, select your data model, set measure, set an hierarchical dimension and explore the different styling options from the Styling panel. 

World Cloud by Input

You can download the World Cloud Chart from here, upload it into your SAC tenant, add it to your Unified Story Experience (Optimized mode), from the builder panel, you can pass your text and press the apply button.  

Widget Add-on Samples: Preview

The Widget Add-on Samples are also ready to be used within your Story. You can download the resource files and upload it into your SAC tenant, then from the builder panel you can add the widget add-on to the supported charts to modify the tooltip or the plot area. Learn more how to enable the widget add-on within your story here.

Sample 1

You can download this sample from here, upload it into your SAC tenant, add your supported chart (such Bar chart) into the canvas, enable the widget add-on from the builder panel and add your plot area and tooltip. you can edit either the tooltip or the plot area in the design time, but modify the settings from the builder panel, for example you can change the default icons with your own ones.

Sample 2

Check out my colleague's blog where he explains in a very detailed way the Widget Add-on that he built. 

More blogs to check out 👇

• How to use Linked Analysis with Custom Widget
• Custom Widget Hands-on Guide 2023
• Announcing the new SAP Analytics Cloud feature: Widget Add-on
• Hosting and Uploading Custom Widgets Resource Files into SAP Analytics Cloud
• Custom Widget Samples GitHub Repository 

[JefB]

Hi Marouane,

Great overview!

We would really need ability to also customize table widgets to support advanced planning & reporting requirements in tables/grids (such as ag-grid), for example to achieve better conditional formatting or use scorecard & in-cell charts).
For charts I see a lot of demand for GANTT chart incl. GANTT planning capability and Pareto chart.

[abhimanyu_sharma]

When I am uploading JSON file , OK button is greyed out.

[marouferchichi]

Hey @abhimanyu_sharma, you need to upload the zip folder as well which contains the web components file (Javascript files).

please refer to this blog to know more about how to upload and host Custom Widget into SAC: https://community.sap.com/t5/technology-blogs-by-sap/hosting-and-uploading-custom-widgets-resource-f... 

and in case you want to host the web component in a different location than SAC, then you need to edit the JSON file. please refer to his blog to know more: https://community.sap.com/t5/technology-blogs-by-sap/hosting-sap-analytics-cloud-custom-widgets-into... 

[marouferchichi]

Hey @JefB ,

Thanks a lot for your feedback !

In the future we will enable the possibility to add Widget Add-on to the Table widget so you can be able to customize and overwrite the different table elements.

regarding the Gantt Chart it's planned to build it as sample

Yours,

Marouene

[GovindaRaoBanothu]

Hi @marouferchichi ,

Thank you for detailed overview and code. very helpful. 

[GovindaRaoBanothu]

Thanks..

[dirk_meyer2]

Hi, 

I have uploaded Sankey and Sunburst and they work only with one characteristic layer. As soon as I put a second on into the row they disappear.
Could not find any helpful info. 
Thanks for Help.

Dirk

[GovindaRaoBanothu]

Hi @dirk_meyer2 ,

I was having this issue recently when I was working with Sankey chart and here is the solution. Please enable "Include aren't Elements." option and it works.

Hope it help.

Thanks,

Govinda

[dirk_meyer2]

Hi Govinda
you are using Hierarchies I do not. This option is not available.
But I will try to create one to see if that works
Thanks

[marouferchichi]

Hey @dirk_meyer2 ,

Please try to use hierarchical dimensions in order to see the different depth of the Sankey Chart and also Sunburst chart with enabling "Include Parent Elements". 

Thanks for your comment.

Marouene Ferchichi

[GovindaRaoBanothu]

Agreed with @marouferchichi ,  specially these 2 charts require different nodes and hence hierarchies between the dimension mandatory. 

[GovindaRaoBanothu]

Current, code works for 2 levels, if I select Date dimension it shows only till level 2 and when I select 3 /4 widget gets empty. Any advice please.

[dirk_meyer2]

Hi, 

Yes, thanks, I can confirm.
I created on the country ID a hierarchy with Regions and Hubs.
Took a minute of devotion until it got going, but now its much faster then the R Version I have tried.

[IngoH]

Hi,

any plans on making the Sankey Chart working with multiple dimensions instead of a hierarchy ?

Regards

Ingo Hilgefort

[marouferchichi]

Hey Ingo, 

not for the moment, we are focusing with building new type of vizualisations, but you can edit the source code and give it a try it might work.

Regards,

Marouene Ferchichi

[GovindaRaoBanothu]

Hi @marouferchichi ,

When I tried to see the Sankey chart in view mode or Present mode gets it does not work and pop up with below error. Is that expected with custom widgets & do not work in view / Present mode.

Is anybody else observed this behavior.

Thanks in advance. 

Regards,

Govinda.

[AngelMesp]

Hello @marouferchichi 

Thanks for share your work, very helpful. 

Its possible change the decimal places in measures?, i cant see the option in style panel, so i imagine i need add some code lines right?

Thanks a lot

[marouferchichi]

Hey @AngelMesp, 

yes exactly, you can add the measure format as new setting via script.

Thanks for feedback

Marouene

[marouferchichi]

Hey @GovindaRaoBanothu, 

if you see the Sankey chart in edit mode, you should also see it on view mode, first time I see this behaviour. can you try to clean your browser cache and try again ? 

Thanks for your feedback

Marouene

[marouferchichi]

Hey @JefB 

The Pareto Chart is now available as Custom Widget and you can download it from the GitHub. Please check the blog above, you will find the link to the resource files.

Thanks

Marouene

[sailajabhimavarapu]

Hello,

we used the source files for the File upload widget in February and since then we were successfully using it to upload csv files both in Update and Append mode. Now it is not working and giving out these two errors when we open the story with this file upload custom widget.

We tried to delete the custom widget and re downloaded the Jason file and zip file from the below link and uploaded the file upload widget. When we try to use it in the story, it is giving the same errors as below. Kindly suggest what changed and how to fix it. We are live in Production and file upload is a critical feature in our planning process.

Source file link:

https://github.com/SAP-samples/analytics-cloud-custom-widget/tree/main/Custom-Widget-Samples/file-up...

Thanks,

Saila

[GovindaRaoBanothu]

Hi @sailajabhimavarapu ,

Looks like JSON file got corrupted. I saw this error couple of times and mainly occurs when integrity statements below and something changed in .JS file. In that situation I used generate the keys using build/sign.js file and upload the code which fix the issue in most of the case. 

"integrity": "sha256-xSoIE2bm/sO6/GbC8XApYa5iT19e3YGE3wOlL/6Iveg=",

      "ignoreIntegrity": false

The script enabled to integrity but next statement is missing?

OR, try to add the below highlighted line after integrity and check.

About other error : 

s.getLegacyDateCalendarCustomizing(), there is only one statement and looks good for me. 

Just try to replace the JSON file and use same .JS file then check update your findings. I too try to replicate upload the update my findings. 

Thanks, Govinda.

[MadhuKainikkara]

Hello @marouferchichi ,

Thank you for this post.

I downloaded the json file and zip file for the Funnel Chart and I added it my custom widgets successfully. However it doesnt show any results when I use this chart in my stories. Do you think I am missing any steps?

Thanks in advance for your guidance.

Madhu KAINIKKARA.

[marouferchichi]

Hey Madhu, 

Can you please take a screenshot and add it here to check the error.

Thanks

Marouene

[MadhuKainikkara]

Hi @marouferchichi ,

I followed the following steps:

1. downloaded json and zip file from github.

2. created the custom widget in SAC, using these files (without any modifications).

3. Included the funnel chart in my SAC story. I have used the same model and same KPIs used in the numeric pointers in the first box. However, the funnel chart doesnt show results.

Please let me know if I missed some key step.

Thanks in advance.

Madhu.

[marouferchichi]

Hey Madhu, 

Sorry for the late answer. 

did you tried it with only 1 measure and 1 dimension ? 

Thanks

Marouene

[MadhuKainikkara]

Hi Marouene, 

I used multiple measures, but no dimensions as it was a funnel chart. Should I be using some dimensions also in the chart?

Best regards,

Madhu.

[dirk_meyer2]

Hi,
are there anywhere how to program ressources regarding used libraries, concepts how to turn values into grafics? I have seen only some root based R and PY approaches where I have to get out my geometry schools books. (which is not really tempting;-)  Also maybe doing extensions regarding formating .
Thanks for help.

Dirk

 

[GovindaRaoBanothu]

Hi @MadhuKainikkara you have to use dimensions.

[pawelwiejkut]

Hello @marouferchichi ,

Thank you for this blog, it inspired me to build something by my own. I have build my own Calendar-Event Custom widget. This is some kind of idea, how using this technology we can achieve other missing functions. Fell free to check out:

https://github.com/pawelwiejkut/sac_event_calendar/

[dakra1802]

Hello,

I am trying to install the File upload widget, but I get the following error message:

 How can we fix this? 

[Daniel135]

Hello @marouferchichi,

thank you for the extensive and detailed examples. I can only agree with @JefB , Gantt charts would also be of great benefit to us!

Daniel

[shwetaphillips]

I am getting "Invalid Arguments" error while uploading any widget in my tenant.

What is the reason for this? Please help

[Ruta_]

Hi, thank you for the useful information - it was very helpful! I tried using the Datepicker as a custom widget SAC, and while the widget itself works, the Builder Panel doesn’t show any options to link it to a data model. As a result, the Datepicker doesn’t actually filter any data. What steps do I need to take to make it work correctly with the data model?

Thanks.