# Comments

Using this block, you can allow your users to add comments on your Softr app. The comments are supposed to be added and linked to a [List Details](https://softr.gitbook.io/softr-documentation/building-blocks/listing-details) block, so you can only add them to a page with a details block.&#x20;

{% hint style="success" %}
The **Comments** block works only in combination with a **List Details** block.
{% endhint %}

So, let's review the block settings first, and then we'll see how it works on a specific example.&#x20;

In the settings sidebar under the **Data** tab, you'll see an option to connect to Airtable. This is optional, and the comments will work just fine without syncing with Airtable. So, we'll review this part [a bit later](#undefined) after getting familiar with the block settings.&#x20;

### Comment Settings

Here, you select how many comments appear on the page by default.

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FBk8TXqyuSg7oa1lqWtBi%2Fcomment-settings-b.png?alt=media&#x26;token=7b56ec11-89b1-4aed-9779-5be179a16958" alt=""><figcaption><p>Comment Settings</p></figcaption></figure>

### Features

In the **Features** tab, you can customize the **Title** and **Subtitle** of the block as well as apply style and formatting settings to specify how **User Profile Image**, **User** **Name**, **Comment, and Date & Time** appear.

### How the block works (example)

Now that we got familiar with the block settings, let's add one to our Softr app and see how it works. Let's suppose we have a list of tasks for a development team on our Softr app, and we've also connected a page with a **List Details** block to show task details.

As you can see below, we've added a **Comments** block below the **List Details** block with task details. This way, task assignees or other team members can open the task details page and add their comments for that task.

![Adding the Comments block](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FzngnVZbRJfaJ54PsIoHP%2Fadding-block-b.png?alt=media\&token=dc25ef4c-f0b1-4648-a054-8ab294a83495)

The following GIF shows how a user enters the task page and adds a comment.

![User adding a comment](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FVh2RTBocmVjLy1HCQpat%2FScreen%20Recording%202022-05-05%20at%2011.00.25.gif?alt=media\&token=a688e554-97a1-425d-9714-19ef89964d43)

{% hint style="info" %}
Please, note that **only logged-in users** can add comments in your Softr app. Moreover, the **user's avatar** will appear on his/her comment if the feature has already been set up as described [here](https://softr.gitbook.io/softr-documentation/memberships/user-accounts-blocks/user-profile/enabling-user-avatar).
{% endhint %}

Now, let's see how we can connect the **Comments** block to Airtable to store the comments there as well.

### Syncing comments with Airtable

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2F7E7KXrGrE7u8XIS1uUFH%2Fsync-to-airtable-b.png?alt=media&#x26;token=890f5750-5c95-4a64-9416-80d8828afc56" alt=""><figcaption><p>The sync button</p></figcaption></figure>

After clicking on the **Sync to Airtable** button, you'll be prompted to connect your Airtable account using the [API key](https://softr.gitbook.io/softr-documentation/guides/airtable/adding-airtable-api-key) (if you haven't done that yet). As soon as you've connected to Airtable, a dropdown will appear to select the base where you want to store your data. After selecting the base, the dropdowns to select the Table and map the fields will appear as well (see below).

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2F6hAIGzPKypGCSWWHkrkL%2Fmapping-b.png?alt=media&#x26;token=3e94dafd-e32d-4a72-8727-442a1cd43832" alt=""><figcaption><p>Selecting base/table and mapping fields</p></figcaption></figure>

In the following screenshot, you can see the Airtable table we've prepared for storing the comments.&#x20;

![Table for storing comments](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2F0jHoLStj3319z5uDoz0L%2Fcomments-fields-airtable-b%20\(1\).png?alt=media\&token=2bde4bf4-e350-4476-a2f2-c535db3e1bf3)

It has the following fields:

* **Commenter ID** - a text field for storing the ID of the user (it's the user's Email or, if you have your [Users connected to Airtable](https://softr.gitbook.io/softr-documentation/memberships/users-tab/users/connect-to-airtable), it's the **Record ID** of the row that contains the user record).
* **Current record** - a text field for storing the  [Record ID](https://support.airtable.com/hc/en-us/articles/360051564873-Record-ID) of the Airtable record displayed in the List Details block (i.e. the ID of the record that contains the current task data).
* **Comment field** - a text field to store the body text of the comment.
* **Created date** - a Date field for storing the date and time of the comment submission. Note that **including a time field** on Airtable is optional. If the option is not enabled, the date will be stored on Airtable without the time. **Please, also make sure to use a regular Date field on Airtable instead of a Created time field.**

{% hint style="warning" %}
Please, note that you need to map **all the 4 fields** to Airtable for the Airtable sync to work.
{% endhint %}

Below, you can see how we map the fields and then add a comment on one of our tasks to see how it's stored on Airtable.

<figure><img src="https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2F52mEevyCiJ4QayQhLBQ9%2FScreen%20Recording%202022-09-28%20at%2018.36.57.gif?alt=media&#x26;token=6b0141f9-6550-4027-a081-3efb540ffe4b" alt=""><figcaption><p>Syncing comments to Airtable</p></figcaption></figure>

On Airtable, you can also turn the **Current record** into a [linked record](https://support.airtable.com/hc/en-us/articles/206452848-How-to-link-records-in-Airtable), linking it to your related table. In our case, that's the table with tasks. This way, you can easily see which entry the comment has been made for. The GIF below shows how that's done.

![Changing the Current record field to a Linked Record](https://3426011356-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M0NiyhsmXAcV5u1c6XK%2Fuploads%2FK8OPbmBgFUFkNx4kyA73%2FScreen%20Recording%202022-05-27%20at%2016.01.14.gif?alt=media\&token=1f40b024-c90b-4c09-b7ba-cf64097e4c72)
