Multiselect default value not behaving as expected

Appsmith Support
1

I recently started using Appsmith and love it! First post, so apologies if this is landing in the wrong category and please correct me if so.

I have an app that has multiple tables, each with a single column that is a concatenated, comma-delimited list of ID’s. These ID’s are a subset of values in an associated multiselect widget. When a row is selected from the table, I want the multiselect to dynamically select the values from this column and display their associated labels in the dropdown. A user can then remove them one by one and/or add new selections from the drop down.

A few months ago I successfully did this.

Recently, I started to add new multiselect widgets with the intent of configuring them the same way for other tables, but they are behaving differently. The new multiselect takes all of the values from the column and parses them as a single concatenated value and displays this value in the dropdown as if it were the label.

I have found that if I change syntax slightly, I can get the individual ID’s selected as individual values, but it still displays the values themselves instead of the labels.

If I copy/paste the old widget and repoint it to the right data, I get the desired behavior, but creating a new widget from the widget menu and manually configuring it the same way doesn’t produce the same results. I’ve noticed some other differences such as (Old multiselect has no “Filterable” option but new one does) and (Old multiselect has Label Text positioned to the left, new one has it positioned above the dropdown) This has led me to wonder if the old widget I created was maybe some other type of widget than a multiselect, but from what I can tell it is not (although it is not clear how to definitively determine this).

Screen Shot 2022-03-16 at 5.51.04 PM
Screen Shot 2022-03-16 at 5.51.04 PM866×438 32.9 KB

Here is my config:

Options:

{{ lookup_people_dropdown.data.map((row) => { 
      return { label: row.name, value: row.id } 
   }) 
}}

Default Value:

[{{TABLE_notes_for_cons.selectedRow.people_ids}}]

Here is the evaluated value for the old widget:

[
  22000007,
  22000008
]

and for the new widget:

[
  "22000007, 22000008"
]

Seems like the new widget interprets the column as a string, where as the old one treats it as CSV. Something obvious I am missing?

2

Hey sorry about the confusion. There was an update in the multiselect field for the way it took default values. Can you try the below code in Default Value and let me know if it helps?

{{lookup_people_dropdown.data.filter(p => TABLE_notes_for_cons.selectedRow.people_ids.includes(p.id)).map(p => ({label: p.name, value: p.id}))}}
3

That did the trick, thank you @dancia !

4

Hi @dancia, I am facing a similar issue. I followed the reply from your end but I am still not able to see the default values in my multi-select. Can you please help me? This is my first query on Appsmith forum. Not sure if I had to raise a new query or a ticket.

Default value field : {{GetCitiesLocation.data.filter(value => appsmith.store.offerEntity.targetInfo.cities.includes(value.id)).map(c => ({label: c.name, value: c.id}))}}

Evaluated value :
[
{
“label”: “Mumbai”,
“value”: 1
},
{
“label”: “Delhi”,
“value”: 2
}
]

Please guide me here.

5

Hi @amithkashyap, welcome to the community forum :slight_smile:

Could you share the evaluated value of the multiselect Options property. Also , could you explain how the Appsmith store variable offerEntity is being used here?

6

Hi @dancia, thank you. Evaluated value has been shared above. Sharing it again,
[
{
“label”: “Mumbai”,
“value”: 1
},
{
“label”: “Delhi”,
“value”: 2
}
]

“offerEntity” is a JSON object coming from an API response which has an array called “cities” within a key named “targetInfo”. I am trying to find the intersection of the all the cities and the cities from the API response to populate as the Default value for the multi-select.

7

Could you also share a screenshot of the data from offerEntity JSON? It is possible that the field name might be incorrect.

8

I can share but the possibility of key being incorrect is not possible. If it was incorrect then the evaluated value would have thrown an error. In this case the evaluated value is correct. Backend is returning two ids and we are able to filter those ids from the bigger list of ids. Evaluated value is correct but the UI is not getting populated.

JSON response from backend call :
{
“id”: “62fcb580c91d506ee1792960”,
“name”: “Updating Offer Entity via Appsmith”,
“couponCode”: “APPSMITHDEMO”,
“vertical”: “medicine”,
“tags”: [
“cart_page”,
“home_page”,
“product_specific_page”
],
“priority”: 10,
“status”: true,
“offerType”: “COUPON”,
“displayInfo”: {
“title”: “Updating Offer Entity via Appsmith 1”,
“description”: “Updating Offer Entity via Appsmith”,
“hpImage”: “some_url”,
“codeImage”: “some_url”,
“offersPageImage”: “some_url”,
“autoApply”: true,
“autoDisplay”: false
},
“navigationInfo”: {
“androidURL”: “some_url_android”,
“iosURL”: “some_url_ios”,
“mwebURL”: “some_url_mweb”,
“dwebURL”: “some_url_dweb”
},
“targetInfo”: {
“includeSegments”: [
“6094”,
“6095”
],
“excludeSegments”: [
“6074”
],
“platforms”: [
“ios”,
“android”,
“web”,
“mweb”,
“dweb”
],
“cities”: [
“2”,
“1”
]
},
“termsAndConditions”: null,
“createdAt”: “2022-09-11T15:34:09.263+00:00”,
“updatedAt”: “2022-09-11T15:34:09.263+00:00”,
“createdBy”: null,
“updatedBy”: “amith.kashyap@pharmeasy.in”
}

9

I think the issue here is that in the Multiselect Options, the ids don’t have quotes around them, however in the JSON the cities are enclosed in double quotes.

10

In your case, the below should work

{{GetCitiesLocation.data.filter(item => JSON.stringify(appsmith.store.offerEntity.targetInfo.cities).replace (/"/g,'').includes(item.value))}}

11

@dancia Thank you so much for the timely response. Replacing the double quotes helped but I had to return just the id towards the end. Finally my default value looked like :

{{GetCitiesLocation.data.filter(item => JSON.stringify(appsmith.store.offerEntity.targetInfo.cities).replace (/"/g,‘’).includes(item.id)).map(p => p.id)}}

1 Like