Hi all,
For a reactive app I need to implement a dropdown where all options are shown but only a limited set of them are selectable.
How can this be achieved?
I found a solution using a JS as done in one of the Forge component: "EnableDisableDropdownOption_gradout"
For each option to be disabled it set:
ddrId[i].setAttribute("disabled", "true");
ddrId[i].setAttribute("style", "color:"+$parameters.fontcolor+";background-color:"+$parameters.backgroundcolor+";");
This has solved my question.
Thank you all.
Hi Daniele,
Assuming you know the values which are selectable and which are not selectable, you can try by throwing the message on the select event of the dropdown widget stating "this value cannot be selected" when user selects the not allowed value.
You can have a list of selectable options (ids) in a local list variable and in this list you can filter the value user selected, If that ID present in this list you can allow for the success flow or you can restrict by nullifying the selected id. If it's not present you can throw the message as mentioned above.
May be this helps you! but I don't know now the best solution. Kindly try if it suits you.
Thanks.
Hi @Daniele Betti,
I strongly recommend searching in the Forge for components that already do what you ask.
I personally have not found any, but you can look anyway.
As a last resort, you can use this component:
https://www.outsystems.com/forge/component-overview/8392/multi-select-checkbox-reactive-web-application
Then you can edit to your needs. For example, add an IsSelectable column to the structure. Then in the Widget Tree, make the checkboxes Enable property accordingly to the IsSelectable value.
Cheers.