Using {{ table.selectedSourceRow }} to select choices in multiselect dropdown

💬 App Building
,
1

I have a query that generates an JSON response like so:

[
  {
    "id": 1,
    "name": "Territory_1",
    "status": "pending",
    "users": [
      {
        "id": 1,
        "username": "user1",
        "email": "user@gmail.com",
        "first_name": "John",
        "last_name": "Smith"
      },
      {
        "id": 2,
        "username": "use2",
        "email": "user2@gmail.com",
        "first_name": "Jane",
        "last_name": "Smith"
      }
    ],
    "counties": [
      {
        "id": 2340,
        "name": "Greenville County",
        "state": "SC",
        "fips_code": "45045",
        "time_zone": null
      }
    ]
  },
]

I'm displaying a table that uses that query as a data source, and I'm displaying the user column with a tag column and a mapped value of:

{{ item.map(user => `${user.first_name} ${user.last_name}`).join(', ') }}

Which is working great. I then create a form using {{ table.selectedTableRow }} as the data source. When I click on the row, the name field changes.

How would I go about passing an array of users.id from my query to the table and then to the edit form to prepopulate a multiselect field?

I've tried a few things and my last ditch effort would be some type of hidden column on the table and mapping the user IDs like I did with the user names - but I was curious if there's a more elegant solution.

Edit:

I'm able to get the source data using this -
image

And since I'm mapping my County field values like so:

image

Is there a way to set the IDs in the Default Value array to select the corresponding counties in my mapped options?

Further edit:

I was able to accomplish the goal by adding a click action handler to my edit button and setting a value to the select field:

image

1 Like
2

Hello @ahucks!

Impressive setup, I am glad you were able to accomplish the goal :tada: :tada:

I wish there was a more elegant solution to your use case. At the end of they day, all the data in a row that you need to move over to a form component will be much easier to work with when it is stored in one place (the table) and accessed via clicking from .selectedTableRow :sweat_smile:

An alternative would be to use a hash object to store IDs of the row and values of the county.id inside, and then in the on click handler you would need to take the selectedRows ID, find the countyId that matches it with the JS object to then pass to where you want it to go.