Dynamics 365 Dependent Lookups with Web API

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. 

In this blog, I will share a particular scenario, the needed D365 form customizations, one JavaScript Web Resource that will hold three functions, and how to attach all of this to an on-change event for a D365 form field.

Scenario

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.

JavaScript Web Resource

In order to achieve this, we will need to create a JavaScript Web Resource.

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.

Click ‘Form Properties’ at the top of the form editor.  Click ‘+Add’ under Form Libraries. Find the new JavaScript Web Resource and click ‘Add’. Now the form has access to our new JS file.

Set Event

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.

Check, Check

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:

Global Variables

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.

FetchXml Conditions

To consume the AddSAFilter function, we need to build the FetchXml conditions, add to a variable, and then call the addPreSearch function.

Clear

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.

Results

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.

The ability to make asynchronous Web API calls to your D365 data is super powerful and handy in so many ways. View the entire Web Resource JavaScript code. Here we learned how to make a Web API call based on a lookup value and set a pre-filter for a separate dependent lookup with the results. If you have questions about Dynamics 365, please connect with us.