Rich Text Editor

This article explains the features of the Rich Text Editor block and how it can be used to design your app.

Use Cases

• Formatting Notes: Add formatted text with styles such as bold, italics, and underlines.
• Highlighting Important Information: Emphasize key details with different font styles and alignments.
• Custom Text Input: Allow users to enter formatted content in a structured manner.

Editing the Block

Click on the Rich Text Editor block and start editing on the panel that appears on the right side.

Label

The label is the name of the block that the end user sees in the app. Example: "Important Notes" or "Additional Comments"

Description

The description is the additional information provided to the end user, displayed below the input area. You can also leave this blank if not necessary. Example: "Enter any additional comments with formatting options."

Placeholder Text

This text appears inside the Rich Text Editor block before the user enters any data. It helps provide guidance on what to enter. Example: "Type your notes here..."

Required

Enable this option if you want the user to compulsorily input data. If enabled, the end user must enter data in this field before submission.

Advanced Options

Display this field if

Use this option to show or hide the field under specific conditions. It accepts the standard Clappia formulae, similar to conditional sections or in the ‘Calculations & Logic’ block.

1. Type @ to get a list of all the fields you have added in the app and select the relevant field or type @ followed by the field name.

2. Use these field variables to write spreadsheet-like formulae for conditional display of the field in the app.

Retain value if hidden

This option appears once a condition is set in the Display this field if option. Enable this setting if you want the field's value to be retained even when the field is hidden. This is useful for preserving user input in cases where the field may temporarily disappear based on conditions.

Example: If the field is hidden based on user selection but you still need to keep the entered value for future reference or calculations, enable this option to ensure the data is retained.

Allow value to be changed after initial submission

This option is enabled by default. When active, end users can edit the value entered in this field after creating a submission. Disable this option if you want the initial value to remain uneditable once submitted.

Example: A new submission has been created in an app where users submit formatted notes. If this option is disabled, users will not be able to edit their submitted notes after submission.

Block Width

Desktop View: Set the width of the Rich Text Editor block in the desktop view. Options are 100%, 75%, 50%, or 25%.

Mobile View: Set the width of the Rich Text Editor block in the mobile view. Options are 100% or 50%.

Variable Name

This is the unique identifier for the Rich Text Editor field, which can be used in formulas or references within the app. This appears automatically after saving your configuration of the Rich Text Editor block.

Using the Block in App Home

Users can enter and format text directly in the Rich Text Editor. It supports formatting options such as bold, italics, underlining, alignment, font styles, and colours.

When users submit their entries, the data will appear in HTML format in the Submissions Table. However, when viewing a specific submission, the formatted text is displayed correctly in the right panel.

Downloading Submissions

If submissions are downloaded as an Excel or CSV file, the input from the Rich Text Editor will appear in HTML format instead of the visually formatted text. This is important to note when reviewing downloaded data.

Using the Rich Text Editor in Print Settings

Users can include formatted text in PDF exports using Print Settings.

When setting up a print template, type @ followed by the Rich Text Editor field name to pull the formatted text exactly as entered. This ensures that the text appears with the same formatting in the exported PDF, rather than in HTML format.