Execute Web API request using Angular JS in Dynamics CRM

Introduction

In our earlier blogs of  Web API introduced in Dynamics CRM 2016, we have explained different requests and functions of Web API to querying and performing operations in Dynamics CRM.

This blog will show you how to execute Web API request using Angular JS.

This article would be helpful for those who have knowledge of Angular JS and now want to know how to use Angular JS to perform operations in Dynamic CRM.

Angular JS provides in-built service “$http” that facilitates communication with the remote HTTP servers via XMLHttpRequest object or via JSONP. In JQuery, $.ajax is used for same purpose.

So, we can use “$http” service to execute Web API request.

Below is the code snippet that executes Web API function:

     $http({
                url: encodeURI(Xrm.Page.context.getClientUrl() + "/api/data/v8.0/RetrieveVersion()"),
                dataType: 'json',
                method: 'GET',
                headers: {
                    "Content-Type": "application/json"
                }
            }).success(function (response) {
                successCallback(response.Version);
            })
        .error(function (error) {
            errorCallback(error);
        });

You can see that, we pass Web API request to retrieve version of Dynamics CRM to URL. Execute “RetrieveVersion()” function, similarly you can execute other Web API functions like “WhoAmI()”, ”GetDefaultPriceLevelRequest()”, etc.

Below is the code snippet that query Dynamics CRM data,

  $http({
                url: encodeURI(Xrm.Page.context.getClientUrl() + "/api/data/v8.0/accounts?$select=name&$top=3"),
                dataType: 'json',
                method: 'GET',
                headers: {
                    "Accept": "application/json",
                    "OData-MaxVersion": "4.0",
                    "OData-Version": "4.0",
                    "Prefer": "odata.maxpagesize=3"
                }
            }).success(function (response) {
                successCallback(response);
            })
       .error(function (error) {
           errorCallback(error);
       });

In this code, we have passed Web API query to select top 3 accounts. Here, the only difference between above code and the code that executes Web API function is URL and headers.

Conclusion:

If you are developing an application for Dynamics CRM using Angular JS, we can use $http service to get Dynamics CRM data or perform operations in Dynamics CRM.

Completed  with Dynamics CRM implementation? Whats next? Monitor User Adoption!