Bubble CMS

What is Bubble CMS?

Bubble is a visual programming language no-code development platform, and an application platform as a service. It offers total design freedom without any knowledge of HTML or CSS. It is used to create more advanced functionality than what is possible with template oriented web applications. It offers API integrations, Templates, and Plugins.

Integrating Draftbit & Bubble CMS

Setup steps with Bubble

If you don't have a Bubble account, create one here.

The initial step is to create a new application from the Dashboard screen.

  • Click the button New app.
  • Enter the details of your new app such as the name of the app, the purpose of the app, etc.
  • Click the button Create a new app.

After setting up the app, you must have a custom data type defined and some amount of App data.

In our case we’ve pre-populated custom data to use for the rest of the guide:

  • Create a custom data type called Book`,
  • Create a new field with the property name of title. This lets us give the titles of the books.
  • Then define our own custom data in the App data tab.

Get your REST API URL

To perform read and write operations on a Bubble CMS is done via the Base URL:

https://your-app-name.bubbleapps.io/version-test/api/1.1/obj/type-name

This Base URL requires you to specify the name of the app and the custom data type you have created to start with. To access these values:

  • Go to Settings.
  • Select the API tab.
  • Enable the Public API endpoint for Data API. On enabling this option you are going to get the DATA API root URL: https://your-app-name.bubbleapps.io/version-test/api/1.1/obj/.
  • Then, enable the custom data type to perform read and write operations on the specific type-name.

Get Authentication Token

The Bubble CMS allows read and write operations to the Base URL only if an Authorization header is passed with the value of Bearer api-token. To fetch the api-token:

  • Go to the Settings page and to the API tab.
  • Click the button Generate a new API token.
  • Save the Private key generated. This is going to be used in the next section.

Setup steps in Draftbit

Each request made to your Bubble CMS API requires to have a valid API key. In the previous step, you learned how to get the API key. To authenticate your Draftbit application:

  • Open the Settings tab from the left menu.
  • In the Project Settings, navigate to App Variables.
  • Enter a name for the variable to access the API Key and the value for it. For example, Authorization_Header.
  • The Authorization token value requires you to enter a Bearer token. The syntax is Bearer api-token. Note that the space between Bearer and api-token is intentional.
  • In place of api-token paste your API token obtained from the previous section and then click Add.
  • Click Save.

To add the Bubble CMS Base URL to your Draftbit app:

  • Open the Data tab from the left menu to open API & Cloud Services.
  • From the Connect a Service menu, click on Bubble.
  • Enter a name for your REST API.
  • Paste your Base URL (from the previous section) into the Base URL input field.
  • Click the + from the Headers section to add a new Header.
  • Type Authorization for the key.
  • Select the Global Variable for Authorization.
  • Click Save.

Using Bubble CMS with Draftbit

Fetch all records

In this section, let's populate a Fetch component with all the data from the Bubble CMS and then display it in a List component.

Here’s what the component tree looks like:

The next step is to create an endpoint. Let's fetch the data using a GET HTTP request. Open the Data modal, select the Bubble service, and then:

  • Click Add endpoint.
  • In Step 1: enter a name for this endpoint. Set the Method to GET.
  • In Step 2: you can add a base name path: /your-base-name. For this guide’s example, you don't need to add one so leave it empty.
  • In Step 4: click the Test button next to the Endpoint input to verify the response coming from the Bubble CMS API.
  • Click Save to close the modal.

On app screen:

  • Select the Fetch component in the Layout and go to the Data tab from Properties Panel.
  • For Service, select the name of the Bubble CMS service.
  • For Endpoint, select the endpoint you want to fetch the data from.
  • Select the List component in the Layout and go to the Data tab from Properties Panel.
  • For Data property, select response.results from the dropdown menu.
  • Then, select the Text component in the Layout and then go to the Data tab from the Properties Panel.
  • Add a variable name inside curly braces to represent the data field from the Bubble CMS API. For example, add the variable {{title}} to represent the title column from the Bubble CMS API.
  • Under Variables, you will see the variable name defined in the previous step. From the dropdown menu, select the appropriate field that represents the data field.

Fetch a single record

In this section, let's populate a Fetch component with a single record from Bubble CMS. Create a blank screen in Draftibit and name it Detail. Here’s how the Layout tree looks like:

Next, from our Read screen where all the list items are being rendered, you need to send the id of each item as a navigation parameter when an action is triggered on the Touchable component. This action lets you navigate to the Detail screen where a single book record is fetched and displayed.

To send the id of each book as a navigation parameter, on the Read screen:

  • Select the Button/Touchable component in the Layout tree as highlighted in the image below:
  • Navigate to the Interactions tab.
  • Click the + to open a drop-down menu in the Action tab and select the option Navigate.
  • Setup the Navigate by selecting the Destination and select the Detail screen.
  • In the Create Navigation Parameter section, create a parameter named ID.
  • Then in the Pass Data tab, set the value of the ID parameter to _id from the dropdown menu.

To fetch a single entry from Bubble CMS, you'll have to specify the unique ID which is referred to as the test value.

To get a test value, in your Bubble CMS application:

  • Go to Data.
  • Select the “All Books” data type created earlier.
  • Click on the pen (edit) icon for any of the entries on the side of the table.
  • Copy the value in the Unique id text field.

The next step is creating an endpoint to fetch a single record using the GET HTTP request:

  • Click Add endpoint.
  • In Step 1: enter a name for this endpoint.
  • In Step 2: add the /{{ID}}. Then, add a Test value for the {{ID}}.
  • In Step 4: click the Test button next to the Endpoint input to make sure you've successfully connected to your Bubble CMS.
  • Click Save to close the modal.

On Detail screen:

  • Select the Fetch component in the Layout tree and go to the Data tab from Properties Panel.
  • Select the Service you have created.
  • Select the Endpoint you want to fetch the data from.
  • Select the value for the ID in the Configuration section. This value is used to fetch the single record.
  • Then, select the text component in the Component tree and go to the Data tab in the properties panel.
  • Add a {{varName}} value to represent the data field from the Bubble CMS. For example, we add {{title}} to represent the field and value from the Bubble CMS.
  • Under Variables you will see the variable name defined in the previous step. From the dropdown menu, select the appropriate field that represents the data field. In this case it’s response.title.

Now, when we click on a single book from the list, it'll take us to the page containing just that single book.

Here's a demo of how fetching the value of a single book works:

Submit new data

Submitting new Data from the Draftbit app to a REST API requires the request to be sent using the HTTP POST method.

Your component needs to have:

  • accepts user input
  • has a Field Name prop

You can use any component that contains a Field Name prop to log user input and submit data. This list of components currently includes:

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your service:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to POST.
  • In Step 2: you can add a base name path: /your-base-name. For this guide’s example, you don't need to add one so leave it empty.
  • In Step 3: add a valid Body structure to submit a POST request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request.
  • In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Bubble CMS.
  • Click Save.

Below is a general breakdown of what the request will look like.

{
  "title": {{textInputValue}}
}

To submit data from within the app, you can use a Touchable/Button component to trigger the action API Request:

  • On the Button component go to the Interactions tab.
  • Click the + to open a drop-down menu in the Action tab and select the option API Request.
  • Setup the API Request by selecting the Service and the Endpoint.
  • Then add the configuration for Body request to be sent by selecting the value for textInputValue.

The textInputValue passed in the above example is the value of the Field Name property on the TextInput component:

Update data

The PATCH request is used to update the single entry in the Bubble CMS base record. It accepts similar input components as mentioned in the POST request and the API Request is triggered using a Touchable/Button component.

Your component needs to have:

  • accepts user input
  • has a Field Name prop to update data using an API Request

You can use any component that contains a Field Name prop to log user input and submit data. This list of components currently includes:

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your service:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to PATCH.
  • In Step 2: add /{{id} where id is provided as a test value of an existing record when testing the endpoint. In your app, you will have to pass the id of a single record, for example, as a navigation parameter.
  • In Step 3: add a valid Body structure to submit a PATCH request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request.
  • In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Bubble CMS.
  • Click Save.

Similar to POST request, you can use a Touchable/Button component to trigger the action API Request.

Delete data

The DELETE request is to the Bubble CMS with a data entry's ID to remove that particular record from the table.

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your service:

  • Click Add endpoint.
  • In Step 1: enter a name for the endpoint and select the Method to DELETE.
  • In Step 2: add /{{id} where id is provided as a test value of an existing record when testing the endpoint. In your app, you will have to pass the id of a single record, for example, as a navigation parameter.
  • In Step 4: click the Test button next to the Endpoint input to verify the response from the Bubble CMS.
  • Click Save.

Using a Touchable/Button component, you can add the API Request action to trigger the DELETE request.


Did this page help you?