Toggle

The Toggle component provides a user-friendly way to represent a binary choice (on/off, true/false) within your Dynamic Components.

Overview

The Toggle component displays a switch users can slide to toggle between two states. Key features include:

• Clear Visual Indication: Provides an immediate visual indication of the current state (on or off).

• Customizable Label: Add a text label to explain the toggle's purpose clearly.

• Data Binding: The toggle's state (checked or unchecked) is stored in a Boolean Variable resource, making it easy to use in conditional logic, filters, and other interactions.

• Customizable Messages: Display different messages depending on whether the toggle is checked or unchecked.

• Styling Options: Control the size and label variant.

---

Configuring the Toggle Component

Select the Toggle component on the canvas to access its properties in the Properties Panel (right panel).

Basic Properties

These properties control the fundamental data and labeling of the Toggle.

• API Name: (Text) A unique identifier for this component instance (e.g., EnableFeatureToggle, ShowDetailsToggle).

• Label: (Text) The text label displayed next to the toggle switch. Example: "Enable Feature", "Show Details", "Active". Be clear and concise.

• Field Level Help: (Text, Optional) Help text displayed next to the label, providing additional context or instructions.

• Value (Checked): (Boolean - Crucially Important) This property holds the current state of the toggle:

  • true: The toggle is checked (on).

  • false: The toggle is unchecked (off).

  • Data Binding: You must bind this property to a Boolean Variable resource. This variable will:

    • Store the user's selection.

    • Allow you to use the toggle's state in other parts of your component.

    • Allow you to set a default state by initializing the Boolean variable.

Appearance Properties

These properties control the visual presentation of the Toggle.

• Variant: (Text - Select from options) Controls the visual style and positioning of the label:

  • standard: Label is displayed above the toggle.

  • label-inline: Label is displayed to the left of the toggle.

  • label-stacked: Label is displayed above the toggle (similar to standard).

  • label-hidden: The label is hidden. Use this only if the toggle's purpose is clear from context.

• Size: (Text- Select from options) Select a size for your toggle.

• Hide Mark: (Boolean - Checkbox) If enabled, this setting hides the visual mark (checkmark) inside the toggle. The sliding animation will be the indicator.

Behavior Properties

These settings affect user interaction.

• Required: (Boolean - Checkbox) If enabled, the user must interact with the toggle. This setting is not commonly used.

• Read Only: (Boolean - Checkbox) If enabled, the user can see the toggle's state, but they cannot change it. Useful for displaying a read-only setting.

• Disabled: (Boolean - Checkbox) If enabled, the Toggle component is completely disabled and cannot be interacted with.

• Visible: (Boolean) Controls whether the Toggle component is visible on the page. Bind this to a Boolean Variable or Formula for dynamic visibility.

Custom Messages (Optional)

These properties let you customize messages.

• Message Toggle Active: (Text) The message displayed when the toggle is checked (on).

• Message Toggle Inactive: (Text) The message displayed when the toggle is unchecked (off).

---

Example: Controlling Component Visibility

This example illustrates how to leverage the Toggle component to conditionally display other components, enhancing the user experience by presenting information only when needed.

1. Add a Toggle: Drag a Toggle component onto your canvas.

   • API Name: DetailsToggle

   • Label: "Show Details"

2. Add a Record Detail Component (or any other component): Drag a Text component (or any component you want to display conditionally) onto the canvas.

   • Value: (Set this to whatever content you want to show/hide)

3. Set the Record Detail Component's Visibility

   • Select the Record Detail component.

   • In the Properties Panel, find the Set Component Visibility property.

   • Bind the Toggle checked property to true.

Now, the Text component will only be visible when the Toggle is switched on (and the "Checked" variable is true).

Key Considerations

• Clear Labeling: Use a clear and concise label to explain the toggle's purpose.

• Consider Read Only/Disabled: Use Read Only to display a setting. Use Disabled to indicate the toggle is temporarily unavailable.

• Use Cases: Consider using a Toggle component to control component visibility or to set up a variable.