There are times when you need to add dynamic functionality to your Dynamics 365 (D365) forms that requires an additional request for D365 data while on the current record. In addition, you might need to pre-filter a D365 lookup based on the results of that request. To do that, you can use a web lookup with API. Here’s how.
We have an Opportunity form that has two lookup fields that have a parent-child relationship. The OnChange event of the child entity lookup needs to pre-filter the available records for the parent entity lookup so users will choose the record from the correct list.
The child entity actually has two parents of the same type. See below:
Experience Type is a child entity to Service Area that is represented twice as Service Area and Service Area 2.
Partial list of Experience Types with their Service Areas:
As you can see above, not every Experience Type has two Service Areas.
Here is an example of the Opportunity form:
Opportunity form contains Experience Type (child) and Service Area (parent).
Specifically, our objective is to ensure when a user selects “Acquisition, Affiliation, and JV Planning” from the Experience Type lookup on the Opportunity form, we need only “Mergers and Acquisitions” and “Academic Health Systems” to appear on the Service Area lookup rather than the entire list of Service Areas.
Create Web Resource
If you haven’t already, create a custom un-managed Solution and Save and keep it open.
Click ‘Web Resources’ in the left navigation and then click ‘New’.
Provide a meaningful, easy to find in a search, name for your new Web Resource. Also, provide a clear description of the purpose of the resource. Select Type and Language and click ‘Save’.
At this point there is no code. When working with Web Resources for a client, I typically create a web project in Visual Studio that provides me a great development environment and even a greater visual representation of the JS code. The D365 Web Resource Text Editor is not pleasant. You can easily use NotePad++, NotePad, or any other text editor – anything that will give you more space and indenting capabilities.
We will leave this new Web Resource open for now and check out the form.
Add Web Resource to Form
Navigate to the form editor for the desired form.
Ensure all fields needed for the JS Web Resource are present on the form.
Back on the form editor, double click the field in which you desire to set the OnChange event; here we are selecting Experience Type. Under Event Handlers, click ‘+Add’. Add event with JS function name and passing execution context.
1 – Name of Web Resource
2 – Name of JS function
3 – Passing D365 execution context to JS code
OnChange event is now attached to the Experience Type field.
I like to code in small chunks, test, correct, and then add some more. At the very beginning of the JS development, I will add the absolute minimum code that will not error and test to ensure everything is working correctly.
Go to your Visual Studio web project or whatever text editor you choose and add the below JS code and save. This is a typical first-run template.
Go to the Web Resource and upload the file, click Save, and then click Publish Customization.
Navigate to the desired record, open up your browser Developer Tools, and change the value in the field that is attached to the OnChange event.
In the Developer Tools, we will see our console messages:
For this particular scenario, we need four global variables to ensure their values will remain during the user transaction as they can trigger the Experience Type OnChange event several times.
Add the global variables at the very top of the JS file.
Control and Field
We only need access to two fields on the Opportunity form, however because we are utilizing addPreSearch and addCustomFilter, we will need the Service Area control. We only need the Experience Type field to retrieve the selected value.
To ensure you don’t receive JS errors and retrieve the correct value for the lookup, we will need the following JS logic for the Experience Type lookup field.
Now we will retrieve the actual GUID of the selected Experience Type and remove the surround braces on line 31.
Web API AJAX Call
In order to find the parent Service Areas for the select Experience Type, we need to make a Web API call to retrieve the needed D365 data. Below is the complete code for this call:
Because we are retrieving values for a lookup field, we need to select a variation of the actual field. In this case, we need to select _ecg_servicearea_value.
Handle Web API Call
Now we need to consume that call. Here we are assigning the Web API call results to two JS variables: sa and sa2.
PreSearch and CustomFilter
Now we are ready to add a JS function to our file that will take the Web API results, add them to FetchXml conditions, and process.
To consume the AddSAFilter function, we need to build the FetchXml conditions, add to a variable, and then call the addPreSearch function.
Because the user can make several different changes to the Experience Type field, including clearing the value completely, we need to add a few clearing statements to reset the filter for the Service Area lookup.
Toward the top of the function SyncExperienceTypeAndServiceArea function.
Right before we retrieve the latest Service Areas.
The two remaining else conditions for the Experience Type selection.
Save your JS file, upload to the Web Resource, Save, and Publish Customizations.
Refresh the Opportunity form and see the results.
Acquisition, Affiliation, and JV Planning has two results.
Bundled Payments has one result.
Experience Type cleared has all results.
Dynamics 365 CE (CRM) How-To eGuide
41 pages of step-by-step instructions for 6 different key tasks in Dynamics 365 Customer Engagement (CRM). Includes interactions with PowerApps and Flow!Get the eGuide