Set lookup in Microsoft Dynamics CE (CRM) using JavaScript

Today we will be going over the steps how to set the value of a look up using JavaScript in Microsoft Dynamics CE (CRM).

I have created a custom table named as Student. It has the relation with the Contact table. The student table has Email field.

When I create new Student record and write the email of that student, it should automatically fill the Contact lookup by matching the contact with the same email.

How can I do that using JavaScript.

To do that I will create a Web source and attached the JavaScript file in which we can achieve that part.

1. First create a JavaScript file in notepad and save it as .js file.
2. Write a method in JavaScript to attach it to the Email field OnChange event and pass executionContext to this method. This method will fetch the email value entered in the field and pass formContext and email field value to another method named as RetrieveContactRecord, we will be creating this method in the next step.

3. function onChangeEmail(executionContext) {     
   var formContext = executionContext.getFormContext();     
   var emailElement = formContext.getAttribute("cr57c_email");     
   var emailValue = emailElement.getValue();     
   
   RetrieveContactRecord(formContext, emailValue); 
   } 

4. To explain the above code, the email field schema name is used in line 3 you can see the schema name in the table column, see below screenshot from where you can find the schema name of a field.
5. 
6. Write another method named as RetrieveContactRecord which is used to fetch the contact record by the email value if any contact exists with this email it returns that contact or else it returns nothing. This method takes formContext and email value as parameters.

7. function RetrieveContactRecord(formContext, email) {      
   
   var url  = formContext.getUrl().split('com/')[0] +"com"; 
   var oDataUrl = url+"/api/data/v9.2/contacts?$filter=emailaddress1%20eq%20%27"+email+"%27&$select=contactid,yomifullname";         
   
   var retrieveReq = new XMLHttpRequest();         
   retrieveReq.open("GET", oDataUrl, false);         
   retrieveReq.setRequestHeader("Accept", "application/json");         
   retrieveReq.setRequestHeader("Content-Type", "application/json;charset=utf-8");         
   
     retrieveReq.onreadystatechange = function ()         
    {     
   
       if (retrieveReq.readyState == 4 && retrieveReq.status == 200)             
       {                 
          var result = JSON.parse(retrieveReq.responseText);   
   
          if (result.value.length >= 1) 
          {                   
            setContactOnStudent(formContext, result.value[0].contactid,  result.value[0].yomifullname); 
          }             
       }         
     };         
   
      retrieveReq.send(); 
   } 

8. To explain the above code, first we fetch the environment URL, then created the OData API URL to get the contact record by email, if the request is a success we passed the formContext, contactid and contact name to another JavaScript method.
9. In the above method when the contactid and contact name fetched by the API we need to set it to the contact lookup on the student form. To do that we called another function named as setContactOnStudent in the JavaScript file.

10. function setContactOnStudent(formContext, contactid, name) 
    { 
       var lookupData = new Array();      
       var lookupItem = new Object();      
       lookupItem.entityType = "contact";      
       lookupItem.id = "{"+contactid+"}";      
       lookupItem.name = name;          
       lookupData[0] = lookupItem; 
    
       formContext.getAttribute("cr57c_contact").setValue(lookupData); 
    } 

11. To explain the above code, it creates the array and assign contact id as id field and name field as name field and then assign that lookup to the lookup contact field on the student by its schema name.\
12. Once the JavaScript file completed with these three method save it with name UpdateContactOnStudent.js .
13. Go to make.powerapps.com and go to your solution create a Web resource in your solution.
14. Click New –> More –> Web resource
15. 
16. Provide the web resource name and scheme name and select Type as JavaScript(JS) and click on Choose file button to upload JavaScript file which we created.
17. 
18. Select the JavaScript file and click Open and Click Save then.
19. 
20. Once the web resource is created, we need to open the form in classic view in which we need to add the event. To do that go to the table select the form and then click Switch to classic button.
21. 
22. 
23. Double click on Email field it open a popup, go to the Events tab and expand Form libraries then click Add button
24. 
25. Search by entering the name of the web resource as shown in step 19. i.e. cr57c_UpdateContactOnStudent select it and then click Add.
26. 
27. Now in the event handler tab click on Add button.
28. 
29. Write the function name which we created in Step no. 3 as onChangeEmail and check this check box Pass execution context as first parameter to Yes and click OK and then OK again.
30. 
31. Click on Save and then Publish.
32. 
33. Go to you model driven application and create a Student record, when you type the email, if the contact of this email exists it will auto assign that Contact to the lookup.
34. I created a contact named as Omar Iqbal Blogs and its email is inbox@omar-iqbal.com.
35. 
36. Now we will create a Student record and enter email address as inbox@omar-iqbal.com so it will auto fill the Contact lookup based on the email id.
37. 
38. We achieved our goal.

Thank you for reading this article hope you find it useful.

Omar Iqbal

Technical Consultant