Disable some items in Interaction/DropdownTags

Back to Forums

Le Quang Trieu

Question

Reactive

OutSystems 11

Traditional Web

Application Type

Traditional Web, Reactive

Hi everyone, I am using Interaction / DropdownTags (Reactive Web) and I would like to disable the whole OptionsList, so users cannot select any item, but can still open the dropdown and see all available items.

For example, if the OptionsList contains [1, 2, 3, 4, 5], the user should:

Be able to open the DropdownTags
See all items in the list
Not be able to select any item (all items appear greyed out / disabled)

Is there any supported or recommended way to achieve this behavior?

09 Feb

Manish Jawla

MVP

Hi @Le Quang Trieu ,

You can use the below javascript OnInitialise:

var dd = OutSystems.OSUI.Patterns.DropdownAPI.GetDropdownById($parameters.DropdownWidgetId);

dd.setProviderConfigs({

disabledOptions: ["valueA", "valueB", "valueC"]

});

https://success.outsystems.com/documentation/11/building_apps/user_interface/patterns/using_mobile_and_reactive_patterns/outsystems_ui_pattern_extensibility/provider_instance_and_javascript/

Hope this helps.

regards,

Manish Jawla

09 Feb

Sudha Narayanan

Hi @Le Quang Trieu ,

Keep the dropdown enabled so it can be opened, and prevent item selection by disabling pointer interaction on the options list using CSS (for example pointer-events: none with reduced opacity). This allows users to view all available items while making them non-selectable.

Thanks.

09 Feb

SANG BUI VAN

Hello Trieu,

1. Adjust the current logic without affecting other parts of the system (not best practice but can adapt in some situations).

=> Using JS, apply attribute "disabled" into the option in dropdown.
* Dropdown option structure should include: Id/Name & IsDisabled attribute to identifying

* After data fetched and UI rendered, do a custom option,
#Dropdown Widget Id: input the dropdown widget it in order to get all option existed in the dropdown data.
# Option Index: Index of current row
# IsDisabled: Flag identifer

Script:

// Parameters from OutSystemsvar dropdownId = $parameters.DropdownWidgetId;// Get dropdown elementvar dropdown = document.getElementById(dropdownId);// Check if dropdown existsif (dropdown) { // Loop through all options for (var i = 0; i < dropdown.options.length; i++) { var option = dropdown.options[i]; if(i == $parameters.OptionIndex) { // Disable option option.disabled = $parameters.IsDisabled; if($parameters.IsDisabled) { // Add CSS class for styling option.classList.add("option-disabled"); } } }}

"N/A" option is disabled. User can see but can not click on it.

2. Same solution, but consider to implement a common widget (dropdown option) in core application, then user can customize if there is any changes in future. It can be reused in all your screen/another blocks.
2.1 Use dropdown widget existed in OS and apply JS.
2.2 Design your own dropdown - HTML/CSS, use list item to display all option.

3. Searching the existed components on Forge.
Note: Disabled - It's just a UI behavior. Ensure validating the option selected in server side.

09 Feb

Mihai Melencu

Champion

Hi @Le Quang Trieu ,

If you want to avoid JavaScript and unnecessary complexity, you can use SetVirtualSelectConfigs from OutSystems UI. Then set the list for disabledOptions property. This can be configured directly in the dropdown’s OnInitialize event.