Disabled Dropdown Options?
Hello everyone,
I'm hoping someone can help me out with this. I am working with a dropdown control where some options are visible but are "disabled" and not selectable (screenshot below). After searching in the control, flow action, section, layouts, etc. I still cannot find out how this is functioning.
I would like to do the same functionality of disabled dropdown options somewhere else in the application but it seems to me that this is not an OOTB functionality.
Here are some screenshots below of the General, Presentation, and Actions tabs of the dropdown control. Any insight into how this is being done would be very helpful.
Hello everyone,
I'm hoping someone can help me out with this. I am working with a dropdown control where some options are visible but are "disabled" and not selectable (screenshot below). After searching in the control, flow action, section, layouts, etc. I still cannot find out how this is functioning.
I would like to do the same functionality of disabled dropdown options somewhere else in the application but it seems to me that this is not an OOTB functionality.
Here are some screenshots below of the General, Presentation, and Actions tabs of the dropdown control. Any insight into how this is being done would be very helpful.
Thank you - Gabriel
Accepted Solution
Infosys McCamish Systems LLC
US
Here is the solution I have come up with:
This is not an OOTB functionality and must be done by including JavaScript code in the HTML tab of a section. I found a section fragment (blank section) on one of our main sections and on the HTML tab of that section, was some JS code that conditionally set the dropdown options to be "disabled".
Here's the code I included on the HTML tab:
<script>
if(document.getElementById('CeCDAcctSeq'))
{
var dropdownOptions = document.getElementById('CeCDAcctSeq').options;
var listItem = "";
for (var i = 0; i < dropdownOptions.length; i++)
{
listItem = dropdownOptions[i].text;
if(listItem.indexOf('[ER]') !== -1 || listItem.indexOf('[EE]') !== -1)
dropdownOptions[i].disabled = true;
}
for (var i = 0; i < dropdownOptions.length; i++)
if(dropdownOptions[i].disabled === false)
document.getElementById("CeCDAcctSeq").selectedIndex = i;
}
</script>
Pegasystems Inc.
IN
Hi Gabriel,
You can refer the following post to disable the dropdown value:
https://pdn.pega.com/community/pega-product-support/question/dropdown-disabled-mode-and-default-value-select
Regards,
Evita.
Infosys McCamish Systems LLC
US
Evita,
I saw that post before posting this. Unfortunately, my knowledge is limited in how I could include that HTML on load of the screen. I have checked on the harness, section, flow action, and even the dropdown control itself. None of these items seem to have that code on them.
Upon checking the developer tools in my browser I was able to see that the disabled options have the "disabled" property on them but how is this implemented?
Thanks!
Accepted Solution
Infosys McCamish Systems LLC
US
Here is the solution I have come up with:
This is not an OOTB functionality and must be done by including JavaScript code in the HTML tab of a section. I found a section fragment (blank section) on one of our main sections and on the HTML tab of that section, was some JS code that conditionally set the dropdown options to be "disabled".
Here's the code I included on the HTML tab:
<script>
if(document.getElementById('CeCDAcctSeq'))
{
var dropdownOptions = document.getElementById('CeCDAcctSeq').options;
var listItem = "";
for (var i = 0; i < dropdownOptions.length; i++)
{
listItem = dropdownOptions[i].text;
if(listItem.indexOf('[ER]') !== -1 || listItem.indexOf('[EE]') !== -1)
dropdownOptions[i].disabled = true;
}
for (var i = 0; i < dropdownOptions.length; i++)
if(dropdownOptions[i].disabled === false)
document.getElementById("CeCDAcctSeq").selectedIndex = i;
}
</script>