Segmented Control

The Avonni Segmented Control component displays a set of options as connected segments, letting users pick a single value from a compact, button-style group.

Overview

To start with the Avonni Segmented Control component, you'll first need to connect it to your data and configure the options it should display. The sections below follow the configuration panel from top to bottom, so you can read along as you build.

Configuration

To configure the Segmented Control, select it on the canvas. The Edit Segmented Control panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

Data Source

Before you build your segmented control, you must tell the Avonni Segmented Control component where to get the options it should display. You have several options, depending on the source and nature of your data:

Manual

Enter data directly into the component configuration.

Variable

This is useful for data that changes based on user interactions or other component logic.

Query

This is the most common option for displaying Salesforce records.

Picklist

Retrieve data dynamically from a standard or custom picklist field within Salesforce.

Data Mapping

When using a dynamic data source for your Segmented Control, you'll need to configure the Data Mappings section to tell the component how to turn each queried record into a segment.

Think of it like a translator: Data Mappings ensure the correct information from your Salesforce data ends up in each segment.

Why are Data Mappings Important?

Without data mapping, the control wouldn't know which part of your data to render. This could result in segments showing incorrect or irrelevant information.

How Do Data Mappings Work?

In the Data Mappings section, you'll establish the connection between your Salesforce data fields and the corresponding segment attributes. By selecting which field maps to which attribute, you ensure each segment accurately displays the correct information from your Salesforce data.

Attribute	Description
Label	Text label of the option. For common objects this is prefilled (for example, the Subject of a Task or the Name of an Account).
Value	A unique value for the option, defaulting to the record Id. This value is returned when the segment is selected.

Options

The Options section defines the static list of segments rendered in the control. Each item represents one selectable segment, with two attributes:

Attribute	Description
Label	Text label shown on the segment.
Value	A unique value for the option. This must match the control's Value property when the segment is selected.

Content

The Content section controls which segment is selected and how the segments are laid out.

Value

The value property sets the currently selected option. It must match the Value of one of the defined segments. If left empty, the first segment is selected by default.

Stretch

When enabled, segments stretch to evenly fill the full available width of the container. When off, each segment sizes to its own label.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Interactions

Interactions define what happens when users interact with the Segmented Control. Configure them from the Interactions tab of the Edit Segmented Control panel.

Change

Fires when a user selects a different segment. Use this to navigate to a related record, filter another component, or trigger any other flow logic tied to the selected value. The selected segment is exposed through the selectedItem and selectedItemSObject output attributes.

Output Variables

The Segmented Control exposes these output variables you can reference elsewhere on the page after the user interacts with it.

Segment Selection

When a user picks a segment, these variables update with the selected segment's data.

Output variable	Type	What it returns
Selected Item	Object	The selected segment's data — its label and value.
Selected Item sObject	Record (SObject)	The full Salesforce record associated with the selected segment. Requires a Query or Variable data source.

Example: When a user selects a segment, use Selected Item sObject to display the corresponding record's details in a record-detail component beside the control.