GoodData.UI Components Library Gets Even Better with the Accelerator Toolkit

Pavel Kolesnikov's picture
Director, Product Management

Back in 2019, we decided to give our customers more options to build analytical user interfaces. In addition to embeddable responsive dashboards and drag-and-drop data exploration UI, we released the React.js components library called GoodData.UI.

What does that mean for you?

Your UX designers may want to mix and match your application UI with analytical functionality, or they may want to make your analytics UI a bit more domain specific as opposed to a general purpose dashboard. Long story short, they want something that no dashboarding tool in the world does out of the box.

There is a better way than iframing an entire BI application or building the analytics (including the back end) yourself.

GoodData.UI components mean that, once the GoodData platform is integrated with your application, you can create a new visualization in a drag-and-drop UI and place it into the proper place in your app just by typing:

<Visualization {...config} identifier={myID} />

No need to wait until your back end people write a new SQL query and expose it via API; the back end is already provided by the GoodData platform. It’s a self-contained component that just works.

Similarly, if you want to define a visualization programmatically (and update it just by changing its React props), simply do:

<BarChart {...config}
    measures={measureIDs}
    viewBy={...} stackBy={...}
/>

(The prop names should be self-explanatory. If not, documentation is here and live examples with code samples are here.)

Over the last year, our customers and solution engineers created a number of very cool interactive use case-specific analytical applications. This is also why we decided to make the life of JavaScript developers even better.

Starting January 2020, the GoodData.UI can take advantage of the following new tools:

  • The @gooddata/create-gooddata-react-app scaffolding command line tool (yes, it’s built on and inspired by the original create-react-app tool)

  • New web-based tools under the Accelerator Toolkit application in GoodData Labs available from https://<your-domain>/labs/apps/ui-developer-toolkit/build/index.html

create-gooddata-react-app

If you are building your new analytical application from scratch or simply just getting started with GoodData.UI, the easiest way to start is simply typing:

npx @gooddata/create-gooddata-react-app my-app

(… or substitute npx with your favourite npm-compatible package manager) 

First, the tool asks me about my GoodData environment. I will be using the demo workspace from my GoodData Free account:

Accelerator Toolkit image

Once the skeleton of my application is generated, the tool suggests the obvious next steps: enter the newly created folder and run the application.

Accelerator Toolkit image

After running these two commands, a new browser window opens with the new application running on your localhost. (Kindly ignore the browser privacy warning caused by using self-signed certificate; it’s just a localhost, right?)

Now you will see a welcome page with instructions on how to start adding GoodData components into the generated React code:

Accelerator Toolkit image

Accelerator Toolkit app in GoodData Labs

GoodData Labs is a collection of experimental web-based tools for the GoodData platform and is available under https://<your-domain>.na.gooddata.com/labs/apps/. The Accelerator Toolkit application is available through the blue icon on the bottom left:

Accelerator Toolkit image

After entering the toolkit, you will be provided with three sub-applications: the catalog browser, the visualization builder, and the metadata browser:

Accelerator Toolkit image

Catalog browser

By default, the catalog browser displays a collection of attribute display forms (also known as labels) and measures from your catalog. Your catalog is basically a collection of logical columns in your workspace; it is essentially what you see in the left panel of the Analytical Designer.

Accelerator Toolkit image

This is useful if you want to quickly find the right label or measure to define a visualization programmatically using GoodData.UI components such as BarChart.

For each catalog element, the catalog provides sample values on click (first few items for labels and a number for measures) and the identifier, which can be simply copied and pasted to be used in a visualization component property.

Visualization builder

The visualization builder allows you easily combine visualizations and measures and labels from the catalog. More importantly, it also allows you to generate corresponding React.js code fragments that are ready to be copied and pasted into your application.

A screenshot describes it better than words do:

Accelerator Toolkit image

Metadata browser

The metadata browser is a bit more advanced and will be appreciated by developers familiar with the GoodData metadata model.

Accelerator Toolkit image

In each GoodData workspace, metadata includes all elements of the data model, computed measures, visualizations, dashboards, and other user-defined objects, as well as the relationships and dependencies between these objects.

After you open the metadata browser, a list of all metadata category types can be displayed by clicking the metadata category dropdown. These category types are common for all GoodData workspaces; you can see common objects such as analytical dashboards and attributes, as well as rather advanced objects such as element maskings.

In my demo workspace, I have selected “Measures” and clicked the one named “Order Amount.” (If you are not using the demo workspace from GoodData Free, you will probably see different measures.)

The details of the selected measure, including its JSON representation under the “raw data” section, are immediately displayed in the right panel. And when I switch from “raw data” to “used by,” the tool will display all objects that depend on the selected measure:

Accelerator Toolkit image

We hope you find the new tooling useful. If you have any questions or comments, don’t hesitate to contact us at support@gooddata.com.

Happy coding!

February 21, 2020
Blog Bottom - Try GoodData

Want to ask about something specific?

Contact us