Hi,
I have a requirement where I need to remove a value from a dropdown. While this is straightforward for new records, the challenge is handling existing (old) records.
For old records, the value should remain visible in the dropdown if it was previously selected. However, if the user edits the record, they should not be able to re-select that value. In other words, the value should appear but be disabled for selection.
Is there a way to handle this scenario? Also, if you have any alternative or better suggestions for this use case, please let me know.
Example:
Suppose the dropdown has four values: Monthly, Quarterly, Half Yearly, and NA. I want to remove NA from the dropdown based on certain conditions. For new records, this is fine since NA won’t appear at all. However, for existing records where NA was already selected, I want it to remain visible but disabled, so the user cannot select it again while editing.
Thanks
Shivangi
1. Best option: Use Forge component
- DisableItemDropdown (O11): Shows disabled items (grayed out, non-selectable) while keeping them visible.
https://www.outsystems.com/forge/component-overview/16039/disableitemdropdown-o11
- Or Enable Disable Dropdown Option (grad out/in): Handles enable/disable per item.
https://www.outsystems.com/forge/component-overview/13122/enable-disable-dropdown-optiongrad-out-in-o11
2. No component solution:
https://itnext.io/outsystems-reactive-mutually-exclusive-dropdowns-fa25d7157ada
Related threads for similar cases:
- https://www.outsystems.com/forums/discussion/102637/how-to-disable-some-items-in-drop-down
- https://www.outsystems.com/forums/discussion/98978/disable-certain-values-in-dropdown-search
Hi @Shivangi Thakur ,
If you are editing an existing record, then as per the requirement, the value that was previously selected in the dropdown should be in a non-editable (disabled) state. Is this the correct understanding of your requirement?
Hello @Shivangi Thakur ,On my part, there are a few methods that I hope might be helpful to you.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 identiferScript:
// 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"); } } }}
-The "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.