Input Choice Set

Overview

The Avonni Input Choice Set offers a range of customization options to cater to various form requirements. It supports multiple input types and allows for the adjustment of visual elements like labels and check positions. This flexibility makes it suitable for various applications, from simple data entry forms to complex user surveys.


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 TypeDescription

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 TypeDescription

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 OptionDescriptionUse 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 OptionDescriptionUse 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.

SettingDescriptionOptionsUse 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

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 here to explore these options and learn how to use them.

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 OptionDescription

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.

Last updated