{Dynamics 365 Portal Code Tip} Dynamically Show/Hide field based on Lookup field on Entity form

Achieving Business rules kind of functionality in portal forms is a bit trickier as Business rules do not directly reflect on the Dynamics 365 Portals.

One of such requirements is to show/hide a field based on other field value dynamically on Dynamics 365 Portals.

In the below scenario, Requirement is to show Other Reason text field if user selects lookup value of “Other” on the portal form for a custom lookup field Called “Reason” on Case entity portal form.

Navigate to Entity Form called “Customer Service – Create Case” and scroll down to custom JavaScript area:

Paste the following script:

$(document).ready(function () {
  if (typeof (Page_Validators) == ‘undefined’) return;
  var newValidator = document.createElement(‘span’);
  newValidator.style.display = “none”;
  newValidator.id = “contactFieldValidator”;
  newValidator.controltovalidate = “primarycontactid”;
  newValidator.errormessage = “<a href=\’#primarycontactid_label\’ onclick=\’javascript:scrollToAndFocus(\”primarycontactid_label\”,\”primarycontactid\”); return false;\’> Contact is a required field. </a>”;
  newValidator.initialvalue = “”;
  newValidator.evaluationfunction = function () {
    var customerType = $(“#customerid_entityname”).val();
    if (customerType != “account”) return true;
    // only require contact if customer type is account.
    var value = $(“#primarycontactid”).val();
    if (value == null || value == “”) {
      return false;
    } else {
      return true;
    }
  };

  Page_Validators.push(newValidator);

  updateEntitlementRequired();
  $(“#customerid”).change(onCustomerChange);
  $(“#customerid”).change();
  $(“#new_reason”).change(onReasonChange);
  $(“#new_reason”).change();
});

  function onReasonChange()
  {
    //alert(“On Reason Change called”);
    if ($(‘#new_reason_name’).val() == “Other”)
{
$(‘#new_otherreason’).show();
$(‘#new_otherreason_label’).show();
}
else
{
$(‘#new_otherreason’).hide();
$(‘#new_otherreason_label’).hide();
}
  }
  function onCustomerChange() {
    var val = $(“#customerid”).val();
    var entitlement = $(“#entitlementid”).parent();
    var product = $(“#productid”).parent();
    if (val) {
      disableEnable(entitlement, false);
      disableEnable(product, false);
    }
    else {
      disableEnable(entitlement, true);
      disableEnable(product, true);
    }
    updateContactRequired();
   
  }

  function disableEnable($param, disabled) {
    $param.find(‘input’).each(function () {
      $(this).attr(“disabled”, disabled);
    });

    $param.find(‘button’).each(function () {
      $(this).attr(“disabled”, disabled);
    });
  }

  function updateContactRequired() {
    var customerTypeVal = $(“#customerid_entityname”).val();
    if (customerTypeVal && customerTypeVal == “account”) {
      $(“#primarycontactid_label”).parent().addClass(“required”);
    }
    else {
      $(“#primarycontactid_label”).parent().removeClass(“required”);
    }
  }
 
  function showHideOtherReason()
  {
  $(‘#new_otherreason’).hide();
$(‘#new_otherreason_label’).hide()
  }
  function updateEntitlementRequired() {
var entitlementField = $(“#entitlementid”);
if (entitlementField && entitlementField.closest(‘td’).get(0).style.display == “none”) {
  //remove required class and validator if entitlement isn’t showing
  $(“#entitlementid_label”).parent().removeClass(“required”);
  if (typeof (Page_Validators) == ‘undefined’) return;
  if ($(“#RequiredFieldValidatorentitlementid”) != ‘undefined’ && entitlementField.closest(‘td’).get(0).style.display == “none”) {
   $(“#entitlementid_label”).parent().removeClass(“required”);
   Array.remove(Page_Validators, document.getElementById(‘RequiredFieldValidatorentitlementid’));
  }
}
}

The important functions to understand are below:

Function to show/hide text field based on Lookup field in portal:

  function onReasonChange()
  {
    //alert(“On Reason Change called”);
    if ($(‘#new_reason_name’).val() == “Other”)
{
$(‘#new_otherreason’).show();
$(‘#new_otherreason_label’).show();
}
else
{
$(‘#new_otherreason’).hide();
$(‘#new_otherreason_label’).hide();
}
  }

This function needs to be attached on Document ready main function in the portal:

$(“#new_reason”).change(onReasonChange);
$(“#new_reason”).change();

Output:

The output is as below:

When Reason is not selected:

When Reason is selected as Other:

Happy CRMing!

Any problem in CRM – end user,Microsoft  partner or an individual?

Problem Area – Technical, Functional, Training, Development or consulting?

I am here to help, get in touch here: Click here

ABOUT THE AUTHOR:

Twitter: https://twitter.com/msdynamicsblog
LinkedIn: https://www.linkedin.com/in/deepesh-somani-00296932

Google Play Store:

https://play.google.com/store/apps/details?id=com.dynamicsofdynamicscrm.msdynamicsblog&hl=en