How to save comments from the Comment Thread component in RetoolDB

[Paulo]

Looking to capture and store user feedback or team discussions directly within your Retool App? We'll show you how to save those valuable insights into Retool Database! Whether you're tracking progress, gathering feedback, or just keeping a record of your conversations, this step-by-step process will have you set up in no time.

We'll be using additionalScope. If this is a new concept for you, visit that link first. Here is also a TLDR if you just need a refresher:

Js call Retool RPC with arguements

Here is an example on how to use additional scope: On the resource settings, we set the key-value pair. [Screenshot 2024-08-20 at 1.18.31 PM] In this case {{ transactionId }} will take the value we pass using additionalScope When we trigger the query, we set a key-value pair where the key is the variable 'declared' on the resource settings, and we set the value for it: [Screenshot 2024-08-20 at 1.20.52 PM]

Let’s make your app even more collaborative in just three simple steps!

1. Create a table on Retool Database (i.e. "comments"). Create a column for the body, and in order to reference the user who sent it, create columns for user_id, name, email, or other references we may need. Here is an example:
   

2. At the App level, create a 'Resource query' to write data to our new table:
   

   
   
   Note: the values for name and user_id are passed dynamically based on who is logged in, we send the comment's body using "additionalScope."

3. Add an event handler to the 'Comment Thread' component for the 'Submit' event, and run a script to trigger the query to POST the comment, passing the Comment Thread's value as the body.
   

   

That's it! When a user sends a new message now...

The component will still register the comment as it always did:

But now we'll see the new entry on Retool Database:

Disclosure

This is a workaround for a feature that isn’t currently natively supported in Retool. While you can delete or edit comments at the database level, these changes won’t reflect in the actual Comment Thread component. The reason is that the component currently doesn't support editing comments or triggering events when a comment is deleted. When this is possible, I'll be happy to come back and update this guide.

[MiguelOrtiz]

Hi @Paulo and @retoolin,

Any timeline on when would it be possible either to trigger events when a comment is deleted, OR simply remove the delete option from each message?

Saving comments in a DB is a nice and easy workaround. But the moment messages start getting deleted then there is no longer consistency.

I'm surfacing number of comments per table line like this:

But the numbers become inconsistent without the above mentioned functionalities.

Thanks!

[retoolin]

Still no timeline on this yet! Since releasing the v2, we've been getting the feature requests and no future plans for this component yet.

I agree that getting your own store for comments is great, and the ability to disable+adding callbacks to delete is great would be great addition, and these are all top of the list items we are tracking for comments feature requests.

I'm glad that @MiguelOrtiz found a workaround to mirror the comments perhaps by submit handler? Very clever! To hack around the lack of disable delete today, I think you might be able to use custom CSS to hide the button.

[MiguelOrtiz]

Thank you Hong.

@AJVancattenburch, hi there

Sorry to bug you with this, any chance you would help out on the best way to target the delete button in the new thread component? I really haven't done my homework and learned the best way of doing it as per your really informative post some time ago.

Thanks!

[AJVancattenburch]

Hey @MiguelOrtiz sorry for the late reply on this!

If I'm understanding your requirements correctly, you're wanting to have a comment thread with more flexibility to be able to add, edit, and delete comments and/or replies, correct?

If so, the only way I was able to figure out how to do this was by placing a list view component within another list view component -- which I would not recommend if at all possible as things tend to get buggy when placing a list view within another list view

Once I got it technically working properly, was when this new comment thread component became readily available. It covered the use case in which I needed it for, so I switched over to that for simplicity

However, if you were still curious and having a list view within another listview isn't a concern for you, I'd be happy to share my solution!

[MiguelOrtiz]

Hey @AJVancattenburch,

So for this specific request I jsut want to be able to hide/remove the delete button in the new thread component so that users can't delete comments. The edit replies is something I can live with for now.

For a chat component in the future I'm planning and looking forward to use what @MarkOfRespect and the Weavy team have to offer

[AJVancattenburch]

Are you wanting users to be able to delete comments if they were the creator of that comment?

[MiguelOrtiz]

Nah, I want to remove the option completely

[AJVancattenburch]

Okay I'm also now seeing the above context of using custom css to remove the button from view. Sorry -- still early where I am

You should be able to hide your delete button instances with the following custom CSS:

.retool-grid-content [id*="buttonComponentName"] {
  display: none;
}

Does this solve your issue?

[MiguelOrtiz]

@AJVancattenburch

.retool-grid-content [id*="buttonComponentName"] {
  display: none;
}

So, the specific button I want to remove is shown below.

I'm not able to breakdown the div section in the inspect sectino as the moment I stop hovering over a comment it disappears

[AJVancattenburch]

It looks like you have a non-native button component placed within a custom built comment thread component unless I am mistaken?

If not, I was able to hide the 'delete comment' button with the following CSS:

.retool-grid-content [id*="commentComponentName"] svg[data-testid*="IconClose"] {
  display: none !important;
}

Result without above custom CSS applied:

Result with above custom CSS applied:

[MiguelOrtiz]

Thank you so much for looking into this!

So, this is the out of the box thread component:

Which when you add comments, they will include a delete button next to it

[AJVancattenburch]

Ahh I see the difference lies in how my company Retool account's comment thread component must come different out of the box than it does from how it comes out of the box in the account you are working within.

Does targeting it how I specified above not work like so?

.retool-grid-content [id*="commentThreadComponentName"] svg[data-testid*="IconClose"] {
  display: none;
}

If not -- it's possible that in your comment component component the delete button is an actual button HTML element and not an SVG

[retoolin]

Sharing a demo here saving just the comment count and highlighting the rows with comments:

comment count demo.json (89.3 KB)

[retoolin]

Here's the table used for the demo. Columns are id, thread_id, and count: