• Self-referential Relationships Intro
• Set up the Comment Box on the Page
  • Displaying the Comments
• Adding the Ability to Reply to a Comment
• Displaying the Replies

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.
   
   
   
   
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. 
   
   
   
   
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.
   
   
   
   

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



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:



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.”



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



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.  



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.



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.



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. 



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.

The result should look like the following.



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.



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.



Now the comments for the project will display nicely.



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

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. 



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.



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.

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. 

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.

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”.

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.

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.

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”.

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”.

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.

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.

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.

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”.

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