The Avonni Input Choice Set Grid presents choices in an organized grid, simplifying selection in forms and data entry.
Last updated
Was this helpful?
The Input Choice Set Grid functions similarly to a spreadsheet and consists of three main elements: columns, rows, and values.
Columns represent the choices or criteria available to the user and are displayed in the top row of the grid. You can populate columns using various methods:
Manual Entry: Directly type in the options.
Flow Variables: Use values from your flow variables.
Picklist Fields: Pull options from a picklist field on a Salesforce object.
Salesforce Data Query: Fetch options directly from your Salesforce data using a query.
Rows are created manually and represent different items, records, or categories that users can select. Each row provides context for the options in the columns.
Each cell in the grid (where a row and column meet) has a value. You set this value. When a user selects a cell, that value is stored. This allows for precise data capture based on the user's selections.
You'll work with the data the Input Choice Set Grid returns to use the user's selections in your flow. This data is provided in a structured format called JSON.
value: (For single selections only) Stores the selected cell's value.
valueSerialized: (For single and multiple selections) Stores all selected values in a unique text format. This is the recommended attribute to use, as it covers both single and multiple selection scenarios
valueSerialized JSON Looks Like:When a user makes selections in the grid, the valueSerialized attribute will contain a JSON string. This JSON string is a list of objects. Each object represents one selected cell and has the following structure:
JSON
Key things to understand about this JSON
row: This is the text label you gave to the row when you set up the grid.
col: This is the text label of the column the user selected.
value: This will almost always be true if the object is present in the JSON. A cell won't appear in this list if it is not selected.
Access valueSerialized: Use the valueSerialized attribute from the Input Choice Set Grid component in your flow.
Parse the JSON: To make this JSON easy to work with, you'll typically use an Apex action to convert it into a collection of Apex objects.
Loop and Process: Use a "Loop" element in your flow to go through each selected item (each object in the JSON). Inside the loop, you can access the row and col values to update records, make decisions or trigger other actions.
Prefilling Values: When the component loads, prepopulate the grid with default selections to guide users or streamline data entry.
Data Collection: Organize complex data inputs, such as schedules, resource allocations, or preference mappings.
Surveys and Feedback: Gather user feedback across multiple criteria efficiently
Input Choice Set Grids provide a user-friendly way to gather multiple selections in a structured format. We offer a range of styling options to ensure your grid integrates seamlessly with your application's design.
Margin: Control the spacing around the grid to position it correctly within its surrounding elements.
Size: Adjust the overall size of the grid container to fit your layout requirements
By utilizing these styling options, you can create Input Choice Set Grids that are functional, easy to use, visually appealing, and consistent with your application's overall design. This enhances the user experience by providing a clear and organized selection method.
.avif?alt=media&token=b644ee2a-18db-4dd9-9f23-1c027065c1d4)
