35
Views
12
Comments
[OutSystems UI] DropdownServerSide single select is not unselecting the previous value
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Hi Community,

I am using DropdownServerSide to display my list of options for user to choose from. I have also downloaded the Outsystems Style Guide Preview Assets to reference the client action.

The difference between the style guide and my app are as follows,

  1. I didn't bind them to a local list variable. As my actual data, has more than 10k records, and i have realise that if i didn't bind them to local variable, it improve the performance
  2. To further improve performance, i only start displaying results after user had key in a min of 3 letters
  3. I had used Employee.EmployeeNumber as my main value, as this is what my company is practicing.


The issue i have, is that when i select another value in the dropdown, the information passed to SelectedValue variable is correct, but the previous value still remains as IsSelected in the dropdown.

In the style guide preview, the previous value will be de-select.

https://outsystemsui.outsystems.com/StyleGuidePreview/PatternDetail?MenuCategoryId=8&MenuSubCategorId=90

What did i miss out, or did wrongly?

Thanks

DropdownServerSide.oml
2020-08-17 10-51-19
Fabrício Bonifácio
Champion

Hello @Jun Mun Chan 

The checkboxes in the list made me think it was a multiselect dropdown, but actually you can select only one, right? If yes, make sure it is clear to the user.

In image below, you have only the set of IsSelected attribute to the selected one, so it seems like you need to set to False the other elements in the list that has the IsSelected attribute as True, except the one you just selected. 



2022-05-01 03-47-53
Jun Mun Chan

Hi,

In this link, the logic is actually working correctly. They also only had one assigned node. So this is what is confusing me

2020-08-17 10-51-19
Fabrício Bonifácio
Champion

As it is not multiselect, what about just remove the checkboxes? 

You already have the selected value in the local variable and could work from there.

2022-05-01 03-47-53
Jun Mun Chan

Hi Fabricio,

Thank you for the suggestion. Cause I was trying to replicate the bare minimum of the actual codes. Cause in the actual app, i have a radio button for the user to select whether it is a individual selection, or a team selection. 

My team selection is working fine, so i didn't show them here.

But taking inspiration from your previous comment, i had added extra logic to uncheck the checkbox, remove the value etc. It is working fine now



Thou now i'm facing another issue LOL I am able to check and disable the dropdown once the max number is reached. The issue is, the options Balloon remains open, so user is still able to select more values, even thou the dropdown has been disabled.



Am trying to work with these following actions, but the results are not what i want


2020-08-17 10-51-19
Fabrício Bonifácio
Champion

Could you provide another OML so I can take a look?

2022-05-01 03-47-53
Jun Mun Chan

Here it is.....

  1. GetCustomers is a place holder, cause eventually, my app will allows for selecting from both entities
  2. Had added a few more logics, so that i can duplicate as close to possible to my actual app


Thanks

DropdownServerSide.oml
2020-08-17 10-51-19
Fabrício Bonifácio
Champion

Is that what you trying to achieve?

You may need some logic to disable when the limit is reached.

https://fabricio-bonifacio.outsystemscloud.com/DropdownServerSide/

2020-08-17 10-51-19
Fabrício Bonifácio
Champion

If yes, I just named the employee dropdown and added DropdownServerSideClose, indicating the widgetId,  to the end of one of the IF branches. 

About the text in image below, it searching for the position of the selected element in the list and changing the IsSelected attribute right on the list. it is something like this: GetEmployees.List[1].IsSelected -> I'm reaching the IsSelected attribute of the element that is in position 1 of the list.

Just need to be sure there is an element in that position, otherwise it will raise an exception.

2022-05-01 03-47-53
Jun Mun Chan

Hi,

Yes, it's something which i wanted. But think the issue with my logic and the link you sent, is that once max team size is reached, the dropdown is disable - which is fine

But the trash icon doesn't work. It can worked, when the max team size is not reached yet

For individual, think the link you sent, once a value has been selected, the trash icon can't worked too

2022-05-01 03-47-53
Jun Mun Chan

I will try the DropdownServerSideClose again, i remember it was giving me some issues, that's why i didn't use it.

Thou at the back of my mind, if i still couldn't resolve this properly, instead of using the properties 'AllowMultipleSelection', 'IsDisabled', i will just do the checks in my client action

2022-05-01 03-47-53
Jun Mun Chan

It's embarrassing to said this, it's actually my logic issue which is causing the problem i'm asking for assistance.

Because when i'm checking whether max team size is met, i would close the dropdown if true. 

Have added the following to my actual app,


And the best place to put 'DropdownServerSideClose, is actually this location, at least in my actual app

2020-08-17 10-51-19
Fabrício Bonifácio
Champion

Try to separate the logic. You have the same client action in select item and delete item. There is an example in OML attached.

DropdownServerSide.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.