Using JavaScript is one of the most convenient ways to perform operations on data in Dynamics 365; you can do this with the help of the Web API.

The Web API sends and receives data in JSON format, which is easy to convert into objects in JavaScript. So, most developers use the Web API for performing CRUD operations with data in Dynamics 365.

We will use an XMLHttpRequest object to perform operations with the Web API. Now, what is XMLHttpRequest? XMLHttpRequest(XHR) is a native object supported by all the browsers that enable AJAX techniques to make web pages dynamic.

Now, as stated earlier, we have three lookups on the form for this scenario: Product, Sub Category, and Category:

Our requirement states that, whenever a user fills the first lookup, that is, Product, the remaining two should be populated as shown in the following output:

To achieve this, we will fetch the details of the selected product using the Web API. The Product form contains the lookups for both Category and Sub Category; our Web API query will be as follows:

Xrm.Page.context.getClientUrl() + "/api/data/v8.2/dyn_customproducts(" + productId + ")?$select=_dyn_category_value,dyn_name,_dyn_subcategory_value";

Xrm.Page.context.getClientUrl() is a function to get the client URL of the current organization. The productId object is the ID of the selected product for which the details are to be fetched. The dyn_customproducts object is the logical name for the custom entity, Product, and the fields to be selected are _dyn_category_value, dyn_name, and _dyn_subcategory_value.

Now, we need to initialize XMLHttpRequest as follows:

var req = new XMLHttpRequest();

After initializing the XMLHttpRequest object, you need to open it before sending or setting any properties for it. The parameters of an open method are HTTP request methods (GET, PUT, POST, DELETE and so on), URL, and a Boolean parameter that indicates whether the operation is to be performed asynchronously.

When you use a web resource, you do not need to specify the username and passwords for authentication, as the user is already authenticated.

As we need to retrieve the entity details, we will use the GET HTTP request method:

req.open("GET",encodeURI(Xrm.Page.context.getClientUrl() + "/api/data/v8.2/dyn_customproducts(" + productId + ")?$select=_dyn_category_value,dyn_name,_dyn_subcategory_value"), true);

The next step is to set the headers and event handlers for the opened request. After XMLHttpRequest is opened, you can set multiple request headers. We will set the following request headers for our operation:

req.setRequestHeader("OData-Version", "4.0");

To avoid ambiguity with OData versions, using this request header is necessary:

req.setRequestHeader("Accept", "application/json");

It is mandatory to use the "Accept" header value of the "application/json" request header for every operation you perform because the response given by the Web API will be in the JSON format:

req.setRequestHeader("Content-Type", "application/json; charset=utf-8");

If your request includes JSON data, you need to use the "Content-Type" request header:

req.setRequestHeader("Prefer", "odata.include-annotations="*"");

If your query returns any formatted values, you need to include "odata.include-annotations".