YouTube ChannelBook A DemoContact SupportInstall the Avonni Dynamic Components

Checkbox Group

Overview

The Avonni Checkbox Group component enables users to select one or multiple options from a list, making it ideal for use in forms, filters, or preference selections within Salesforce Dynamic Components. It supports various data sources to populate options dynamically from Salesforce.

In the Dynamic Components Builder, the Checkbox Group component is referred to as "Input Choice Set" when you're working with its attributes (e.g., for bindings like $Component.InputChoiceSet.Value).

Key features

  • Flexible Data Sources: Connect to manual lists, variables, queries, or picklists for option population.

  • Selection Modes: Single or multi-select with bound values.

  • Customization: Variants, types (e.g., buttons, toggles), orientations, and layouts for UI fit.

  • Interactivity Controls: Required, read-only, or disabled states.

Tip: Use for multi-choice scenarios; for single toggles, consider the Avonni Toggle component.

Use Cases

  • Filter records in Data Tables (e.g., select multiple stages for Opportunities).

  • Capture user preferences (e.g., newsletter topics).

  • Form multi-selections (e.g., interests in lead forms).

  • Dynamic queries (e.g., choose product categories from a picklist).

  • Status indicators (e.g., toggle-like buttons for task checklists).

Configuration

Select the Checkbox Group on the canvas to access properties in the right-hand Properties Panel.

Basic Properties

These handle identification, labeling, and data sourcing.

Property
Type
Description
Example

API Name

Text

Unique identifier for the instance.

StageFilter

Label

Text

Main label for the group.

"Select Stages:"

Field Help Text

Text (Optional)

Additional guidance next to the label.

"Choose one or more."

Data Source

Select

Source for options: manual (static list), variable (from Variable resource), query (Salesforce query), picklist (from object field).

picklist (e.g., Opportunity StageName).

Core Functionality & Data Binding

These define selections and bindings.

Property
Type/Condition
Description

Is Multi Select

Boolean (Toggle)

On: Allows multiple selections (uses Value Collection); Off: Single select (uses Value).

Value

Text

Bound to selected value (e.g., Variable or Formula).

Value Collection

Text (Active if multi select)

Bound to array of selected values (e.g., Collection Variable).

Appearance & Formatting

These control visual style and layout.

Property
Type/Condition
Description
Options/Examples

Variant

Select

Label positioning: standard (above), label-hidden, label-inline (beside), label-stacked.

standard.

Type

Select

Display style: default (checkboxes), button (button group), toggle (switches).

button for modern look.

Orientation

Select

Arrangement: vertical (stacked), horizontal (side-by-side).

horizontal.

Layout

Settings (Active if horizontal)

Sub-options: Multiple Rows (toggle for wrapping), Number of Columns (e.g., 2-12, based on container size).

Multiple Rows: On, Columns: 3.

Check Position

Select

Checkbox/toggle placement: left or right of label.

left.

Tip

For horizontal layouts, set columns to match the container width for responsive design.

Behavior Properties

These manage user interaction.

Property
Type
Description

Required

Boolean

Mandates at least one selection; use with validation.

Read Only

Boolean

Displays selections but prevents changes.

Disabled

Boolean

Disables all interactions.

Examples

Example 1: Single-Select Stage Filter

This example creates a single-select checkbox group for Opportunity stages, bound to a picklist.

1

Configure Properties

  • Label: "Select Stage"

  • Data Source: picklist (Opportunity > StageName)

  • Is Multi Select: Off

  • Variant: standard

  • Type: button

  • Orientation: vertical

2

Integrate with Data Table for Dynamic Filtering

Connect the Checkbox Group to an Avonni Data Table. This filters Opportunity records based on the selected stage(s), showing only matching data. The table's query retrieves data from Salesforce and responds to user selections.

  1. Add Data Table Component: Drag the "Data Table" from the Component Library onto the canvas, below the Checkbox Group.

  2. Configure Query Data Source: In the Data Table's Properties Panel:

    • Set Data Source to "Query" mode.

    • Choose Object: "Opportunity".

    • Add a reactive filter: StageName equals {!selectedStage} (bind to the Value or Value Collection from the Checkbox Group; for multi-select, use "in" operator and the collection).

  3. Add Columns: Select Opportunity fields to display (e.g., Name, Amount, Close Date).

Result: Users select one stage, updating the variable for filtering.

Example 2: Controlling the Visibility of Other Components

Combine the Checkbox Group with the "Set Component Visibility" feature to show/hide other components dynamically based on user selections. This is useful for conditional UIs, such as revealing a Kanban board only when specific filters are selected.

1

Configure Checkbox Group

  • API Name: statusFilter

  • Label: "Select Status"

  • Data Source: manual (options: "Active", "Inactive", "Pending")

  • Is Multi Select: Off (for single select; adjust for multi)

  • Value: Bind to {!selectedStatus} (create a Text Variable)

  • Variant: standard

  • Type: default

  • Orientation: vertical

2

Add Target Component (e.g., Kanban)

Drag a Kanban component onto the canvas

3

Set Visibility Rule on Kanban

  • Select the Kanban.

  • In Properties Panel > Set Components Visibility, add a visibility condition like Input Choice Set value equal to a specific name.

Result: The Kanban appears only when "All Divisions" is selected (or contains the value in multi-select), hiding otherwise for a cleaner, context-aware interface

Key Considerations

  • Data Source Matching: Ensure options align with the selected mode (e.g., picklist for enums); test queries for large datasets.

  • Layout Responsiveness: For horizontal, adjust columns based on screen size to prevent overflow.

  • Validation: Combine Required with flows to enforce selections in forms.

  • Accessibility: Use descriptive labels; toggles/buttons improve touch-friendliness.

Troubleshooting Common Issues

  • Options Not Loading: Verify Data Source config (e.g., query permissions, picklist field).

  • Layout Overflow: If horizontal, enable Multiple Rows or reduce the number of columns.

  • Disabled Not Working: Ensure no conflicting interactions; test in preview.

  • No Defaults: Pre-populate Variables for initial selections if needed.

Summary

The Avonni Checkbox Group component offers versatile option selection with Salesforce data integration and customizable styles. It's great for filters and forms in Dynamic UIs. For related components, see Avonni Picklist or Data Sources Guide

Last updated

Was this helpful?