Create a Comment and Reply Section

Introduction

Create a section where users can leave comments/notes and receive replies. These will be organized by date of publication and each comment will be identified by the user’s logging name, user icon and publication date and time. Comments and replies will have the option to be edited or deleted exclusively by their author. If one is edited, a tag will be displayed, and a tooltip will show when it was last edited.

Before you start

To be able to add the user image next to the comment’s author, there must be an image field in the “user” Aggregate. To learn more about how to add it, refer to the How To on Integrate a User Image Feature.

Step-by-step instructions

1. Setting Up the Comment Entity and Fields

Start with a new tab in your accounts detail page. In this example, it is entitled “comments”. Create a new field named “comments” of type “new Entity”. The Entity name will be “comment” and it is a collection. Then, add the fields: “content” (text), “publishDate” (date & time) and “author” (user).

2. Creating the Comment Creation Command

From the “command” folder under the Account Aggregate, use “add entity create command” to generate the creation command. On the second step of the wizard, only add “content” and make it a required field. In the “mutation” folder, add “author” (type: current user) and “publishDate” (type: current date & time – now).

Drag and drop the “comments” field in the detail’s page tab and insert the creation command above the repeater.

Go Live to create a few comments.

2. Adding a Reply Function to Comments

To give the option for users to reply to someone else’s comment, add a new field in the comment Entity. The field name should be “replies”, of type “comment” and be a collection. By using “comment” as the type, the fields in the “comments” Entity will also be used in this “replies” field.

To add a create command to our replies, use “add Entity create command” from the command folder of the 1st “comment” Entity. Then, add the params and mutation just like in step 2.

After wrapping the “date and time” field and the “author” field together, giving them some “item spacing” and choosing a “dash” as item separator. It’s time to add the reply option to the “comment” repeater.

Drag and drop the “replie” Entity at the bottom of the first repeater. To create a link action text, add a “text” component to the left of the box containing those two fields. Then, change the text value to “reply”, change its color to blue and underline it. And, add a “execute a command” behavior to associate your creation command to the text.

Go Live to test it.

3. Organizing Comments by Publication Date

To organize the comments by publication date, add a new “set component data” behavior to the repeater. Change it to “filter”, then “add order by” “publishDate” with “descending” as sorting direction.

4. Displaying User Images with Comments and Replies

Drag and drop the user image field next to the comment’s author name. To have an image placeholder displayed when the user doesn’t have an image, go to the Attribute tab, click on “browse for image” and select your image. To scale the placeholder to a reasonable size, go to the “style” tab and delete the default style. Then, add 20px in both “width” and “height”.

To get the user image of the comment author, add a “set component data” to the image field, set it to “field” type and select the “author” field from the dropdown menu. The user’s image will replace the placeholder one, unless some authors don’t have a user image yet.

To get the same visual for replies, simply duplicate the image field and drag it next to the author’s name in the “replies” repeater.

5. Implementing Edit and Delete Features for Comments

Since our “replies” are an Entity of type “comment”, no need to create the commands. The “replies” Entity will use the same commands as the ones for “comments”. Simply, drag and drop those 2 commands, in a “contextual menu button”, for in each repeater.

To only allow the author of a comment or reply to “edit” and “delete” it, add a precondition to each of those commands.

Name: Author

Operator: Equal

currentUser

6. Tracking and Displaying Last Edited Dates for Comments

To keep track of when a comment or reply was last edited, add a new field under the “comments” entity for “UpdatedPublishDate”, of type “date & time” and add this new field as a mutation to the “edit” command.

Then, drag and drop a “text” component next to the “publishedDate” field. Put the text in bold, enter “edited” as it’s value and this line of JavaScript code in the Tooltip section:

data.updatedPublishDate?.format('LLL')

To only display this text after a change in the original comment or reply, add a “show/hide” behavior with “updatedPublishDate” “is not empty” as precondition criteria.

From that point on, all the functionality listed in the “context” section of this How To have been added.

After applying some style, the comments section could end-up with a look like this:

Conclusion

The comment and reply section allows users to leave comments, receive replies, and manage them with editing and deletion options. By incorporating features like publication date sorting, user images, and last edited tags, this section enhances interactivity and provides a clear organization of user feedback and conversations.