We will learn and understand the addOnLookupTagClick client Web API in Dynamics 365. Before we start, make sure to subscribe to CRM Crate so that you stay up to date in the field of Dynamics 365.
What is addOnLookupTagClick client API?
This event occurs when an user clicks the tag in a lookup control. An execution context object is passed to event handlers for this event. We can use the getEventArgs method to retrieve an object that has the getTagValue method.
The getTagValue method returns an object with the following properties:
- id: String. ID of the tag.
- fieldName. String. The originating lookup column that raised the event.
- entityType. String. Table type of the tag.
- name. String. Name of the tag.
formContext.getControl(arg).addOnLookupTagClick(myFunction);
The function to add to the OnLookupTagClick event. The execution context is automatically passed as the first parameter to this function along with eventArgs that contain the tag value.
Why do we need to use the addOnLookupTagClick client API?
In out-of-the-box CRM, whenever we click on the selected lookup value (Entity Record), the CRM forcefully redirects to the clicked entity record. This behavior can sometimes give a poor UI experience to the end users. Therefore, we can programmatically prevent this out-of-the-box feature and built our custom feature to display the selected lookup record without getting redirected using the below given solution.
Utilizing addOnLookupTagClick API with JavaScript –
We will use the JavaScript to implement our custom lookup tag click feature in Dynamics 365 CRM.
Our demo scenario will cover the below given use cases:
- Event handler will get fired whenever an user clicks on the lookup field tag (Selected record).
- Once the event handler is fired, we will collect the selected record’s GUID.
- Later, we will use the SidePanes client API to display the lookup’s selected record within the same form.
JavaScript Snippet:
The below JavaScript snippet has been configured during the “OnLoad” event of an entity form.
//CRM Crate - JavaScript Snippet
function CallMethod (executionContext) {
//Reading Attribute Value From The Form.
var formContext = executionContext.getFormContext();
//Using addOnLookupTagClick Client API.
formContext.getControl("cc_subscriber").addOnLookupTagClick(function(e){
//Preventing OOTB Lookup Tag Click Feature.
e.getEventArgs().preventDefault();
//Retrieving Lookup Record ID.
var lookupRecord = e.getEventArgs().getTagValue().id;
//Using sidePanes client API reference.
Xrm.App.sidePanes.createPane({
title: "CRM Crate Subscribers",
imageSrc: "",
hideHeader: false,
canClose: true,
width: 600
}).then((pane) => {
pane.navigate({
pageType: "entityrecord",
entityName: "cc_subscriber", // Entity Schema Name
entityId: lookupRecord, // Entity record GUID.
})
});
});
}Validate the changes in Dynamics 365 –
Once the above JavaScript code is configured and deployed, navigate to the Dynamics 365 and validate the implementation as shown below.
Thus, we understood the addOnLookupTagClick client Web API in Dynamics 365.
