We would like to use the GoodData plugin system to...
# gooddata-ui
e
We would like to use the GoodData plugin system to build a custom visualization/widget that our customers can use in dashboards. The widget would be a label of sorts. The default functionality would be that users can select an attribute, and the widget displays the value in the ‘body’, with the attribute name as a header. In order for users to use this widget in a dashboard, I would expect to be able to add it to the list of current visualization types in the Analytics Designer, and that the user could drag in an attribute to populate the widget. Is this actually possible with the plugin system? If not, are there alternative ways to achieve this?
j
Hello Eoghan, This is certainly possibly using custom visualizations. This involves defining a new visualization type that behaves as you described, where users can select an attribute, and the widget displays its value with a header.
e
Thanks for confirming Joseph. I had read through the custom visualizations docs but it’s unclear from those how to get a custom viz working with the Analytics Designer. But if it’s definitely possible, then I’m sure we can figure it out - or at least try and come back here with questions.
@Joseph Heun I’ve been working through the GoodData custom visualizations docs about adding a custom visualization, and I have some follow up questions. • I can’t find instructions or examples on how to add my new visualization type to the existing list of options in the Analytics Designer or how to handle the fields selected by a user. Can you point me to where these are covered by the docs? • Is it possible to run the Analytics Designer locally, to avoid having to build and deploy the plugin during development?
j
Is there a tutorial that end-to-end gets a custom visual deployed into GoodData?
j
@Eoghan Bonass, unfortunately, the docs don't exactly cover adding it to the list of new visualizations. I can double-check this internally though. As for running the AD locally, it is possible. Are you looking to embed the full AD into your app?
@Josh Peak we do have a UNIVERSITY website that may help direct you to a page you need, but we are looking to improve this and include more resources soon.
m
Hey Eoghan, currently it is not possible to create and add a custom VIZ to Analytical Designer as another type of VIZ users could choose from using the plugin system or any other method. You can use the plugin system which we call Dashboard plugins to customize dashboards - all the capabilities of dashboard plugins are described here: https://www.gooddata.com/docs/gooddata-ui/latest/references/dashboard_component/dashboard_plugins/ https://github.com/gooddata/gooddata-ui-sdk/tree/master/tools/plugin-toolkit Some examples here: https://www.gooddata.com/docs/cloud/create-dashboards/plugins/#time-granularity-switch
j
So in theory if I have run the dashboard plugin init to scaffold a sample project, it runs locally getting the Hello World text to appear on the dashboard. Then I upload all of the built esm/dashboardPlugin to and S3 bucket, make that bucket public and enabled Web Hosting. I then run the add-plugin and link-plugin and I still don’t get the hello world plug-in working on the GD Cloud. Dashboard Plugins should work on GD Cloud right? I don’t need to embed my dashboard in another React App right?
e
@Josh Peak you probably need to set a CSP
script-src
directive for your domain in Settings > Developer for your GoodData instance.
👀 1
That’s for the domain where you’re hosting the built plugin assets
j
Oh!!! I’ll give that a try. I only did the CORS.
Tried the CSP. It needed something else. I was lucky enough that David Ramirez was on a call with our team this morning and we live debugged it. Checking the browser console logs showed my S3 bucket didn't have it's CORS permissions setup properly. https://gooddataconnect.slack.com/archives/C01P7PBJFLH/p1731454022932589?thread_ts=1731367847.272259&cid=C01P7PBJFLH
👍 1
m
@Josh Peak thanks for mentioning that it has been resolved and what was the problem!
❤️ 1