Analytics Cloud: Build custom widget with D3js

[former_member654693]

Hi community,

I would like to build a Custom Widget for SAP Analytics Cloud making use of D3js for fancy graphics. I've read this should work using webpack for example, however I am a little uncertain of how to apply it in this case.

Does anyone know an example that shows how to include an external JavaScript library in a Custom Widget Web Component?

Thanks a lot!

Johannes

[Bob0001 · Accepted solution]

Using webpack or another bundler is the recommended approach, as it avoid conflicts when having the same library in different versions in one context. Of course the library has to support this and is not defining any global variables. Webpack will create one file containg your custom widget implementation and your third party libraries. You can use any webpack setup. Good starting point is https://webpack.js.org/guides/getting-started/. There is nothing specific to custom widgets here. If you are also using Babel make sure not to package the babel polyfill with your code as it is provided by SAP Analytics Cloud already.

[david_stocker]

Hi Johannes,

D3 is a bit of an odd bird, as far as imports go. SAP Analytics Cloud uses D3 itself and you can easily get into conflict. I'll write a special post on the things that you need to do to use D3, but I can give you a teaser now. Look in this github repository. Pay special attention to the fact that the custom element class declaration follows the successful loading of D3. Also note that we remove d3script in the disconnected callback.

Cheers,

Dave

[IngoH]

Hello Johannes,

take a look here with also the pointer to the developer handbook for custom widgets.

https://blogs.sap.com/2019/11/25/announcing-custom-widgets-in-sap-analytics-cloud/

Best Regards

Ingo Hilgefort, SAP