Self-referencing models

Self-referencing models within Betty Blocks offer a powerful way to structure data by allowing a model to reference reference their own outputs, simplifying data management and application logic. This is especially useful for building features like comment sections with nested replies, hierarchical categories, or organizational charts where entries relate to each other on the same level.

In this article, we’ll explore how self-referencing models work in practice by building a comment section for an application that displays comments along with their replies, demonstrating how to set up and visualize these relationships.

Pre-setup

Before we begin, a few setup steps have already been completed for this use case. A data model called 'Post' is created with the following properties:

• Title (single-line text);

• Image (image).

Three pages are already present:

• Post create: to create new posts

• Post overview: a data table that shows all posts

• Post details: a dedicated page showing details for a specific post when selected from the overview. If you need guidance on passing an ID or UUID to a detail page, refer to our example using UUIDs.

Before proceeding, ensure you have created a post that users can view. For this example, we’re using a post featuring an image of a fox:

When we click on the post, we get redirected to the detail page:

This will be the starting point from which we'll explain how self-referencing models work. The use case will be that users can comment on this post, and someone can then comment on the comment.

The data model

Go to your data model overview and create a new data model called 'Comment'. We'll add just one property to this model, a text multi-line property with the name 'Message'.

Add a “belongs to” relation between the 'Comment' model and the 'Post', so each post can have multiple comments. To enable self-referencing, create a relation that links the 'Comment' model to itself—allowing each comment to reference other comments.

When configured correctly, this will automatically generate a third relation within the 'Comment' model: one comment can be associated with multiple other comments.

With these relationships in place, your model now fully supports self-referencing—each comment can be linked to other comments within the same model. For this example, set the permissions for both comments and posts to public so the comments are visible to everyone.

Next up is the first functionality, adding a comment on a post.

Adding a comment

Go to the page builder overview, and navigate to the post details page. On this page, we'll add the functionality to comment on a post.

Drag a Create form component below the post, add the 'Message' property to the form, and include a Hidden input field to store the ID of the post for which you want to add a comment.

Next, open the action settings of the create form you just added. For this example, ensure private action is disabled. In the 'Start' step, create a post object that can be linked to the comment.

For this step, use the 'ID' input variable—set up the action variable as shown below:

With the 'post_object' in place, we can assign it in the create step like this:

Save the action and go back to the page. Let's add the functionality to see the comments on the post. Drag a 'Data list' component underneath the create form we just made. Select the 'Comment' model and add the following filter to only show comments from the post that we're viewing the details of:

We can now add a 'Text' component on the data list and select the message property of a comment for the post.

To make this user-friendly, add an interaction on the create form to re-fetch the data of the data list we just created. When we create a new comment, it'll show up instantly.

Now it’s time to test your setup. Click the 'Play' button in the top-left corner to compile the page. To view a specific post, update ':id' in the URL with a valid post ID or navigate to the detail page from the post overview.

And there we go, we can add comments to the post.

Comment on a comment

Now, for the self-referencing part, let's see how we can create a comment on one of the comments above. This works almost the same as how we created a comment above.

Add a Create form component beneath the text that displays the comment’s message. As before, include a Hidden input field above the multi-line text field, and use it to select the ID of the primary comment.

Now select the Create form again for the secondary comment, and navigate to the action of the form.

Just like before, create a new action variable—this time for the 'Comment' model—and use a filter to associate the secondary comment with the primary comment during the Create step.

 

That’s it for creating a secondary comment. To display these nested comments, go back to the Details page.

Add a Data list component beneath each primary comment, set the model to 'Comment', and apply a filter so that only secondary comments linked to the primary comment are shown.

 

To ensure secondary comments appear immediately after creation—just like primary comments—add an interaction to the create form that refreshes the data list. Compile the page using the 'Play' button and test the functionality by submitting a comment; you’ll see a success notification and the new comment will display beneath the primary comment.

Feel free to further refine the design and layout of this page to match your application’s needs. The current setup is intentionally simple, serving as a foundation for implementing and customizing self-referencing comment functionality within your own projects.

Explore our two videos on self-referencing models for additional guidance: