LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Guide
    • Learn the Basics
    • Installation & Licenses management
    • Flow vs. Dynamic Components
    • Integrating with Experience Cloud
  • Tutorials
    • Videos
    • Projects Tutorials
    • Components Tutorials
      • Alert
        • Create a custom branding alert
        • Create an error alert dismissible
      • Avatar
        • Create an avatar with actions
        • Create an avatar with details
      • Avatar Group
        • Display a list of contacts related to an account
        • Display a list of sharing users related to the record
      • Barcode
        • Generating and Displaying Barcodes for Product Codes
      • Biometrics
        • 101 Tutorial
      • Button
        • Customizing Flow Navigation Buttons
        • How to Add a "Cancel and Close" Button
        • How to Open Flows from Buttons
      • Button Groups
        • Identifying Clicked Buttons
      • Button Menu
        • How to change dynamically Avonni Button Menu Icons
      • Calendar
        • Calendar 101 Tutorial
        • How to Connect Multiple Data Sources to the Avonni Calendar
        • How to Customize Time Spans
        • How to Customize the Right-Click Menu
        • How to Add an Edit Action to Events
        • How to Add a New Event Button to the Avonni Calendar Header
        • How to Create Events by Dragging in the Avonni Calendar
        • How to Reschedule Events with Drag and Drop
        • How to Color-Code Calendar Entries in the Avonni Calendar
        • Using a variable Data Source
        • Using a Query Data Source
      • Carousel
        • Build a Related Products Carousel
      • Combobox
        • Implement Dependent Picklists in Comboboxes
        • How to Dynamically Enable/Disable Dependent Picklists
        • Using Multi-Select Comboboxes with Reactive Formulas
      • CSV Parser
        • 101 Tutorial
      • Data Table
        • Adding Filters
        • How to add Images onthe Data Table
        • Creating Row Actions
        • Displaying a Record as a QR Code
        • Displaying Record Name field as a link
        • Learn the Basics
        • Making a field editable
        • Setting Up Data Export
        • Tips and Tricks
          • Activate infinite scrolling
          • Creating an action from a button or a link
          • Customizing the Badge Color using a formula
          • How to Grayscale Header Actions Dynamically in Avonni Data Table
          • How to Conditionally Color Cells
          • Enabling auto-refresh on the Data Table when pressing a button
          • Handling formula text field
          • How to set column visibity
          • Passing multiple record IDs to another flow
          • Data Table Editor
      • Date Picker
        • Display a date picker with Marked Dates from a Get Records
      • Date Time Picker
        • How to create Collection Variables for StartDateTime and EndDateTime
        • How to Block Out Times
      • Delay Interaction
        • Creating a Confetti Celebration on the Final Screen
        • Launch a flow dialog without a screen
      • Dual Listbox
        • Display contacts with custom icons
        • Accounts list group by industry
      • Expandable Section
        • How to add components into an expandable section
      • Header
        • Building Engaging Card Headers
        • Crafting a Profile Header
        • Adding Action Buttons to Headers
        • Adding a Background Image to Your Header
      • Input Pen
        • Add the custom Toolbar
        • How to Store Input Pen Drawings as Attachments in Salesforce
      • Kanban
        • 📹Introduction
      • List
        • Create a grid list with images
        • Create a sortable list
        • How to Reorder Items and Update Records
        • Vertical List with Actions
      • Navigation
      • Map
        • Customize the Map Marker
        • Visualizing Account Information on a Map
      • Metric
        • 📹Introduction
      • Microphone
        • Save the Microphone recording file as an attached on a record
      • Progress Indicator
        • Creating a Universal Dynamic Progress Step Collection
        • How to Change the Appearance of Your Progress Indicator using a variable
        • Error Handling
      • QR Code
        • Generate a QR Code from a record field
      • Record Detail
        • Using the Record Detail with Reactive Screens
      • Scoped Notification
        • Display message based on a value
      • Text Area
        • TextArea issue with max length when clicking on the next button
      • Tree
        • Build a Tree View with Dynamic Record Details
      • Timeline
        • Assigning multiple source collection to the Timeline
        • Customizing Date Format in the Timeline Component using Luxon
        • Create a horizontal activity timeline
        • Display Tasks
        • Perform actions on selected tasks
      • Vertical Visual Picker
        • Adding sub-items
        • Display a list of online contacts
    • Interactions
      • Enabling auto-refresh for queries after the Flow Dialog ends
      • Creating a Confetti Celebration on the final screen
      • How to create an interaction to navigate to an object
      • How to create an interaction to a record page
      • How to create an interaction to open another flow
      • How to pass an Input Variable from One Flow to Another
      • How to setup an Open Flow Panel interaction
    • Reactive Query Tutorials
      • How to make Data Tables Reactive
      • Build a reactive Data Table Using Dependent Picklists
      • Building a Dynamic Metrics Dashboard with the Data Table
      • How to build a reactive 'Quarterly Opportunity Tracker' component
      • How to Create a Combobox-Filtered Data Table
      • Create a Dynamically Linked Account-Contact View
      • Troubleshooting
    • Tips and Tricks
      • Copy / Paste a component settings
      • Create a link to the record using the href attribute
      • Create a variable and use it in a component property
      • Data Table
      • Hide Standard Header and Footer in a flow
      • How to pass your current RecordID in your screen flow
    • Platform Events
      • Configuration tutorial
  • Flow Components
    • Explore All Components
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Barcode
    • Barcode Scanner
    • Biometrics
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Calendar
    • Carousel
    • Chart
    • Chip Container
    • Combobox
    • Color Picker
    • CSV Parser
    • Date Picker
    • Data Table
    • Date Time Picker
    • Delay Interaction
    • Document Scanner
    • Dual Listbox
    • Expandable Section
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Hero Banner
    • Icon Picker
    • Image
    • Input Choice Set
    • Input Choice Set Grid
    • Input Counter
    • Input Date Range
    • Input Pen
    • Illustration
    • Interaction service
    • Kanban
    • List
    • Map
    • Metric
    • Microphone
    • Navigation
    • NFC Scanner
    • Pill Container
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Progress Popover
    • QR Code
    • Rating
    • Record Detail
    • Scoped Notification
    • Separator
    • Slider
    • Tabs
    • Text Area
    • Timeline
    • Tree
    • User Location
    • Vertical Visual Picker
    • Visual Picker
    • Visual Picker Link
    • Video Player
    • Welcome Mat
  • Component Builder
    • Overview
    • Properties Pane
    • Interactions Pane
      • Copy Records
      • Download
      • Export To
      • Fire Confetti
      • Flow Navigation
      • Navigate
      • Show Toast
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
      • Open Flow Panel
      • Update Records
      • Refresh Query
      • Refresh All Queries
      • Open Quick Action
    • Style Pane
    • Component Templates
    • Layout and Customization
      • Alignment controls
      • Copy / Paste component settings
      • Margin / Padding
      • Pull To Boundary
      • Undo / Redo
  • Data Sources
    • Understanding Data Sources
    • Manual
    • Variable
    • Query
    • Query VS Variable
    • Picklist
  • Actions
    • Overview
    • Data Manipulation and Transformation
      • Convert Lead
      • Create file
      • Split Text to Text Collection
      • SObject Collection Math
      • SObject Collection Join
      • Get Record from SObject Collection
      • SObject Collection to Activity Timeline Items
      • SObject Collection to Calendar Marked Date Collection
      • SObject Collection to Scheduler Events
      • SObject Collection to Text Collection
    • Data Conversion and Formatting
      • Text Collection Get Value
      • Get Value from String Collection
      • Number Collection Get Value
      • Join Text Collection
      • Format Text in SObject Collection
      • Format Text Collection
      • Text Collection to Combobox Options
      • Text Collection to Dual Listbox Options
      • Text Collection to Progress Indicator Steps
    • UI & Navigation
      • New Avatar Action Collection
      • New Button Menu Item Collection
      • New Carousel Item Collection
      • New Combobox Option Collection
      • New Dual Listbox Option Collection
      • New Header Action Collection
      • New Header Avatar Action Collection
      • New List Action Collection
      • New Navigation Item Collection
      • New Progress Indicator Step Collection
      • New Progress Popover Step Collection
      • New Slider Custom Label Collection
  • Help
    • Performance Guide
    • How do I contact support?
    • How do I report Bugs?
    • Troubleshooting
    • Release Process
  • Miscellaneous
    • Live use cases examples
    • Release Notes
    • Salesforce Flow Limit
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Configuration
  • Data Source
  • Input choice set type
  • Interactions
  • Using Dependent Picklists
  • Interactions
  • Examples of Utilizing Interactions in the Input Choice Set within Salesforce
  • Style

Was this helpful?

  1. Flow Components

Input Choice Set

The Avonni Input Choice Set offers highly customizable input options for forms, supporting various input types and visual adjustments.

Last updated 4 months ago

Was this helpful?


Configuration

Data Source

To make the most of the Avonni Input Choice Set in Salesforce, it's essential to correctly set up the Data Source. The Data Source is where you decide what options will be available in your input choice set. There are three main ways to do this.

Data Source Type
Description

Manual

Manually enter the options you want to appear in your input choice set.

Variable

Use a variable as a placeholder, which will be filled with Get Records collection you created in your flow.

Picklist

Utilize a predefined list of choices already in Salesforce, known as a picklist field.

The Input Choice Set component works with dependent picklists. If you pick a dependent picklist field for your second Input Choice Set, you'll see a new option called "controlling value".

In the screenshot below, the second Input Choice Set has this "controlling value" option because it's a dependent picklist. We've connected this to the "Value semi-colon separated" option from the first Input Choice Set.

Input choice set type

The Input Choice Set component offers three types of inputs: Default, Button, and Toggle. Input Choice Set Types change how the input looks and behaves.

Here's a simple breakdown:

Input Type
Description

Default

The standard look for your input fields, like regular checkboxes or radio buttons.

Button

Transforms your input fields to look like buttons, offering a more interactive experience.

Toggle

Changes your input fields into toggle switches, resembling on/off sliders.

After you pick a type (Default, Button, or Toggle), you'll see some specific settings related to that type. These settings let you customize your input fields further so they work and look the way you want in your form.

Default Type

When you select the default type for your input choice set in Salesforce, additional settings will become available for further customization. These settings allow you to tailor the input fields to meet your form requirements and design preferences better.

Default Type Option
Description
Use Case

Orientation

Choose the layout of your input options.

  • Vertical for longer lists or ample space.

  • Horizontal for compact forms or limited space. If selected, options to set the columns will be available.

Check Position

Determines where the checkmark or selection indicator is relative to the label.

Choose based on form design or preference. Left is traditional, right gives a modern feel.

Is Multi Select

Allows users to select more than one option.

Ideal for forms needing multiple selections, like surveys or preferences.

Required

Marks the input field as mandatory, requiring a response before form submission.

Use for essential fields in the form's purpose, such as contact details in a registration form.

Button Type

After selecting the Button type for your Input Choice Set in Salesforce, you can access various settings that enable further customization. These settings are specifically designed to modify the appearance and functionality of the Button type input fields.

Button Type Option
Description
Use Case

Stretch

Allows the button to expand and fill the available space.

Useful for full-width buttons for better visibility or distinct style.

Display as Row

Aligns the buttons in a horizontal row.

Ideal for a streamlined look with side-by-side button choices.

Show Checkmark

Adds a checkmark to the selected button option.

Provides a clear visual indication of the selected option.

Checkmark Position

Determines where the checkmark appears on the button.

Choose based on design preferences or to match the form's layout.

Orientation

Sets the orientation of the button inputs. (Horizontal option includes selecting the number of columns.)

Vertical for longer lists. Horizontal for a compact layout with an option to select the number of columns.

Is Multi Select

Allows the selection of multiple button options.

Useful for forms needing multiple selections.

Required

Marks the button input as mandatory, requiring a response before form submission.

Essential for critical input fields where a response is necessary.

Toggle Type

When you select the Toggle type for your Input Choice Set in Salesforce, various specific settings become available. These settings allow detailed customization of the toggle input fields to fit your form's design and functional requirements.

Setting
Description
Options
Use Case

Stretch

Allows the toggle to expand and fill the available space.

Useful for making the toggle prominent and easy to interact with.

Show Checkmark

Adds a checkmark to the selected toggle option.

Provides a clear visual indication of the selected option.

Checkmark Position

Determines where the checkmark appears on the toggle.

Left, Right

Choose based on design preference or form layout.

Size

Adjusts the size of the toggle switch.

X-Small, Small, Medium, Large

Select size based on the importance of the toggle in the form and space availability.

Message Toggle Active

Displays a custom message when the toggle is in the active (on) position.

Useful for providing context or additional information when the toggle is active.

Message Toggle Inactive

Displays a message when the toggle is in the inactive (off) position.

Offers clarification or instructions when the toggle is inactive.

Orientation

Sets the orientation of the toggle inputs.

Vertical, Horizontal

Vertical for longer lists. Horizontal for compact layouts, with an option to select the number of columns.

Check Position

Specifies the position of the check element within the toggle.

Helps align the toggle's check element with other form elements.

Is Multi Select

Enables the selection of multiple toggle options.

Ideal for forms where multiple toggle selections are needed.

Required

Marks the toggle input as mandatory, requiring a response before form submission.

Essential for critical input fields where a response is necessary.


Interactions

Using Dependent Picklists

The Avonni Input Choice Set component supports dependent picklists, allowing you to create dynamic and user-friendly flows that adapt based on prior selections.

Key Points

  • Dependent Picklist Support: The Input Choice Set component integrates with dependent picklist fields.

  • Controlling Value Attribute: When you select a dependent picklist field for your Input Choice Set, a "controlling value" attribute becomes available.

  • Connecting to Controlling Field: The "controlling value" attribute should be connected to the "Value semi-colon separated" attribute of the Input Choice Set that represents the controlling field.

Example Scenario

Imagine a flow designed to help users select their desired car. In the first Input Choice Set, they choose a "Car Maker" (e.g., Toyota, Honda, Ford). This acts as the controlling field.

The second Input Choice Set presents the "Car Model" options. Crucially, its "controlling value" attribute is connected to the "Value semi-colon separated" attribute of the "Car Maker" Input Choice Set.

As a result, when a user selects "Toyota" in the first step, the second Input Choice Set dynamically adjusts to display only Toyota models (e.g., Camry, Corolla, RAV4). If they switch to "Honda," the model options instantly update to reflect Honda's lineup (e.g., Civic, Accord, CR-V).

Visual Demonstration

The attached images further illustrate the configuration.

By effectively utilizing dependent picklists with the Input Choice Set component, you can create intuitive user flows and maintain data integrity by presenting only valid choices at each step.

Interactions

Examples of Utilizing Interactions in the Input Choice Set within Salesforce

The Input Choice Set component in Salesforce, with its "Change" interaction, offers a dynamic way to respond to user selections. Below are two practical examples of how these interactions can be effectively used in Salesforce environments, leveraging the interaction options available in the Avonni Components package:

  1. Flow Navigation Interaction in a Customer Feedback Survey:

    • Scenario: Suppose you have a customer feedback survey within Salesforce.

    • Interaction Used: Flow Navigation.

    • Application: When a customer selects a specific option (e.g., expressing dissatisfaction with a service), the Flow Navigation interaction can automatically redirect them to additional questions or a different part of the survey (another screen). This allows for more detailed feedback collection based on their initial response.

    • Benefit: This tailored approach to survey navigation enhances the relevance and efficiency of the feedback collection process.

  2. Show Toast Interaction in a Sales Order Form:

    • Scenario: Consider a sales order form used by sales representatives in Salesforce.

    • Interaction Used: Show Toast.

    • Application: When a sales representative selects a particular product or service option from the Input Choice Set, a Toast notification can appear, offering additional information or alerts related to that product (like a special offer or critical product notice).

    • Benefit: This immediate feedback ensures the sales representative is well-informed and can relay the most current and relevant information to the customer.

These examples demonstrate the versatility and practicality of the "Change" interaction in the Input Choice Set, showcasing how it can enhance user experience and workflow efficiency in Salesforce applications.


Style

The Input Choice Set offers several options to style and customize its appearance. Here's a quick overview of what you can customize.

Styling Option
Description

Margin

Adjust the space around your input choice set to better fit within your form's layout.

Size

Change the size of your input fields to be larger or smaller as needed.

Label Style

Customize the appearance of the labels. Options include:

> Color

Change the color of the text labels.

> Font Size

Adjust the size of the font in the labels.

> Font Style

Choose a different font style for the labels.

> Font Weight

Make the font of the labels lighter or bolder.

Option Label Line Clamp

Set a limit on the number of lines for the option labels, helping keep your form neat and consistent.

The Input Choice Set has a "Change" interaction. This allows you to set up a specific action when someone selects an option in your input choice set. It's like programming a reaction to user choices. You can choose from various interactions in the Avonni Components package to make your choice dynamic. You can find more information to explore these options and learn how to use them.

here
Shows the overall flow design with two Input Choice Sets.
Highlights the configuration of the second Input Choice Set, showcasing the connected "controlling value" attribute.