Highlighting a cell (or row) when a comment has been left on it

App Building
1

I'm really trying to figure out how to highlight a cell when a comment is left on a table with a Comment Thread. So far, I have this code chunk in my comment block's Thread ID. It allows me to make comments, but I'm not figuring out how to actually highlight a cell so I can quickly glance over a table and know when someone leaves a comment. There is very little guidance on how to manipulate the Comment Thread option since it's so new. Any guidance would be so so appreciated. Thank you!

{{ `${tableCompanyInfo.selectedRow.uuid}_${tableCompanyInfo.selectedCell.columnName}` }}

For example, I've left a comment on this cell and I want to do something to make it obvious that there's a comment on it (ie highlight it, frame it).
Screenshot 2024-11-27 at 1.26.13 PM

2

Hi @abbieolson,

Not sure if you've figured out something already.

As you saw from this post I'm doing something similar to what you want to achieve, i.e. adding a small indicator with the number of comments available for that given row.

Here's my setup.

  1. I have a table in my database for comments. I store information as user who submitted the comment, which app, info about the object, etc. The important thing is that in your db your saving whatever Id you will use to then map it to your row.
  2. I use the comment thread event triggers to insert a new record
  3. I have a query to pull all records from this tble that runs both on page load and upon a new record being inserted from the comment thread
  4. Within the column where I want the icon to appear, I added a status indicator: see below example where getComments.data is the query mentioned in the number above
    image
    image1265×568 94.9 KB

Hope this helps!

3

Hey, @MiguelOrtiz! This is awesome, thank you! I still haven't resolved the issue. Are you willing to share a working example of this with me?

4

I also connected with @Darren about this topic.

5

Hi @abbieolson,

I just made a Tutorial on this which you can find here:

Hope this helps!

1 Like
6

This is wonderful! Thank you, @MiguelOrtiz!

1 Like
7

Hi again, @MiguelOrtiz. I've been trying to implement this at a cell-based level, and it's not working as I'd expect. Have you ever done it on cells as opposed to entire rows? I think my error largely stems from how I'm writing the status indicator. Would love some help on syntax if you can!

1 Like
8

Hey @abbieolson,

Of course, happy to help. Feel free to DM me with your setup and we can take it from there.

1 Like
9

@MiguelOrtiz, looks like I have it working. Have you made any progress on hiding the native "X" from the comment thread and created a delete trigger? Would definitely like the row to be deleted from the database table when a user deletes it from the comment box.

As discussed in this thread:

1 Like
10

Hey @abbieolson,

Unfortunately no. CSS is not my strong and I haven't found the time to actually look into this.

Another idea that I have, but not yet implemented, is to run a comparison between the comments rendered in the thread component and the comments in my database. If there is a comment missing in the thread, then run a query to delete (or mark as deleted in a boolean column) the relevant row. This would ensure consistency, but it is an ugly patch that makes a query run every time that the thread component is shown (and I really don't like these kind of inefficiencies).

11

Hey there @abbieolson! :slight_smile: How savvy are you with your devtools? Are you able to use the element selector on the top left of your devtools to select the container that houses the delete button, and share a screenshot of a few visible and uncollapsed parent and child elements so we can solve together how we would reliably target and hide the button?

1 Like