# Flow Grids
Flow Grids GridMate provides lightning components to deal with data tables in flows. We provide components to view/select and edit a collection of records.
In this tutorial, we will setup a flow to select a list of contact and add them as list of contact roles with the ability to set the role of each contact from the flow.
This flow is launched from an **Opportunity** record page by passing the current record Id. We get the opportunity details using the passed **recordId**.
The opportunity record is used to get the opportunity account contacts. The list of contacts is then converted to a JSON collection and passed to **GM - Flow View Grid** component.
**GM - Flow View Grid** requires at least the following attributes:
* **API Name**: the API name of the component in the flow.
* **Related Object Name**: the API name of the displayed object (Contact).
* **FieldSet Nadme**: the API name of the fieldSet of the displayed object.
* **Custom Label**: the label of the grid. If this property is empty, the fieldSet label will be used.
* **Candidates**: JSON collection of records to display. JSON collection conversion from an SObject collection is handled by **GM - Json from Collection** Apex action. This action is a part of GridMate package.
* **Filter**: JSON expression to filter the records. This option doesn’t require a **Get Records** to filter the records. We recommend using **candidates** option only if the filtering logic is too complex.
**Select Contacts** screen displays a grid where the user can see the records and select a subset to add as an **Opportunity Contact Role.**
{% hint style="info" %}
When a flow contains more than one screen, to save the selected records, they should be saved in flow variable and passed back to **GM - Flow View Grid.** To achieve this, you should follow the steps below:
* Create a collection of string : **contactIdList**
* On the component properties, go Advanced and check Manually assign varaibles
* Set **22.Selected Id(s)** to contactIdList
* Check Use values from when the user last visited this scree under Revisited Screen Values section.
{% endhint %}
The list of selected records is converted to an SObject collection. SObject collection conversion from an JSON collection is handled by **GM - Collection from Json** Apex action. This action is a part of GridMate package.
We iterate on the contact collection to create the corresponding opportunity contact roles and save them into Salesforce.
The last step of our flow is to be able to edit the contact roles or completely delete them. Editing a collection of records is handled by **GM - Flow Edit Grid** component.
**GM - Flow Edit Grid** requires at least the following attributes:
* **API Name**: the API name of the component in the flow.
* **Related Object Name**: the API name of the displayed object (OpportunityContactRole).
* **FieldSet Nadme**: the API name of the fieldSet of the displayed object.
* **Custom Label**: the label of the grid. If this property is empty, the fieldSet label will be used.
* **Candidates**: JSON collection of records to display if the filter property is not used.
* **Filter**: JSON expression to filter the records. We recommend using a formula to build the expression as below.
* **Save Records**: Set this property to True if you want to save the records to Salesforce once the user hits **Next**/**Finish**. If not, you can get the updated records from the component and do the update using an **Update Records** component.
{% hint style="warning" %}
**GM - Flow Edit Grid** implements a flow action bar, thus the component should be in the bottom of the screen and standard header should be hidden.
{% endhint %}
Below is a quick demo of the final version of our flow where the user can smoothly add Opportunity Contact Roles with few clicks!
{% embed url="" %}
**GM - Flow Edit Grid**
{% endembed %}
## Drag To Fill
The **Drag to Fill** feature in the Flow Grid component enhances data entry by allowing users to **quickly apply a single value across multiple cells**. Users can simply enter the value once and drag, similar to traditional spreadsheets.
{% embed url="" %}
