Connecting to Bubble
Here's a short video guide on how to connect Bubble to Cube.
Don't have a Cube project yet? Learn how to get started here.
Click the "How to connect" link on the Overview page, navigate to the REST API tab. You will see your connection credentials, the REST API URL and the authorization token:
For a Cube instance publicly available at a specific
HOST, the REST API URL would be
HOST/cubejs-api/v1. Please refer to the REST API page for details.
You will also need to generate a JSON Web Token that would be used to authenticate requests to Cube.
Please check the Security page to learn how to generate a token. We suggest generating a long-lived JWT that won't expire soon.
Navigate to the plugins. Select and install the API connector plugin.
Click "Add another API".
Next, set the "Authentication" as "Private key in header", and copy and paste Cube's Authorization token.
Additionally, make sure to add a shared header for all calls by setting
Click "Add another call".
Copy and paste the Cube REST API, including the
/load path, in the API field. Make sure to select "Use as: Action", and use the
JSON "data type" and "body type".
Get your Cube query in the JSON query format ready. You can copy it from Cube’s Playground or compose manually:
Paste the JSON query in the Body. Make sure to add a
query parameter for your JSON query.
Next, hit "Initialize / Reinitialize call".
First, add a "Page is loaded" event. Add an action that uses the API connector plugin. Next, add another action to set the state of an element. Select the index element, and create a new custom state. In this example I named the custom state
OrdersByMonth and selected the
data field of the API response. Make sure to toggle the "This state is a list" checkbox as well. While setting the state's value you will need to select "Result of step 1" and the
Bubble has an amazing feature where you can drag and drop UI components into the design dashboard.
Once you added a chart, you configure the data points. More specifically, the series categories and series data. For the series categories and series data you need to select the
OrdersByMonth state followed by the data point you want to use in order to populate the chart.
Once you open the "Preview" you'll see your nicely rendered charts.
Did you find this page useful?