Topics Map > Models

LCS - Self-Referential Relationships

A self-referential relationship is one where one model is related to itself. This document will show how to set one up and use it in an application. In this document we will show how to allow a user to make comments on a project and other user reply to those comment.

Self-referential Relationships Intro

Comments are the most common use of a self-referential relationship. For example, you might make a comment on a project. Other users can then reply to your comments. In other words, they can make comments on your comment. Since comments can belong to other comments, that is a self-referential relationship. One comment is related to another comment.

In this case you would have a model called Comment. The model would have a HAS MANY relationship back to itself as well as a BELONGS TO relationship back to itself. You can set this up with the following steps:

  1. Set up a model called Comment. Add a Text (multi-line) property to it called Message.

    image of comment model

  2. You will usually have comments related to a different model. For example. You might have a Project model and people are making comments on the project. In this case you would set up a relationship so that the Project model HAS MANY comments. Likewise, the Comment model BELONGS TO a Project. 

    Image of project comment relations

  3. Now you can set up the self-referential relationship. Go to the Comment Model and set up a relationship so that it BELONGS TO the Comment model. To set this up you should be familiar with how relationships work. Please see LCS - Create a relationship between models for an introduction to relationships.

    The final step is to give it a name that you can use later to refer to it. Change it to something like “comment_replies” to show that it has to do with replies. Naming the relationship something useful such as “comment_replies” is very important. That is the self-referential relationship we will use later to make everything work.

    image of naming comment model

The HAS MANY relationship has already been generated for the Comment to itself as well. The Comment model will now have the following relationships.

image of final comment model

At this point you are done setting up the self-referential relationship. The next sections demonstrate how you can use it in an application. 

Set up the Comment Box on the Page

In this example we are going to allow users to post comments on a project. The finished CreateForm will look like the following:

finished comment form

To set that up you need a details page for a project. That page will have a project_id that is passed into it to display the project information. On the details page, drag a Create Form component onto the page and set it up for the Comment model and for the one property called, Message. Give it the name of “Create Comment Form.”

image of form configuration

Drag a Hidden Input component into the Create Form underneath the Message text field.

image of completed comment form

Select the hidden Component to put in the Project ID. This is a detail page for a project so the ID for the project is available. We need to send it along to the action to create a comment, so Betty Blocks knows which project the comment belongs to. Just select the Project Model and then the ID.  

image of configure form input field

Back on the page, go to the Action for the Comment Create form. Give the action a good name and make sure the permissions are set up properly.

image of action settings

The Create form passes along the new comment message to create it. However, we also need to associate that comment with the project that it belongs to. To do that we will need to look up the record for the project. We passed along the hidden field called id to the Action and we will use that.

Add a new action variable under the Start action step. Specify Record as the type. Give the record a name, e.g. existing_project. Specify the model which is Project. The filter needs to look up the exact project we need. Set the filter so the project ID is equal to the id input variable sent to the Action. Select Apply and then Save when you are done.

image of add new action variable

Now we can associate the existing_project record with the new comment. Go to the Create Form Action Step and select that. Add another property for the relationship. Select the Project relationship. Then select the existing_project variable for the project record that we looked up. Give it a name for the “As A” field and save it. 

image of create form existing project

Now when you add a comment for a project it will be saved correctly. Users can make multiple comments for each project. The next step is to display the comments.  

Displaying the Comments

Go back to your page. Drag a dataList component onto the page. Set the model for the dataList to Comments. Set the filter so that the ID for the comment->project->Id is equal to the project_id variable for the overall page.

image of comments data list filter

The result should look like the following.

image of comments data list result

Set the type of dataList to Grid with a width of 100%. This will make sure the comments take up the maximum space in the dataList.

image of comments data list grid

The next step is to make the comments display nicely in the data List. Drag a Paper component in the data list. This will provide a nice box around each of the comments. Then drag a text component into the paper component. Have the Content say Comment: followed by the Message property from the Comment Model.

image of comments display in data list

Now the comments for the project will display nicely.

image of comments formatted

The final step is to add an interaction to the Create Comment form for onActionSuccess to Refetch the comments dataList. 

image of refetching data list

Adding the Ability to Reply to a Comment

Drag a column component right under the text for the comment in the dataList. Set the inner spacing to None for the column. Set the alignment for the column to Right. Set the Row width to full to take up the entire space. Then drag a button into that new column component. 

image of comment reply button

Drag in the dialog component just under the column and button. Your screen might go grey, but if you scroll up you will find the dialog box. The goal is to set up a dialog box that lets the user type in a reply to a comment.

image of dialog box message

Change the name of the Dialog itself to something like “ReplyDialog” so you can find it later. Change the title of the dialog from “Dialog” to “Reply”. The text in the Text Box that says, “To start using the dialog..”  isn’t needed. Clear out the content of the text box and instead use the (x) to put in the Message property from the Comment model under the DataList.

image of changing dialog name

Delete the box that has the Cancel and Submit buttons. Those are not needed. Drag in a Create component and place it underneath the Comment.Message in the column. The Create Component should be for the Comment Model and the Message property. 

image of dialog box message create

Drag a hidden input field into the form. Set the property to be the Comment.Id. This step is so that your action will know which comment the reply is going to. You can also remove the label for the Message input box if you like.

image of dialog box comment id

The next step is to set up the action to save the reply. Open up the action for the Create Message Form. Go to Settings and update the name of the Action to something more useful such as “Reply to Project Comment”. Then update the permissions to make sure the users can access the Action.  

Under the Start action step, set up an action variable to load the comment that the reply is for. The comment_id was passed along as a hidden field so you can load the Comment model and filter it with that comment_id. Once we have looked up the original comment, we will use that in the next step to attach the new reply to it. You can name the record that we look up as, “existing_record”.

image of comment record lookup

Go to the Create Record action step. Select the Add button to add a property. We will select the comment_replies property. This is the point when all the work setting up the self-referential relationship pays off. The comment_replies relationship is what we set up to relate the comment model back to itself. Here you can see why we named it differently than a normal relationship. It makes it clear that we are talking about replies. 

Set the comment_replies property to the existing_record action variable that we looked up at the beginning of the action. That is how we related the new comment that we are saving to the original comment that we are replying to.

image of comment record relationship

The self-referential relationship is now set up. The next thing to change would be to create an interaction to close the dialog box on your page after the comment model has been updated. Return to your page. On the Create Reply form create an interaction for onActionSuccess, Hide, and “ReplyDialog”. The dialog should have been named something like “ReplyDialog” so you can find it in the list of components.

image of close dialog interaction

Next, close the Dialog. Click on any grey area around the dialog. There will be an option on the left sidebar for the Dialog component for “Visible in builder”. Select that to change the eyeball icon to crossed out. That will hide the dialog. You can make the dialog appear again by selecting the dialog section on the page and then selecting “Visible in builder”.

image of visible in builder option

The final step is to bring up the dialog when the user selects Reply for a comment. Add an interaction for that reply button for onClick, Show/Hide, and “ReplyDialog”.

image of reply button dialog

Displaying the Replies

Drag a data list just before where the grey dialog is in the comments data list. You can call it, “RepliesDataList”. This is a Datalist inside another DataList.

image of replied data list

Add a model and filter to the data list. The Model will be Comment. The filter will set the Comment.coment_replies.Id to the Comment.Id. This will load all the comments that are replies to the current Comment.Id. Note that we are using the comment_replies self-referential relationship to get this data.

image of comment replies filter

Next, drag a text component into the data list for the replies. In that text component, set the content to “Reply: “ and use the (x) to display the Comment.Message from the RepliesDataList.

image showing the correct setup for replies

The last thing to do is to add another interaction for the ReplyCreateForm component in the dialog. That will refresh the data in the RepliesDataList when a new reply is added. Open up the dialog and add an interaction to the ReplyCreateForm. The interaction will be for onActionSuccess, Refetch, “RepliesDataList”.

image showing the refetch replies DataList

That is it for self-referential relationships. Your self-referential relationship should be complete. 



Keywordsself-referential, relationship, model, comments   Doc ID135527
OwnerMatt M.GroupLow Code Solutions
Created2024-02-16 14:28:15Updated2024-07-15 12:34:46
SitesDoIT Enterprise Business Systems - Low Code Solutions
Feedback  1   0