Show/Hide Multiple Fields Based on Option Selection Using Javascript

(0) Share

Report

Posted on by Dynamics_DR

Hi community

I have a requirement to show/hide multiple fields based on the selection from an Option List. There are 20-30 fields that apply per option selection and some of the fields are 'MultiOption' type so are not included in the Business Rules function.

How can I achieve this using javascript?

Looking forward to any assistance possible. Many thanks in advance!

All responses (14)

Answers (2)

Dynamics_DR 85 on at

Like (0)

Report

RE: Show/Hide Multiple Fields Based on Option Selection Using Javascript

Thank you Akanksha
Suggested answer

Akanksha Ranjan 460 on at

Like (1)

Report

RE: Show/Hide Multiple Fields Based on Option Selection Using Javascript

Hi,

setVisible is not available as a function for the multi-select option set. You can add the multiselect optionset field to another section and hide that section.

Please follow the below-mentioned link for guidance.

www.livingintech.com/.../multi-select-option-sets-missing.

Thanks

Akanksha

Please mark as Verified if found helpful.
Dynamics_DR 85 on at

Like (0)

Report
RE: Show/Hide Multiple Fields Based on Option Selection Using Javascript

Hi again guys

I've been able to use the JScript as intended for most of the fields, however it sometimes doesn't execute at all and also doesn't give any error.

I've noticed that this happens once I add a field that is a MultiSelect Option Set field type. Should I be using something different to the .getControl for these fields?

Please see my code below. I indicate which field is the MultiSelect Option Set.

function OpportunityShowHideProductOffering(executionContext) { const formContext = executionContext.getFormContext(); const productOfferingValue = formContext.getAttribute("new_opportunityproductoffering").getValue(); if (productOfferingValue != null) { if (productOfferingValue === 596610000) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getControl("new_typesofinvestmentssecurities1").setVisible(true); formContext.getControl("new_typesofinvestmentssecuritiesother").setVisible(true); formContext.getControl("new_hardwalletsused").setVisible(true); // This is the MultiSelect Option Set } else if (productOfferingValue === 596610001) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getControl("new_fundstrategyactivities").setVisible(true); formContext.getControl("new_fundstrategyactivitiesother").setVisible(true); formContext.getControl("new_typesofinvestmentssecuritiesmulti2").setVisible(true); formContext.getControl("new_typesofinvestmentssecuritiesother").setVisible(true); } else { } } }

Thank you in advance for your continued assistance.
Dynamics_DR 85 on at

Like (0)

Report

RE: Show/Hide Multiple Fields Based on Option Selection Using Javascript

Thank you Andrew
Verified answer

a33ik 84,323 Most Valuable Professional on at

Like (1)

Report

RE: Show/Hide Multiple Fields Based on Option Selection Using Javascript

Hello,

In the onchange function handler you used not the exact name of the function. It should be OpportunityShowHideProductOffering and on the second screenshot I see "Opportunity Show/Hide Product Offering". You should fix it.
Dynamics_DR 85 on at

Like (0)

Report
RE: Show/Hide Multiple Fields Based on Option Selection Using Javascript

Hi Wahaj

Thank you so much for the feedback.

I have used your script, however still get the "web resource does not exist" error.

Here is a snippet of my Form Properties showing it is added to the Form Libraries and is setup on the Event Handlers.

And here is the script used:

function OpportunityShowHideProductOffering(executionContext) { const formContext = executionContext.getFormContext(); const productOfferingValue = formContext.getControl("new_opportunityproductoffering").getValue(); if (productOfferingValue != null) { if (productOfferingValue === 596610000) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getControl("new_typesofinvestmentssecuritiesmulti").setVisible(true); formContext.getControl("new_typesofinvestmentssecuritiesother").setVisible(true); } else if (productOfferingValue === 596610001) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getControl("new_typesofinvestmentssecuritiesmulti2").setVisible(true); formContext.getControl("new_typesofinvestmentssecuritiesother").setVisible(true); } else if (productOfferingValue === 596610002) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getControl("new_typesofinvestmentssecuritiesmulti3").setVisible(true); formContext.getControl("new_typesofinvestmentssecuritiesother").setVisible(true); } else if (productOfferingValue === 596610003) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(false); formContext.getControl("new_typesofinvestmentssecuritiesmulti3").setVisible(false); formContext.getControl("new_typesofinvestmentssecuritiesother").setVisible(false); } else if (productOfferingValue === 596610004) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(false); formContext.getControl("new_typesofinvestmentssecuritiesmulti3").setVisible(false); formContext.getControl("new_typesofinvestmentssecuritiesother").setVisible(false); } else { } } }
Verified answer

Wahaj Rashid 11,319 on at

Like (0)

Report
RE: Show/Hide Multiple Fields Based on Option Selection Using Javascript

Hi,

To set visibility of the Webresource, you have to use formContext.getControl instead of formContext.getAttribute.

Here is the updated code:

function OpportunityShowHideProductOffering(executionContext) { const formContext = executionContext.getFormContext(); const productOfferingValue = formContext.getAttribute("new_opportunityproductoffering").getValue(); if (productOfferingValue != null) { if (productOfferingValue === 596610000) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesmulti").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesother").setVisible(true); } else if (productOfferingValue === 596610001) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesmulti2").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesother").setVisible(true); } else if (productOfferingValue === 596610002) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesmulti3").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesother").setVisible(true); } else if (productOfferingValue === 596610003) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(false); formContext.getAttribute("new_typesofinvestmentssecuritiesmulti3").setVisible(false); formContext.getAttribute("new_typesofinvestmentssecuritiesother").setVisible(false); } else if (productOfferingValue === 596610004) { formContext.getControl("WebResource_FundPortfolioandTradingInformation").setVisible(false); formContext.getAttribute("new_typesofinvestmentssecuritiesmulti3").setVisible(false); formContext.getAttribute("new_typesofinvestmentssecuritiesother").setVisible(false); } else { } } }

For the error you are getting, please make sure:

The Web resource, which has JavaScript function is added as a Form Library. (Open your form and click on form Properties, and it as a Form library).

On the on-change event, make sure the correct Form Library is selected (which has this function).

If it doesn't work, please share a screenshot of your form properties and o change event configuration.
Dynamics_DR 85 on at

Like (0)

Report
RE: Show/Hide Multiple Fields Based on Option Selection Using Javascript

Hi Wahaj

Thank you so much for your assistance. I have applied your change to INTEGER value of the selected option. I get the error as below.

Here is the script I'm using. Should productOfferingValue be replaced with the "new_fieldName"?

function OpportunityShowHideProductOffering(executionContext) { const formContext = executionContext.getFormContext(); const productOfferingValue = formContext.getAttribute("new_opportunityproductoffering").getValue(); if (productOfferingValue === 596610000) { formContext.getAttribute("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesmulti").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesother").setVisible(true); } else { } }

On a more advanced note:
Once I'm able to solved the basic script above, I'd like to expand it to the actual use case I have which is to manage the show/hide based on 5 options as below.
I know this scrip is wrong, but hoping to give you an idea of what I'm wanting to achieve.

function OpportunityShowHideProductOffering(executionContext) { const formContext = executionContext.getFormContext(); const productOfferingValue = formContext.getAttribute("new_opportunityproductoffering").getValue(); if (productOfferingValue != null) { if (productOfferingValue == 596610000) { formContext.getAttribute("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesmulti").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesother").setVisible(true); } else if (productOfferingValue == 596610001) { formContext.getAttribute("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesmulti2").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesother").setVisible(true); } else if (productOfferingValue == 596610002) { formContext.getAttribute("WebResource_FundPortfolioandTradingInformation").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesmulti3").setVisible(true); formContext.getAttribute("new_typesofinvestmentssecuritiesother").setVisible(true); } else if (productOfferingValue == 596610003) { formContext.getAttribute("WebResource_FundPortfolioandTradingInformation").setVisible(false); formContext.getAttribute("new_typesofinvestmentssecuritiesmulti3").setVisible(false); formContext.getAttribute("new_typesofinvestmentssecuritiesother").setVisible(false); } else if (productOfferingValue == 596610004) { formContext.getAttribute("WebResource_FundPortfolioandTradingInformation").setVisible(false); formContext.getAttribute("new_typesofinvestmentssecuritiesmulti3").setVisible(false); formContext.getAttribute("new_typesofinvestmentssecuritiesother").setVisible(false); } else { } } }

Again thank you so much for helping me with this.
Suggested answer

Wahaj Rashid 11,319 on at

Like (0)

Report
RE: Show/Hide Multiple Fields Based on Option Selection Using Javascript

Hi,

Please note, following line returns the INTEGER value of the selected option:

const productOfferingValue = formContext.getAttribute("new_opportunityproductoffering").getValue();

You can get the integer value from the OptionSet field properties, for the label Hedge Fund Administration, there must be an integer value.

We need to compare in the if condition for this integer value, your function should look like this:

function HideFields(executionContext) { const formContext = executionContext.getFormContext(); const productOfferingValue = formContext.getAttribute("new_opportunityproductoffering").getValue(); if (productOfferingValue === 1000001) // replace 1000001 with the value of Hedge Fund Administration option { formContext.getAttribute("new_someotherfield1").setVisible(false); formContext.getAttribute("new_someotherfield2").setVisible(false); formContext.getAttribute("new_someotherfield3").setVisible(false); } else { formContext.getAttribute("new_someotherfield1").setVisible(true); formContext.getAttribute("new_someotherfield2").setVisible(true); formContext.getAttribute("new_someotherfield3").setVisible(true); } }

To get the integer value for the Hedge Fund Administration option:

Open the solution and expand Entities -> Opportunity -> Fields.

Double click on the Opportunity Product Offering field to open the properties.

Under the Type section, if the Use Existing Option Set is "Yes" click on Edit to see the options, otherwise you will see the options on the same screen.

Get the Value of Hedge Fund Administration option:

Please note, in the if condition, we will compare the value without commas.
Dynamics_DR 85 on at

Like (0)

Report

RE: Show/Hide Multiple Fields Based on Option Selection Using Javascript

Thank you Akanksha