# Input Choice Set Grid

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FFRzl0yS2J2pWWhP7JWyZ%2Fimage%20(60).avif?alt=media&#x26;token=b644ee2a-18db-4dd9-9f23-1c027065c1d4" alt="" width="375"><figcaption></figcaption></figure>

***

## How It Works

The Input Choice Set Grid functions similarly to a spreadsheet and consists of three main elements: **columns**, **rows**, and **values**.

### Columns

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.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FhPFk8Edh2S3s35JiF9Oe%2F2024-09-15_16-34-54.png?alt=media&#x26;token=4a6eed4e-af17-462d-a2f4-0dce70f63caa" alt=""><figcaption></figcaption></figure>

### Rows

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.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FnFWEQNiZJ7mGh6ERph7g%2F2024-09-15_16-35-53.png?alt=media&#x26;token=a695349a-68e7-457b-bae7-7d0b1a4dbad8" alt=""><figcaption></figcaption></figure>

### Values

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.

## Capturing User 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.**

### **Attributes to Use**

* `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**

{% hint style="info" %}
No additional configuration is needed within the grid component to capture these values; they are inherently available after the user interacts with the grid
{% endhint %}

### **What the `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

```json
[
  {
    "row": "Row Label 1",  // The label of the selected row
    "col": "Column Label A", // The label of the selected column
    "value": true          // Indicates if the cell is selected (true) or not (false)
  },
  {
    "row": "Row Label 2",
    "col": "Column Label B",
    "value": true
  },
  ... // More selected cells, if any
]
```

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

### **How to Use This Data in Your Flow**

1. **Access `valueSerialized`:** Use the `valueSerialized` attribute from the Input Choice Set Grid component in your flow.
2. **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.**
3. **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.

## Common Uses

* **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

## Styling Options

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.

{% tabs %}
{% tab title="Layout and Dimensions" %}

* **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
  {% endtab %}

{% tab title="Grid Appearance" %}

* **Grid Background:** Customize the background color of the entire grid container.
* **Grid Border:** Add a border around the grid to provide visual definition. You can customize the border's style (solid, dashed, etc.), color, and thickness
  {% endtab %}

{% tab title="Labels and Headings" %}

* **Label:** Style the main label or title that appears above the grid. Adjust the font, size, color, and weight to clearly identify the grid's purpose.
* **Columns Label:** Customize the appearance of the labels that identify each column in the grid.
* **Rows Label:** Customize the appearance of the labels that identify each row in the grid
  {% endtab %}

{% tab title="Input Cell Customization" %}
**Input:** Style the individual input cells within the grid. This includes options for:

* **Background:** Set the background color of the cells.
* **Border:** Add or customize borders around the cells.
* **Text:** Style the text within the cells, including font, size, and color. You can also customize the appearance of selected or unselected cells
  {% endtab %}
  {% endtabs %}

### **Enhanced User Experience**

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.