Get a list with selected custom collection components

💬 Mobile
1

  1. My goal: I would like to bulk update several components in my google sheet. To achieve that I want to select multiple rows in a custom collection and update only the selected values in the google sheet data source.

  2. Issue: I had a discussion with ChatGPT to solve that problem and I think some of the suggested solutions were absolutely going in the right direction, but some aren't working at all. I tried several hours to get a list of all selected checkboxes of a custom component.

  3. Steps I've taken so far:
    These are the steps I've taken so far only to generate the list for the bulk update:

  • added a column in the original data source to set the selected value of the custom collection (true or false)
  • Saved the google sheet query in a variable
  • get the variable in the custom collection
  • added a checkbox in the custom collection
  • added change handler for checkbox press
  • Added a script in the change handler ChatGPT suggested (didn't work)
    That's the script:

const backlog = utils.getVariable('Backlog');
const index = i;
const newValue = 'true';

const updated = [...backlog];
updated[index] = {
...updated[index],
Selected: newValue
};

utils.setVariable('Backlog', updated);

How do I change the value in the variable after pressing the checkbox?

Maybe there is a better solution to solve the problem. That is only the way ChatGPT suggested.

To bulk update I only need the ID (also a value in the existing google sheet) of the selected entries. I would filter the variable and look for the selected value.

  1. Additional info: (Cloud or Self-hosted, Screenshots) Cloud hosted
3

Hi @Patrik0412,

In Retool, utils.getVariable and utils.setVariable are not valid methods for accessing or manipulating variables. Instead, you should directly reference your variables in double curly braces {{ }}, or if you are working with JavaScript queries, you can access the variable value directly with .value.

To update your Backlog variable when the checkbox is pressed, you can do something like this:

const updated = Backlog.value.map((row, index) => {
  if (index === i) {
    return {
      ...row,
      Selected: checked // true or false based on checkbox state
    };
  }
  return row;
});

Backlog.setValue(updated);

This will update the Selected field of the row where the checkbox was pressed.

Hope this helps you!

4 Likes
4

Hi @Patrik0412,

When working with custom components, you will be outside the realm of support that the Retool team can offer. You will be building a component using pure Javascript and won't really be able to leverage the prebuilt tools and functionality that comes with Retool.

My best suggestion is to have ChatGPT teach you how to build a React component that has state management. The state of the component will contain the selected data and be updated by React tooling such as hooks or some other method of state management to be dynamic and reactive to user click events.

Then the data from the component's state will be the data you pass into a query to update the Google sheet.

Best of luck!

1 Like