Add Dynamics 365 Lookup functionality in HTML Web resource

Introduction

In this blog we will look at how we can add the lookup functionality of dynamics 365 Customer Engagement in our HTML web resource.

Implementation

Step 1 : We have already added a web resource in our app, you can refer to my blog on  “ADD HTML page in Dynamics 365 Customer Engagement Apps”. Below is the screenshot of how it looks like

Step 2: Here we have a project field, and every time the Project button is clicked the select Project form opens up as shown in the below image. Please note that the Project entity we are using is a custom entity and not the Out of Box project entity

Step 3 : When the Project is selected from this and the Add option is clicked, the name of the project will be shown in the “Select Project” field on the HTML web resource.

Step 4: The HTML code for this is here. 

In the HTML code there is a reference to an external JavaScript file which handles the logic to open the lookup tab and set the name of selected project as seen previously.
You can find the JavaScript code here

Note:

1. In the referenced HTML code, for the Layout button we have added an “on Click” event which is not present in the referenced JavaScript code.  So while using the referenced code, please make sure you remove that reference from the HTML or add another function that you would like to call.

Below shown in the code snippet that needs to be modified

 <input class="form-control" id="selectedProjectRelatedLayout" type="text" placeholder="Select Layout" readonly="">

2.  In HTML file we have also added the reference to a JavaScript file which we have added as a JavaScript web resource in Dynamics 365 CE.  You will need to modify this reference  based on the web resource structure in Dynamics 365 CE.

<!-- Below mentioned are the CRM Reference files based on the hierarchy of Webresources created, the bottom two references will change according to your folder structure for Webresources in CRM-->
<script src="../../../../ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script src="../BusinessLayer/SafetyInspectionCustomization.js" type="text/javascript"></script>

Hope this helped!