The Note component makes it easy to let your users record notes / comments in Retool apps. For example, you can connect a note to the selected row of a contact table so your users can record information about that selected contact.

The Note component is listed under the Data Display heading in the components menu.

Add and customize a Note

  1. Add a note to your app by dragging the Note component into your canvas.
  1. Customize the note label by changing the text in the label field, located under the Basic section of the component properties menu. The label helps your users understand what notes to save there.

📘

Note

To make the note label specific to the table selection, add a dynamic expression within the label field using {{dynamic_expression}}.

  1. You'll want to be able store different notes for each user. To do that, add a key for the note using the note key property. If you want the note to be connected to the selected row of a table, in the note key, you must include a reference to the table column using {{yourTable.selectedRow.data.id}}.
  1. Optional. Enter a default value for the note. This is the value that will appear if no changes to the note have been made by you or the user.

Note Interactions

Now try interacting with the Table and Note component.

For example:

  • You can click Save to save the note value for specific users.
  • You can select different rows to see the note information change. If you used the Save button to change the note value for a user, you will see it change as you toggle between users.

Using the same note key will display the same note values. For example, if you change the notes for Note 1 and click Save, Note 2 will display the same notes when you navigate to that user.

Updated 11 months ago


Notes


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.