How to build multi-level comments in Bubble

In this issue, I’m going to cover how to build a multi-level commenting system in Bubble. This is a feature that was implemented in the Reddit clone I built. We’re going to build this from scratch in a new app.

---

Getting Started

Before we jump in, I want to make clear that the system we’ll be building will allow for three tiers of comments. As it stands, I’m not aware of any way to create this system with an automatically infinite number of levels to the comments (without code). However, you can replicate this process to create as many tiers as you’d like.

This project is also built using Bubble’s legacy engine, and not the new responsive engine. As of this writing, the new responsive engine does not enable this system to be built in a similar manner, as it does not include options like displaying a full list repeating group, or collapsing groups that are within repeating groups. This will likely change in the near future as the new engine evolves.

Structuring the Database

You’ll need 5 Data types:

1. User: This will be referenced by the post that a User creates, to display the name, and other relevant details of the user. The User Data type comes built-in to Bubble.

2. Post: This will be the main text that is displayed when a user creates a text post.

3. Comment: This type represents the first-tier of comments in the app.

4. Child Comment: This type represents the second tier of comments added below the main comment.

5. Child-Comment 02: This represents the third tier of comments - comments that are added to Child-Comment.

The diagram below illustrates how these data types will be represented in the application.

Within each data type you’ll need the following Data fields (The field types are shown in parentheses):

User*

• First Name: (Text)

• Last Name: (Text)

• Profile Pic: (Image)

Post

• Content: (Text)

• Creator: (User)*

• Post-Image: (Image)

Comment

• Content: (Text)

• Parent Post: (Post)**

Child-Comment

• Content: (Text)

• Parent Comment: (Comment)**

• Creator: (User)*

Child-Comment 02

• Content: (Text)

• Parent Comment: (Child-Comment)**

• Creator: (User)*

*These data types come pre-added so no need to create a duplicate

**These field types are referencing data types.

Building the Front-End

Once the data types and fields are defined, we’ll go to the design tab to design the front end.

We’ll first extend the page by double-clicking on the blank canvas, and adjusting the height of the page. This is simply to give us more room to work with when laying out elements. I set the page height to 1200px for this example.

Creating the input elements

At the top of the page, create a rectangular group. This will be the container for the post input elements. These input elements consist of a multi-line input for a user to write out their post, and a button to submit the post.

Below the container, we’ll add another larger group. This will be the container for the post and the comments to be displayed. The dimensions I set for this example are 750px wide by 500 px high.

Inside this group, add a Repeating Group that spans the full width and height of the group it is in.. This first repeating group will be used to display all the posts. Set the Type of Content to Posts and the Data source to Search for Posts, then set the layout style to Full List, with 1 row and 1 column.

At the top of the repeating group, we’ll add a few elements to display both the post content and the identifying information of the user that created the post.

You’ll need to add three elements - one image element and two text elements. The image element will be used to display the profile picture of the user, and the first text element will display their name. The second text element will display the content of their post. It should look like this:

To link these elements to the relevant data, each of them needs to be set to display dynamic data. Since the repeating group data source has already been linked to the Post data type, the first option in the dynamic data dropdown will always be ‘Current cell’s Posts’. We’ll use this option each time, and reference the data relevant to the element.

For the image, set the dynamic data to ‘Current cell’s Posts Creator’s Profile Pic’

For the first text element, set the dynamic data to ‘Current cell’s Posts Creator’s First Name’

For the second text element, set the dynamic data to ‘Current cell’s Posts Content’

Next, add a new multiline-input element and a button. This new input will be used to create the first level of comments in the group.

The system for the first level of comments is now done.

Next, underneath the new multiline input, add another group that spans the width of the parent repeating group, and make sure that the bottom border of the new group aligns to the bottom of the repeating group it sits in.

This group will need to be linked to the parent repeating group to display the comments. To do this, set the Type of Content of the group to Post and the Data Source to Current Cell’s Posts.

Inside this new group, we’ll add another repeating group. This repeating group will be used to display the Comments. When adding the repeating group, leave some space between the left border of the group, and the left border of the repeating group that’s inside the group. It should appear as follows:

The new group (selected) with a repeating group inside it.

Set the repeating group layout style to Full list, with 1 row and 1 column. For the data, set the Type of Content to Comment then set the data source to Search for Comments, 'Parent-Post = Parent's group’s Posts’. This ensures that the repeating group will display all the comments that are created under a post. Since the parent group is linked to the posts via it’s data source, the option to link the Comments to the Posts with ‘Parent-Post’ is available.

Inside the repeating group, you’ll need to add the same elements as before: an image and two text elements. These will be liked to the current cell of the repeating group, same as before, though this time, the elements will reference the Current Cell’s Comments. Beneath these elements, add another multiline input, and another button. You should end up with something like this:

Next, we’ll add another group and repeating group beneath the input field, similar to the one just created.

Set the Type of Content of the Group to Comment and the Data Source to Current Cell’s Comment.

For the repeating group, set the Data Source to Search for Child Comments with ‘Parent Comment = Parent’s Group Comment’. You should end up with something like this:

You should now have something like this:

For the final tier, repeat the same process as before, but this time, you can omit the multiline input and button. Create a group inside the Child Comment repeating group, and set the Type of Content to Child Comment, and the Data Source to Current Cell’s Child Comment.

Inside the group, add a repeating group like before, with only an image element, and two text elements, and link them to the relevant Child Comment 02 dynamic data.

The final result should look as follows:

Adding Conditionals

The final stage of the design process is to add conditionals to the groups to hide them when they aren’t needed. If there are no posts, then the option to add comments shouldn’t be available. If there are no comments, the option to add a child-comment should not be available. And so on. This means that the page will start out with only the top input and button visible. As comments are added, the option to comment on a comment appears.

To do this, you’ll need to add conditional statements to each group. In the example below, the group containing the Comments repeating group is hidden when there are no posts available. By unchecking the box for ‘This comment is visible’, the element will be rendered as invisible.

In the Appearance tab, you’ll also need to check the box that states ‘collapse this element’s height when hidden. This will ensure that there are no large gaps between posts when posts are created. It’s also the reason why all the repeating groups need to be placed in groups, since the option to collapse an element is not available for repeating groups.

Repeat this process for every group.

Making it work with workflows

The final step is to tie the front end and the database together with workflows. Beginning with the top, we’ll create a workflow for creating an original post, then create the workflows for the comments.

Post Workflow

To create a new post, you’ll need to add a workflow to the top-most button.

For the first action, select ‘create a new thing’ then select ‘post. Then set a field for the content of the post: Post = Post input’s value (this may vary depending on the naming system you use for input elements. Here, I am referencing the top multiline input element)

For the second action, select ‘reset relevant inputs’. This ensures that the contents typed into the input are cleared once the post is created.

Comment Workflow

The next button will be used to create the first level of comments.

For the first action, select Create a new thing then select Comment. Then set two fields. The first will be for the content, which should reference the second multiline input. The second field will link the comment to the parent post: ‘Parent-post = Current Cell’s Post’.

For the second action, select ‘reset relevant inputs’.

Child Comment Workflow

The next button is used to create the child comment.

For the first action, select Create a new thing then select Child-Comment. Then set two fields. The first will be for the content, which should reference the third multiline input. The next field will link the child-comment to the parent comment: ‘Parent-Comment = Current Cell’s Comment’.

For the second action, select ‘reset relevant inputs’.

Child Comment 02 Workflow

The final button is used to create the second child comment.

For the first action, select Create a new thing then select Child-Comment-02. Then set two fields. The first will be for the content, which should reference the third multiline input. The next field will link the child-comment to the parent comment: ‘Parent-Comment = Current Cell’s Child-Comment’.

For the second action, select ‘reset relevant inputs’.

Testing

With the Data, Dront-end and workflows complete, we can test the system. To do this, you’ll need to first create a test user. To do this, go to the Data tab and select App Data. Select ‘All Users’ fron the left column, then click the New Entry Button. You can then create a test user by adding a name, and profile pic, then clicking ‘Create’.

With the User created, click ‘Run as’ to open a new window with your app. It will load the page and allow you to interact with the app as the user you selected.

You can then test your app by adding posts, comments, and child-comments. This is the final result:

That’s it for this issue. If you found this article helpful, be sure to share it (and tag me @shikuwangombe if you do!) and make sure you’re subscribed to my newsletter :).

I’m also keen to hear what you’d like to learn in Bubble, so feel free to let me know!

Happy Bubbling!