Home Business Intelligence Develop Your First GoodData Dashboard Plugin | Customise and Improve Dashboards

Develop Your First GoodData Dashboard Plugin | Customise and Improve Dashboards

Develop Your First GoodData Dashboard Plugin | Customise and Improve Dashboards


If you wish to construct your first GoodData Dashboard Plugin, this text will information you step-by-step via the entire course of.

What’s a GoodData Dashboard Plugin?

GoodData Dashboard Plugins supply builders the distinctive alternative to unleash their creativity and customise GoodData Dashboards based on their particular person wants or enterprise targets. For instance, our Grouping Insights plugin permits builders to cluster related insights and easily transition between them utilizing a easy dropdown menu. This enhances not solely the visible group of knowledge but additionally the velocity and comfort with which customers can navigate between totally different information factors.

Example of GoodData Dashboard Plugin
Instance of GoodData Dashboard Plugin

Our Dashboard Description plugin is one other shining instance of doable customizations. Not solely does it enable builders to include detailed descriptions into their dashboards, nevertheless it additionally helps dynamic attribute values and metrics. This introduces an unparalleled stage of context to your information interpretation, permitting customers to simply perceive complicated datasets and make knowledgeable choices.

Example of GoodData Dashboard Plugin
Instance of GoodData Dashboard Plugin

The potential for superior visualization can’t be overstated both. With visualizations plugins, builders can now showcase information in intuitive ways in which have been beforehand unattainable. These instruments assist translate intricate information into digestible visible narratives, driving house key insights and findings with much more affect.

From a technical perspective, the plugins are loaded as construct time dependency utilizing Webpack Module Federation they usually work together with the dashboard engine. On the time of registration, the plugin can entry a number of customization APIs to ship new customized widgets, modify the rendering of insights, and hearken to occasions occurring on the dashboard.

These plugins are designed to be registered to a workspace, after which they can be utilized on any variety of dashboards. This permits for scalable reusability throughout totally different dashboards, and for additional customization, the hyperlink between the dashboard and the plugin could be parameterized.

So, whether or not it is about refining information navigation, enhancing comprehension, or telling compelling information tales, GoodData Dashboard Plugins actually open up a world of potentialities for builders. As a result of they use a considerate structure and trendy applied sciences, GoodData Dashboard Plugins are designed with builders in thoughts, enabling them to reimagine and reinvent the best way we work together with information.

Getting Began with Dashboard Plugins

Step 1: Set up the Plugin Improvement Toolkit

To rapidly begin growing your plugin, we provide a Toolkit that makes the setup straightforward and clean. It comes with a Command Line Interface that guides you in naming the plugin, choosing the GoodData backend kind, setting the Hostname, and opting between JavaScript and TypeScript. Whereas the Workspace and Dashboard ID are elective at this stage, they are often configured within the subsequent step.

To initialize a brand new plugin, run:

npx @gooddata/plugin-toolkit dashboard-plugin init

Step 2: Begin the Improvement Server

As soon as the toolkit has created your new plugin, go to the generated folder. Guarantee your .env and .env.secrets and techniques recordsdata are arrange appropriately. The CLI ought to have already populated the .env file values in the course of the set up course of. Nevertheless, within the .env.secrets and techniques file, that you must uncomment and fill the road containing TIGER_API_TOKEN in case you are utilizing GoodData.CN/GoodData Cloud, or GDC_USERNAME with GDC_PASSWORD in case you are utilizing GoodData Platform. The backend kind was chosen in step one, so your plugin is already configured to function with it.

With every part set, you are prepared to begin the event server with npm begin. Confirm every part is functioning correctly by opening If profitable, you must see your current dashboard with an added empty part titled ‘Added from a plugin’.

Step 3: Develop Your Plugin Code

Your predominant plugin file might be positioned at src/dp_<your_plugin_name>_plugin/Plugin.tsx. That is the place you may register all of your customized content material. Be happy to create as many new recordsdata and folders as you want, however notice that renaming generated folders and recordsdata might break the plugin’s performance.

Inside this file, you may observe the Register methodology, which is the principle perform referred to as after the plugin mounts to the Dashboard’s DOM. The core code on your plugin needs to be referred to as right here. The onPluginLoaded and onPluginUnload strategies can be utilized to carry out particular initialization and cleanup duties, respectively.

A very good start line is to pick the Customise parameter from the Register methodology and discover all of the doable strategies utilizing TypeScript’s autosuggestion and IDE Description. Regularly used strategies embody customise.customWidgets().addCustomWidget() for including a brand new widget, customise.insightWidgets().withCustomProvider() for modifying an current widget (e.g., introducing new visualizations and utilizing information from an current one), and customise.format().customizeFluidLayout() for including a brand new merchandise or part to the dashboard format.

When modifying an current widget, it is essential to find out how the plugin ought to establish which widget to vary. This may be achieved in a number of methods – by way of parameters, tags, suffixes/prefixes on widget titles, or visualization varieties. The only option will rely in your particular use case. We suggest going via open-sourced dashboard plugins to know our strategy in several situations.

Lastly, bear in mind that you could entry all the dashboard state utilizing the useDashboardSelector hook. Nevertheless, it is a extra superior subject past the scope of this text.

Step 4: Construct the Plugin

Subsequent, construct the plugin by working npm run build-plugin. This can create plugin artifacts below dist/dashboardPlugin.

Observe that you should utilize dashboard plugins instantly with React Dashboard Element as Native Plugins when you’re constructing a customized FE software on prime of GoodData.

Step 5: Add Plugin Artifacts to Your Internet hosting

Add all recordsdata from dist/dashboardPlugin to your internet hosting. Keep in mind, GoodData presently does not supply internet hosting on your plugin artifacts. Additionally, be sure that your internet hosting helps HTTPS and your GoodData area contains the internet hosting location within the checklist of allowed hosts.

Step 6: Add Plugin to Workspaces

After your plugin is publicly hosted, combine it into your workspace utilizing the CLI so as to add the plugin to your default workspace (outlined in .env) or to a special workspace you specify.

Run the next command to create a brand new dashboard plugin object within the workspace, pointing to the URL of your plugin:

npm run add-plugin -- "https://your.internet hosting/pluginDirOfYourChoice/dp_test.js"

As soon as the plugin object is created, the final line of the terminal response ought to look one thing like this: “Created new plugin object with ID a8682044-3c57-4daf-9b00-05b082a3450”, you may want this identifier later to hyperlink the plugin with the dashboard.

Step 7: Use the Plugin on a Dashboard

Having created a plugin object in your workspace, you are now able to hyperlink it with a number of dashboards. The link-plugin script in package deal.json makes this straightforward by linking the plugin with the dashboard laid out in your .env file or you may override the .env with CLI choices.

npm run link-plugin -- <plugin-object-id>`

If you wish to reuse a plugin throughout totally different dashboards and customise its conduct (e.g. appropriately show dashboard-specific textual content), specify extra parameters in every dashboard-plugin hyperlink. When specified, the parameters are despatched because the second argument to the onPluginLoad perform by the loader.

In case your plugin helps parameterization and also you need to specify parameters for the dashboard-plugin hyperlink, use: npm run link-plugin -- <plugin-object-id> --with-parameters

An editor will open so that you can outline the enter parameters. Needless to say the CLI software can hyperlink the plugin to totally different backends or workspaces. Use npm run gdc-plugins -- --help to study extra.

In the event you intend to make use of the plugin in manufacturing throughout a number of dashboards or workspaces, we suggest using the REST API in the course of the provisioning automation course of. This can help you in distributing the plugin to all tenants.

Step 8 (Non-compulsory): Replace Plugin Parameters on a Dashboard

To replace or add parameters into an already linked plugin, use npm run update-plugin-params -- <plugin-object-id>.

Step 9 (Non-compulsory): Take away Plugin Parameters on a Dashboard

To take away the parameters from an already linked plugin, use npm run remove-plugin-params -- <plugin-object-id>.

Guaranteeing Safety

When growing your plugin, take into account that it doesn’t must deal with authentication in opposition to the GoodData backend. Nevertheless, throughout growth, the harness wants to supply an authenticated atmosphere to the plugin. Subsequently, be sure that your credentials are safe and by no means embody them in your plugin supply code or different belongings.

Comfortable coding! 🚀




Please enter your comment!
Please enter your name here