Values lost on upgrading from Select to SelectWidget2

When choosing to upgrade a Select component to the new SelectWidget2 individually, I get the following for each one I do.

Screen Shot 2022-01-21 at 9.58.34 AM

It's confusing. Also, the values I had in those cells are gone, so I have to go back to an earlier version to try and recreate. Mysteriously though, the values still do appear properly after the upgrade. I can see them in the values array on the left panel even though there's this weird {{ item }} in the values cell of the component. When I hover over the {{ item }} I get null (see below).

Screen Shot 2022-01-21 at 10.14.11 AM

I can also see the array of labels as well even though there is the {{ self.deprecatedLabels[i] }} value in the Labels field.

Any help to understand what is happening would be greatly appreciated.

Best,

Dan

For anyone else having this issue, you can find your old values and labels in the git-like versioning comparison tool retool provides, which is helpful.

This is getting interesting. I think I upgraded mid-change for these Select component upgrades. Maybe I'm wrong? Just a short while ago, this appeared:

Screen Shot 2022-01-21 at 1.40.06 PM

Is there new documentation to support these new SelectWidget2 components? The current documentation reflects the old components and does not have the Manual/Mapped concept. I'm trying to deduce a bit how the mapped works, but without updated docs it's a bit tricky. It could just be me being daft, but any help here is appreciated.

I really need some help here. I now created a separate blank project using one of your templates (The REST API one) and just added a Select component to it. It looks like this:

Screen Shot 2022-01-24 at 11.30.43 AM

and the component itself is strangely greyed out:

Screen Shot 2022-01-24 at 11.30.26 AM

If I click on the documentation, it leads me to the SelectWidget2 component reference


In a different project, the exact component type (Select) that I upgraded looks like this with different fields and an exciting message about Configuring items:

Screen Shot 2022-01-24 at 11.33.46 AM

It's broken - I'm not exactly sure what I need to put in the Value field for Mappers?

I can't find any documentation on how this new Mapping for selects is supposed to work. This component also leads me to the same SelectWidget2 component reference from above and this is not really helpful in this case.

Any help here is really appreciated. Thanks!

Hey @gilcrest, I know we were able to help sort this out via the Support chat but I thought it would be good to reiterate our response here for visibility :slightly_smiling_face: We did ship a change to how the Select and Multiselect components handle data. This is a change from a very familiar pattern but ultimately we believe it improves the ease of use and the functionality of these components. Since these changes are still very fresh we haven't quite caught up with our docs, unfortunately.

For the updated Select Component using the Mapped field to dynamically enter data, you'll enter an array of items into the data field:

Each item can then be referenced for all its indexes in data with {{ item }} in the Mappers inputs:

This way if you entered an array of objects into the Data array, you could simply key into the values of each object for the values and labels in their respective input fields. Here's an example below that will set up the Select Component with an array of values [1, 2, 3] and an array of matching labels ['one', 'two', 'three'].

You can also use the variable i in these mapper inputs to reference each index of the input Data. For example, the below setup produces the same result as the above:

You can also reference each index of the data array with i and item to set other mapper fields (Caption, Tooltip, Hidden, and Disabled), giving you very granular control over how your data can be displayed and used in the Select Component.

OR if you want to enter data manually, you can select Manual from the Items toggle, enter all of the data into your select component fields manually, and drag and drop list items to reorder as needed:

For your specific case, I think if you change your

  • Data input to be {{jurisdictionDropdownQuery.data.data}}
  • Value input to be {{item.Codes}}
  • Label input to be {{item.Names}}

then your select component should work as expected. This is assuming that jurisdictionDropdownQuery.data.data is an array of objects.

As to why you're seeing these updates to the select component in some places but not others, we're rolling this change out slowly and it has only been set for a percentage of accounts. This shouldn't be any cause for concern, one of the accounts has the feature flag set and the other doesn't (at least not yet) :smile: I hope that helps clear things up for you and anyone else who might have ended up in a similar situation!

1 Like

Thanks again @everett_smith! Appreciate you posting here as well.