HOW TO CHANGE FORM BASED ON LOOKUP FIELD USING JAVASCRIPT?

Most of the customers wanted to have a  different form based on a particular field value and due to this we need to have custom functionality that improves the efficiency of the product.
We will see how to Change the form based on field value.
To achieve this, we need to have a XRM toolbox setup in your computer and connected to your working CRM Environment.


Use Case:
One of our Customer has requirement where the CRM Form should load based on Lookup value.

We have Two different Forms under Contact entity i.e., Contact and Contact 1.

When we create a new Contact from Contact Entity Prospect then Contact Form should load and on change of Preferred method contact field other form Should be visible.

Steps:

  1. Create a web resource of type Java script and add below JavaScript code to Web Resourcefunction formChange(executionContext){debugger;formContext = executionContext.getFormContext();

    var newForm;

    // Get Current Form Name

    var formName = formContext.ui.formSelector.getCurrentItem().getLabel();

    // Get Entity name of the lookup Field

    var callTo = formContext.data.entity.attributes.get(“regardingobjectid”).getValue()[0].entityType;

    // Based on Entity name Form Name

    switch (callTo)

    {

    case “pcms_prospect”:

    newForm = “Prospect Phone Call”;

    break;

    default:

    newForm = “Phone Call”;

    }

    if (formContext.ui.formSelector.getCurrentItem().getLabel() != newForm)

    {

    var items = Xrm.Page.ui.formSelector.items.get();

    for (var i in items)

    {

    var item = items[i];

    var itemId = item.getId();

    var itemLabel = item.getLabel()

    if (itemLabel == newForm)

    {

    //navigate to the form

    item.navigate();

    }

    }

    }

    }

  1. Call function on Load of Both forms Open the entity form by navigating to Settings → Customizations → Customize the System → required entity → Forms → Main Form.
  2. Click Form Properties.Refer below example.Change Form1
  3. From the Form Properties window, click Add.
    Change Form2
  1. In the next Look Up Web Resource Record window, search for newly created webresource, select it and click Add.
    You have now successfully added a new web resource and registered it on the form.

    Change Form3
  2. Now we will add an event handler on the change of Preferred Method of Communication field. This event handler will call the JavaScript function that we just wrote. Select the following options from the Event Handler section.
    Control − Preferred Method of Communication
    Event − OnChangeThen, click the Add button, as shown in the following screenshot.

    Change Form4
  3. In the next window Select Library as new_contacts.js and Function as validatePreferredMethodOfCommunication. Click OK.Change Form5C
  4. Click Save followed by Publish.Change Form6

Leave a Reply