Multi-Select Not populating in Form

i went ahead and added the bracket to show it's an array but still the value isn't populating on the form. it shows the data that should be selected on the right but on the left, it is still showing up as blank.

Hey, this is kind of a workaround, i don't know if there is a better solution for this

put this as your mapped value for the table

{{ item.replace(/[,{}"]/g, "").split("") }}

image

That seemed to work only for the marketplace_coverage (kind of). Issue now is that the same values show each time for the marketplace_coverage for different products despite then having different values for the marketplace_coverage.

image of manual multiselect feature:

table edits:

With the geos_jordan_coverage, I can't get any of the tags to show in the selector despite there being data selected. Everything matches marketplace_coverage but it does not work.

1 Like

Yeah, must be how the data is being stored

How data is being stored with {{ form1.data }} vs {{ multiselect1.value }}
image

I store the multiselect values as an array:
image

How is your data being stored

and how is being displayed on the table component?

You can change your column type to JSON and skip all data formating

Data is being stored like you showed.

If I were to change the column type to JSON, would I do that in the database? At the moment i have several different types of formats that are primarily comma separated strings. Would I need to reformat them in order to allow the JSON to work?


image

This is where I would change the column type correct?

The easier way would be to store the data as a JSON, in this way you don't need to transform the data for the table and multiselect components, and you can keep your modifyProduct query as it is. But if reformat is not an option you will need to play with the data to make it work in all cases.

This is how the data is being stored in a JSON column using form1.data
image

yes

In that case I will need to convert the data prior to changing it to a JSON type because right now I get an error when trying to change it as it is now:
Error: invalid input syntax for type json

So the new format will be with just brackets([])? No more curly braces? ({})

Old format:
(empty)
All
NA; EMEA; APLA; Global
{"APLA","Big 4"}

New Format:
[]
["All"]
["NA", "EMEA", "APLA", "Global"]
["APLA","Big 4"]

yeah

image
image
image

okay. Prior to doing any of that, I created a test column and inserted a new multiselect option into the form.

The column:

The multiselect option:
image

The error message:

modifyProduct failed (0.445s):update "ci_product_inventory" set "product_description" = $1, "product_status" = $2, "product_name" = $3, "product_domain" = $4, "product_owner" = $5, "product_maturity" = $6, "product_type" = $7, "ci_team_squad" = $8, "subfunction_owner" = $9, "data_classification" = $10, "marketplace_coverage" = $11, "refresh_cadence" = $12, "product_family" = $13, "product_end_user_type" = $14, "product_end_user_group" = $15, "end_user_reach_if_available_for_dashboards" = $16, "data_environment" = $17, "schema_name" = $18, "table_name" = $19, "url_launch" = $20, "url_one_pager" = $21, "url_user_guide" = $22, "url_documentation" = $23, "data_captain" = $24, "tbl_simplified" = $25, "key_metrics" = $26, "notes" = $27, "geo_owner" = $28, "product_division" = $29, "filters" = $30, "geos_jordan_coverage" = $31, "personal_data" = $32, "multi_select_testing" = $33 where "id" = $34 returning * - invalid input syntax for type json```

Ah my bad, i forgot multiselect component returns it as {"value"}

yes it does. any alternative options I can try instead?

if you keep the column as TEXT you use this script:

{{ item.replace(/[{}"]/g, "").split(",") }}

image



You will need to format the data as {"value1", "value2", etc...}
Don't need to modify anything else

Or if you want to use column as JSON you will need to:
a) in your query use Key value pairs to use {{ multiselect1.value }}
OR
b) Transform the data from form1.data and modify the multiselect1 value to return an Array

@Tess @joeBumbaca Retool Team, is there a better way to handle this situation?

I tried this with the new column after converting it back to a text and it brings us back to the same issue of where the data is being pulled from the previous product that was worked on. (refer to 10/23 of this thread)

Can you provide screenshots for the JSON option? In the modifyForm query, I already have the key value pair set to {{ modifyProductFormsCombined.value }} which gets it's values from this transformer (modifyProductFormsCombined:

let modify_required = {{modifyProductForm.data}}
let modify_optional = {{modifyProductForm2.data}}

return {...modify_required,...modify_optional} //combines everything 
1 Like

can you clarify this? some screenshot of the column in the table component and the multiselect might be more helpful

can you answer the following questions?

  1. Is your table and form in different tabs?
  2. The multiselect component is showing the same data that was before the update?
    e.g.
    before: "value1", "value2"
    changed to: "value3"
    after: "value1", "value2"
  3. is showing the previous data despite other row is selected, or is showing the previous data but the same row still selected?

Created this loom video in hopes of it helping clarify a bit better.

  1. Our table exists in a tabbed container in the product inventory application. The form lives in a modal that is triggered when a user selects the modify button

  2. Multiselect component shows the same for all products despite there being different data. Seems to not refresh when a new product is selected.

  3. the first one. Is showing previous data despite other row is selected.

1 Like