ADX Portal: Dynamic Behaviors in Entity Forms

Printer-friendly version

ADX provides a powerful way to render CRM forms directly on websites. One thing that is not being supported by ADX is the application of business rules, especially the ones that trigger real time changes in the UI. One example is the dynamic appearance/disappearance of UI elements based on the value of a form field. The lack of support makes ADX forms relatively static when we use them out of the box. 

In order to apply some dynamic form changes on the front-end, we have to write some JavaScript code. Every form field in the form generated by ADX has an ID that is the same as the entity field the form field points to. Example: On a case form, the text box that is being rendered for the title field will have the ID “title.”

By using this information, we can now write interesting dynamic behaviors to model the CRM form on the portal to act more according to business specifications. 

Example

Let’s assume we have a form that allows the user to submit a service ticket. The user can either select from a list of reasons from a dropdown or enter a custom reason in case it’s not among the provided options. We have specific option in the dropdown that says “Not Listed” and we want to show the custom textbox only if that option was selected by the user and hide it otherwise. Based on the observation we made at the beginning of the post and since the ADX portal comes with the jQuery library out of the box, this scenario is very simple to implement. 

ADX provides us with a simple way to add custom JavaScript to our entity forms and webform steps. For this example, we are going to use a simple entity form. After we created a new entity form and set it up correctly to show the correct CRM form by defining the entity name and the form name (and optionally the tab name), we can scroll down until we see the text box that allows us to add custom JavaScript code:

First, we are going to surround all of our logic inside a function call that is executed once the page loads, which is very simple in jQuery. 

$(function(){

      …

});

We also want to initially hide the entire row that contains textbox for the custom reason (note that all the IDs we’re using directly correspond to the exact field names as defined in CRM):

$("#my_customreason").closest("tr").hide();

We need to define an event handler that fires whenever the value of the dropdown list changes. That event handler will then show or hide the custom reason textbox based on the selected value of the dropdown. We have to keep in mind that ADX is going to use the numeric value of the option, so we need to look it up in the CRM customization section. In my CRM environment, the value of the “Not Listed” option happened to be 80000000 but this value will certainly different in others.

$("#my_reason").change(function(){

  if($(this).val()=='80000000'){

     $("#my_customreason").closest("tr").show();

  } else {

    $("#my_customreason").closest("tr").hide();

  }

});

The entire JavaScript code looks like:

$(function(){

  $("#my_customreason").closest("tr").hide();

  $("#my_reason").change(function(){

    if($(this).val()==’80000000'){

      $("#my_customreason").closest("tr").show();

    } else {

      $("#my_customreason").closest("tr").hide();

    }

  });

});

After saving the record and refreshing the cache of our ADX instance, we can now observe the behavior when we select a reason:

 

 

Comments (0)

Related Blogs

TheReact Native Open Source roadmap was announced in Q4 2018 after they decided to invest more in the React Native open source community.

October is not just about pumpkins, fall foliage, and cooler temps anymore. October 2018 also means the exciting introduction of Microsoft Dynamics 365 for Customer Engagement.

Back in 2016, Microsoft introduced its intentions to refresh its CRM and ERP strategy with Dynamics 365. At the heart of its services was the Common Data Model (CDM).