web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Customer experience | Sales, Customer Insights,... / Show/Hide Multiple Fie...
Customer experience | Sales, Customer Insights,...
Answered

Show/Hide Multiple Fields Based on Option Selection Using Javascript

(0) ShareShare
ReportReport
Posted on by Dynamics_DR 85

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!

I have the same question (0)
  • Suggested answer
    Wahaj Rashid Profile Picture
    Wahaj Rashid 11,321 on at

    Hi,

    Thank you for your query.

    You can register an on-change JavaScript event for your optionset.

    Here are high-level steps:

    • Create or use an existing solution.
    • Add a Web resource of type Script (If you do not have an existing web resource/form library).
    • Add a Javascript function that accepts executionContext as a parameter.
    • Get your option set value, based on the value hide/show the fields.
    • Add this web resource as a form library.
    • Register an onchange event on the field properties of your Dropdown.

    Here is a sample JavaScript function:

    function HideFields(executionContext)
{
    const formContext = executionContext.getFormContext();

    // Get Existing Product Lookup Value
    const myOptionSetVal = formContext.getAttribute("new_myoptionset").getValue();

    if (myOptionSetVal === 1000001 || myOptionSetVal || myOptionSetVal === 1000002) // Hide fields
    {
        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);
    }
}

    This is how register an event handler:

    Configure event handlers for Main forms in Dynamics 365 Customer Engagement (on-premises) | Microsoft Docs

    Basically:

    • Open your form and click on properties.
    • Add the Form library (the web resource having JS function).
    • Double click on the optionset field, and add the on change event (select library and enter function name).
    • Do not forget to pass Execution Context as the first parameter.

    Here is another post for your reference:

    Adding an OnChange Script Programmatically in Dynamics 365 Power Apps - Carl de Souza

  • Dynamics_DR Profile Picture
    Dynamics_DR 85 on at

    Thank you so much Wahaj.

  • Dynamics_DR Profile Picture
    Dynamics_DR 85 on at

    Hi Wahaj

    I'm a little unsure as to the content of the IF statement. Do I only insert the value that will be selected from the OptionSet as I have it below or do I need the additional items you've given?

    OptionSet = new_opportunityproductoffering

    OptionSetValue = Hedge Fund Administration

    ************************************

    <--My Scrip-->

    function HideFields(executionContext)

    {

       const formContext = executionContext.getFormContext();

       const "Hedge Fund Administration" = formContext.getAttribute("new_opportunityproductoffering").getValue();

       if ("Hedge Fund Administration")

       {

           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);

       }

    }

  • Suggested answer
    Akanksha Ranjan Profile Picture
    Akanksha Ranjan 460 on at

    Hi

    First of all, there should be no space between the defined variable name

    pastedimage1622619282555v1.png

    The second part is you need to compare the value of the optionset.

    if(Hedge Fund Administration == 123456){

    // your hide show logic

    }

    You can also go through this video.

    https://www.languagetechfunda.com/crm/show-hide-section-based-option-set-field-using-javascript-microsoft-dynamic-crm

    Thanks

    Akanksha

    Please mark the answer as Verified if found helpful.

  • Dynamics_DR Profile Picture
    Dynamics_DR 85 on at

    Thank you Akanksha

  • Suggested answer
    Wahaj Rashid Profile Picture
    Wahaj Rashid 11,321 on at

    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:

    pastedimage1622622568077v2.png

    Please note, in the if condition, we will compare the value without commas.

  • Dynamics_DR Profile Picture
    Dynamics_DR 85 on at

    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.

    pastedimage1622632251753v1.png

    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.

  • Verified answer
    Wahaj Rashid Profile Picture
    Wahaj Rashid 11,321 on at

    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 Profile Picture
    Dynamics_DR 85 on at

    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.

    pastedimage1622652952299v1.png

    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
    a33ik Profile Picture
    a33ik 84,331 Most Valuable Professional on at

    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.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Customer experience | Sales, Customer Insights, CRM

#1
Tom_Gioielli Profile Picture

Tom_Gioielli 96 Super User 2025 Season 2

#2
Jimmy Passeti Profile Picture

Jimmy Passeti 50 Most Valuable Professional

#3
Gerardo Rentería García Profile Picture

Gerardo Rentería Ga... 49 Most Valuable Professional

Last 30 days Overall leaderboard

Featured topics

Hide selecting Contact for potential customer when creating quote

Product updates

Dynamics 365 release plans