Text

The Text component is used to display static or dynamic text. While seemingly simple, it's incredibly versatile and plays a crucial role in displaying information, labels, messages, and debugging.

Overview

The Text component displays a block of text. This text can be:

• Static: Text that you enter directly into the component's configuration.

• Dynamic: Text derived from a Variable, Constant, Formula, or a field from a Salesforce record.

• A Combination: You can combine static text with dynamic values using formulas.

Use Cases

• Labels and Headings: Structure your UI by displaying static text labels, headings, and subheadings.

• Displaying Data: Show the value of a field from a Salesforce record (e.g., displaying an Account's name).

• Troubleshooting: Crucially, the Text component is invaluable for debugging. You can use it to display the value of Variables, Formulas, or component attributes, helping you understand what's happening "under the hood" of your Dynamic Component.

• Placeholder Text: Display temporary placeholder text before data is loaded.

• Concatenating values: Display combined values.

Setting Up Your Text

The Properties Panel is where you control what the Text component displays and how it behaves. Here are the key settings:

• API Name: A unique, descriptive name for the component (e.g., WelcomeText).

• Value: Defines the text to display. Choose from:

  • Static Text: Type the text directly into the field.

  • Resource Binding: Click the resource selector icon and choose a Variable, Constant, or Formula resource to display its value dynamically.

  • Formula: Click the resource selector icon and choose the Formula data type. This will allow you to create a text.

• Visible: Controls whether the component is displayed. Bind this to a Boolean Variable or Formula for conditional visibility

Troubleshooting with the Text Component

One of the most valuable applications of the Text component is for debugging. If you're unsure what value a Variable, Formula, or component attribute holds, you can temporarily add a Text component and bind its Value property to that resource. This will display the value on the page, allowing you to inspect it directly.

Example: Debugging a Variable

1. Add a Text component to your canvas.

2. Click the resource selector icon next to the Value property in the Text component's properties.

3. Select the Variable resource you want to inspect (e.g., myVariable).

4. Preview your component. The Text component will now display the current value of myVariable. If the value changes, the Text component will update automatically.

Example: Debugging a Formula

To see the value of a Formula resource:

1. Add a Text component.

2. In the Text component's properties, click the resource selector icon next to the Value property and select Mapped.

3. Choose the Formula resource from the list you want to inspect.

4. Preview your component. The Text component will display the Formula's calculated value.

5. Remove the text component once it's not needed anymore

Example: Displaying a Component Attribute

1. Add a Text Component.

2. In the Text component's properties, click the resource selector icon next to the Value property and select Mapped.

3. Find the component you would like to debug and select the attribute. The value should be displayed.

In Summary

The Text Component is a versatile component that can be used to set static text or dynamic text, formula or variable. This is also an excellent component for debugging.