The Notes component allows users to create, edit, and save text using a full-featured WYSIWYG (What You See Is What You Get) editor. With styling features like headings, lists, italics, and more, you can add clarity and emphasis to text in your app.
Features of the Note Component
The Note component includes a rich set of formatting options:
Headings: Organize your text with Heading 1 or Heading 2 styles.
Captions: Use caption text for brief explanations or additional context.
Numbered List: Create a numbered list for orderly content.
Bulleted List: Use a bulleted list to share information without a specific order.
Quote: Distinguish an important statement or quote from the rest of your text.
Bold Text: Add emphasis to your text by making it bold.
Italicize Text: Italicize your text for subtle emphasis or to denote titles.
Highlight Text: Highlight your text to draw attention or indicate importance.
Horizontal Rows: Add horizontal rows to separate different sections of your note.
Hyperlinks: Create text that links out to a webpage.
You can also use the following keyboard shortcuts while typing in a Notes component:
Shift+Space→ insert four spaces (for an indentation)Command+Period→ toggle bulleted list
Setting up the Note Component
In the Layout Editor, select the tab you want to edit.
Click on the plus (+) symbol in the Components panel.
Select the Notes component under Text.
In the General tab on the right side of the Layout Editor, locate the Data section.
In the Text field, select the destination in the Data Source where you want to store the created or edited note.
The note is stored as Markdown in a text column in the table.
You can also customize the Label of the component.
Using the Note Component
Creating and editing a note works much like other text editors you see in email or word processors. Users can follow these steps to make notes:
Click on the input box. An edit menu with rich text options will appear.
If there is already a note stored, a button titled Edit will first appear when users hover over the box. Clicking the button will display the rich text menu.
Make the desired changes to the text.
Click "Done" to save changes.
Actions
The Note component also supports actions, allowing you to trigger an action with the text written in the note. To configure this:
In the General tab on the right side of the Layout Editor, locate the Action section.
In Configure Action, select the dropdown menu to view action options.
Select the action to be triggered when users interact with your Note component. You can also use saved actions.
For an in-depth explanation of what Markdown is and how to use it, check out the Markdown Guide. The Notes component does not understand Markdown link syntax. Instead, highlight the text you'd like to make a hyperlink, and then paste the URL. The text will be transformed into a link.