Question Re: Analytics Cloud: Build custom widget with D3js in Technology Q&A

Analytics Cloud: Build custom widget with D3js

Former Member — Mon, 20 Jan 2020 12:07:22 GMT

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

Re: Analytics Cloud: Build custom widget with D3js

IngoH — Mon, 20 Jan 2020 16:33:59 GMT

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

Re: Analytics Cloud: Build custom widget with D3js

david_stocker — Mon, 27 Jan 2020 10:04:31 GMT

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

Re: Analytics Cloud: Build custom widget with D3js

Bob0001 — Mon, 27 Jan 2020 14:09:07 GMT

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.