How to build a Option List for a Tags field based Row data

@Paulo here are some details about the topics we discussed yesterday in the office hour.

The data for the table is something like this.

What I need is to put field 1-40 (these are names not index and don't ask me why :slight_smile: into an Option List for a column. Since these fields are different for each row, I expect the Option List is different for each row in this column.

Thanks for the help.

Hi @Wei_Chen, thanks for posting your question here after OH.

Here is an example on how to make this work:

I created this array to represent the output of your query:

const classes = [
  {
    1: "08/26/2024",
    2: "08/27/2024",
    3: "08/28/2024",
    4: "08/29/2024",
    5: "08/30/2024",
    6: "09/01/2024",
    7: "09/02/2024",
    8: "09/03/2024",
    9: "09/04/2024",
    10: "09/05/2024",
    11: "09/06/2024",
    class_count: 20,
    max_grade: "G6",
    min_grade: "Kinder",
    name: "Beginner Chess",
    max_enrollment: 12,
    min_enrollment: 6
  },
  {
    1: "09/07/2024",
    2: "09/08/2024",
    3: "09/09/2024",
    4: "09/10/2024",
    5: "09/11/2024",
    6: "09/12/2024",
    7: "09/13/2024",
    8: "09/14/2024",
    9: "09/15/2024",
    10: "09/16/2024",
    11: "09/17/2024",
    class_count: 20,
    max_grade: "G6",
    min_grade: "Kinder",
    name: "Intermediate Chess",
    max_enrollment: 12,
    min_enrollment: 6
  },
  {
    1: "09/18/2024",
    2: "09/19/2024",
    3: "09/20/2024",
    4: "09/21/2024",
    5: "09/22/2024",
    6: "09/23/2024",
    7: "09/24/2024",
    8: "09/25/2024",
    9: "09/26/2024",
    10: "09/27/2024",
    11: "09/28/2024",
    class_count: 20,
    max_grade: "G6",
    min_grade: "Kinder",
    name: "Advanced Chess",
    max_enrollment: 12,
    min_enrollment: 6
  },
  {
    1: "09/29/2024",
    2: "09/30/2024",
    3: "10/01/2024",
    4: "10/02/2024",
    5: "10/03/2024",
    6: "10/04/2024",
    7: "10/05/2024",
    8: "10/06/2024",
    9: "10/07/2024",
    10: "10/08/2024",
    11: "10/09/2024",
    class_count: 20,
    max_grade: "G6",
    min_grade: "Kinder",
    name: "Chess Tournament Prep",
    max_enrollment: 12,
    min_enrollment: 6
  },
  {
    1: "10/10/2024",
    2: "10/11/2024",
    3: "10/12/2024",
    4: "10/13/2024",
    5: "10/14/2024",
    6: "10/15/2024",
    7: "10/16/2024",
    8: "10/17/2024",
    9: "10/18/2024",
    10: "10/19/2024",
    11: "10/20/2024",
    class_count: 20,
    max_grade: "G6",
    min_grade: "Kinder",
    name: "Chess Mastery",
    max_enrollment: 12,
    min_enrollment: 6
  },
  {
    1: "10/21/2024",
    2: "10/22/2024",
    3: "10/23/2024",
    4: "10/24/2024",
    5: "10/25/2024",
    6: "10/26/2024",
    7: "10/27/2024",
    8: "10/28/2024",
    9: "10/29/2024",
    10: "10/30/2024",
    11: "10/31/2024",
    class_count: 20,
    max_grade: "G6",
    min_grade: "Kinder",
    name: "Chess Strategy",
    max_enrollment: 12,
    min_enrollment: 6
  },
  {
    1: "11/01/2024",
    2: "11/02/2024",
    3: "11/03/2024",
    4: "11/04/2024",
    5: "11/05/2024",
    6: "11/06/2024",
    7: "11/07/2024",
    8: "11/08/2024",
    9: "11/09/2024",
    10: "11/10/2024",
    11: "11/11/2024",
    class_count: 20,
    max_grade: "G6",
    min_grade: "Kinder",
    name: "Chess Tactics",
    max_enrollment: 12,
    min_enrollment: 6
  },
  {
    1: "11/12/2024",
    2: "11/13/2024",
    3: "11/14/2024",
    4: "11/15/2024",
    5: "11/16/2024",
    6: "11/17/2024",
    7: "11/18/2024",
    8: "11/19/2024",
    9: "11/20/2024",
    10: "11/21/2024",
    11: "11/22/2024",
    class_count: 20,
    max_grade: "G6",
    min_grade: "Kinder",
    name: "Chess Openings",
    max_enrollment: 12,
    min_enrollment: 6
  },
  {
    1: "11/23/2024",
    2: "11/24/2024",
    3: "11/25/2024",
    4: "11/26/2024",
    5: "11/27/2024",
    6: "11/28/2024",
    7: "11/29/2024",
    8: "11/30/2024",
    9: "12/01/2024",
    10: "12/02/2024",
    11: "12/03/2024",
    class_count: 20,
    max_grade: "G6",
    min_grade: "Kinder",
    name: "Chess Endgames",
    max_enrollment: 12,
    min_enrollment: 6
  },
  {
    1: "12/04/2024",
    2: "12/05/2024",
    3: "12/06/2024",
    4: "12/07/2024",
    5: "12/08/2024",
    6: "12/09/2024",
    7: "12/10/2024",
    8: "12/11/2024",
    9: "12/12/2024",
    10: "12/13/2024",
    11: "12/14/2024",
    class_count: 20,
    max_grade: "G6",
    min_grade: "Kinder",
    name: "Chess Analysis",
    max_enrollment: 12,
    min_enrollment: 6
  }
];

return classes;

Here is the Transformer I created to nest all these dates inside a dates key, with the value of an array with the dates in each object:

Here is the code for you to adapt to your columns:

const classes = {{query1.data}}
function nestDatesToArray(arr) {
  return arr.map(obj => {
    // Create a new array for dates
    const dates = [];
    
    // Loop through the object and collect numerical keys
    for (const key in obj) {
      if (!isNaN(key)) {
        dates.push(obj[key]); // Add the date strings to the 'dates' array
      }
    }
    
    // Create a new object with the 'dates' array and keep the rest of the properties intact
    const { class_count, max_grade, min_grade, name, max_enrollment, min_enrollment } = obj;
    
    return {
      dates,
      class_count,
      max_grade,
      min_grade,
      name,
      max_enrollment,
      min_enrollment
    };
  });
}

// Example usage with the provided array 'classes'
const nestedClasses = nestDatesToArray(classes);
return nestedClasses

Now for the table settings, set the 'Data source' to the Transformer and make the dates column editable so the user can update the selection. Then click on 'Option list':

Under Options, keep the same transformer as the 'Data source,' and update the 'Value' to {{ item.dates[i] }}, where item.dates is a reference to the dates keys from the data source (a two dimensional array with all the values of dates), and i is the current index.

Here is the result:
Screenshot 2024-10-09 at 2.56.09 PM

Hi, @Paulo

Thanks for your reply. I tried your method. But the option list it built is not the right one for each row. It seems taking the first date in the first row, the second date in the second row, the third date in the third row, …..

I tried different ways to write the Mapped values. But unsuccessful.

Any idea?

Regards,

Hi, Paulo

Thanks for your reply. I tried your method. But the option list it built is not the right one for each row. It seems taking the first date in the first row, the second date in the second row, the third date in the third row, …..

I tried different ways to write the Mapped values. But unsuccessful.

Any idea?

Regards,

I'm sorry to hear that. I had the same dates for every object. I'll update the data and try again. We'll find a way! :slightly_smiling_face:

1 Like

After lots of trial and error I came to find out that it's a limitation with the table component. We found an existing internal feature request for it, I added your use case and +1.

Here is a workaround:

We can use a Select component with the 'Data source' set to the selected row's date options.

To implement this without changing our existing logic, just add one more JS Transformer that maps the output of the former, and returns the dates for the selected row.

Our existing transformer collects the dates inside an array for each object and returns the formatted results:

The new Transformer needs to map the above into an 2D array of just dates for each object, and return all the options for the selected row. We can use tableName.selectedDataIndex to reference which row has been selected:

On the Select component, set the 'Data source' to the latter Transformer, and update the 'Value' & Llabel' properties to {{ item }}

We can also use Moment.js to format the labels:

Let us know if you have any questions. :slightly_smiling_face:

1 Like

Thanks for the effort @Paulo. But this doesn't solve the use case. I need a select component for each row since the user can select the date for each class (== row). Since the row is dynamically generated in the table, I don't see how I can have multiple select components matching the rows. So sounds like this is not really something doable, is it?

Correct, this is currently not possible, it's a limitation with the table component. The workaround uses a single select component to show the available dates for the selected row. We could also implement this with a modal that opens and shows dates for the component when the row is clicked. But as of right now, it's not possible to have a dropdown within each row with unique values.

1 Like

Hi, @Paulo

I think I found a way to make this work, well, almost.

I select the generated DATES as the source for the column and make the column as a tag column.
image

I select {{currentRow.DATES}} as the source for the Option list, {{item}} as the value
image

Now the column will see the {{currentRow.DATES}} as a list of options for each row.

The only weird thing is it doesn't load the options initially, until I go in to edit the value field for option -- simply retype the same content {{item}} again. Then Retool will load options. It seems Retool somehow doesn't read the values from {{item}}.

Any insights?

1 Like

@Paulo I recorded a video to make this more clear. But I can not upload into the post. Let me know if you want see the video and how.

Hi @Wei_Chen, I would love to see the video in order to help you find a workaround if there's any. Upload it to a platform like www.loom.com or Google Drive and drop the link here. :slightly_smiling_face:

1 Like

@Paulo here it is -- optionlist.mov - Google Drive

When you add and remove the dot, does the component show the right options for each row?

1 Like

yes. it reads the DATES from the respective row.

I was able to reproduce the issue and created a new bug report as your approach seems to be a great workaround for the limitation mentioned above. The fact that it renders the data but goes away with a refresh makes me think it's in fact a bug.

We'll update you here with any insight from our devs on this bug, if we find a way to make this work, or when this is fixed.

Thank you for your feedback!

1 Like

Thanks @Paulo. Is it possible to ask your engineering team to expedite the fix as I am blocked on this issue right now. Given we are so close, it'd be great to have the fix so we can release the app.

Thanks in advance.

Thank you for sharing your urgency around this, and we completely understand the impact this is having on your timeline. I’ve raised this with our engineering team to reinforce its priority. However, we’re unable to guarantee an expedited release.

We’ll keep you updated here with any developments, and please let us know if there’s anything else we can assist you with in the meantime.

Thank you for your patience and understanding. :slightly_smiling_face:

2 Likes

Hi, @Paulo

Just wondering if you have more insights on the schedule?

Thanks.

1 Like

Not yet, this issue has not been prioritized.

1 Like