Hi there!
I am trying to teach myself about Retool by creating a TODO list app similar to TodoMVC, backed by a Google Sheet for a "database". Creating a query to get sheet data has been super easy - I was able to display a list of TODO items stored in the sheet using the Checkbox Group component.
What I have not been able to figure out from the docs and some searching, is how I would dynamically set the checked UI state of the checkbox based on the value of one of the columns in the Google Sheet. In my sheet, I have two columns - a Description which is a string of text (the TODO item to be completed), and a Done column which is a string that can be either TRUE or FALSE.
In Retool, in the Value property of the "Mapped options" section of the Checkbox Group, I have attempted the following expressions:
Attempt 1
I was hoping that specifying the Done property from the sheet would be enough to update the checkbox UI state, but this did not work.
{{ item.Done }}
Attempt 2
I thought maybe there was type coercion not happening with the attempt above, so I also tried this for the Value:
{{ item.Done === 'TRUE' }}
Summary / Question
In essence, I am trying to set the checked attribute of the underlying <input type="checkbox"> dynamically based on the value of an item coming in from my Google Sheet.
My suspicion is that the value HTML attribute is what you can handle/modify/databind in the Checkbox Group component in the Retool UI, but that there isn't a Retool UI hook for the checked HTML attribute for this control? I have been using Retool for roughly ~2 hours though, so I could very much be missing something 
- thanks for any help you can offer!
Hey @kwhinnery,
This is an interesting question! The "Value" of each todo item represents a unique underlying value. You can use this as an identifier and the item's label will default to its value if you don't explicitly define a different label.
This is separate from the value of the entire checkbox group which is actually an array of values that have been selected:
To set this dynamically, you can pass in an array of the values you'd like to set in the "Default value" field of the checkbox group. Since you're trying to populate that you might need to do a bit of mapping over your data to extract the values you actually want, something like {{ self.data.filter(todoItem => todoItem === "TRUE").map(todoItem => todoItem.description) }}:
In this case self represents the entire checkbox group component, and since you're passing your query data to it, self.data will have the full array of data to map over:
Bonus: You can also set your Sheets query to read data as typed values instead of strings so that you actually get boolean values to filter on:
Let me know if that helps!
This was very close! What I ultimately needed to set as the "Default value" for the checkbox group was this - note that I also configured the Google Sheet data source (as you suggested) to automatically coerce "TRUE" or "FALSE" string values into booleans:
{{ self.data.filter(todoItem => todoItem.Done).map(todoItem => todoItem.Description) }}
The above sets the "Default value" of the Checkbox Group to an array like ['Get the milk', 'Do the laundry'], which is the array of values that are currently "done" in the Google Sheet. What I didn't grasp was that the "value" of a checkbox group in this case is an array of all the checked items (by whatever the value is configured to be for each individual item).
Thanks for the help!
