CRM 2016 - WEB API CRUD Operations (Part 1)

How to CRUD with the new CRM 2016 Web API in Javascript

In this post I wanted to talk of the new Web API available in CRM 2016. I am not sure about you but I could not find any example, other than the basic Create operation provided by Microsoft, of how to use the new Web API for CRUD operations.
So here it is an example of a RETRIEVE (and the CREATE from the Microsoft example found here) query using the Web API, I will be adding more examples of "Retrieve Multiple, "Update" and "Delete" as I discover how to implement them.

"use strict";
var bd_Utilities = window.bd_Utilities || {};
bd_Utilities.WebAPI = bd_Utilities.WebAPI || {};

(function () {
    this.create = function (entitySetName, entity, successCallback, errorCallback) {
        var req = new XMLHttpRequest();
        req.open("POST", encodeURI(getWebAPIPath() + entitySetName), true);
        req.setRequestHeader("Accept", "application/json");
        req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        req.setRequestHeader("OData-MaxVersion", "4.0");
        req.setRequestHeader("OData-Version", "4.0");
        req.onreadystatechange = function () {
            if (this.readyState == 4 /* complete */) {
                req.onreadystatechange = null;
                if (this.status == 204) {
                    if (successCallback)
                        successCallback(this.getResponseHeader("OData-EntityId"));
                }
                else {
                    if (errorCallback)
                        errorCallback(bd_Utilities.WebAPI.errorHandler(this.response));
                }
            }
        };
        req.send(JSON.stringify(entity));
    };

this.retrieve = function (id, entitySetName, select, expand, successCallback, errorCallback) {
        var req = new XMLHttpRequest();
        req.open("GET", encodeURI(getWebAPIPath() + entitySetName + "(" + id + ")" + select), true);
        req.setRequestHeader("Accept", "application/json");
        req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        req.setRequestHeader("OData-MaxVersion", "4.0");
        req.setRequestHeader("OData-Version", "4.0");
        req.onreadystatechange = function () {
            if (this.readyState == 4 /* complete */) {
                req.onreadystatechange = null;
                if (this.status == 200) {
                    if (successCallback)
                        successCallback(JSON.parse(this.responseText, bd_Utilities.WebAPI.dateReviver));
                }
                else {
                    if (errorCallback)
                        errorCallback(bd_Utilities.WebAPI.errorHandler(this.response));
                }
            }
        };
        req.send();
    };
 
//This is the calling function:

search: function () {
        bd_Utilities.WebAPI.retrieve("00000000-0000-0000-0000-000000000090", "contacts", "?$select=firstname,lastname", "",
       
        function (result) {
            var contact = result;
            console.log("Contact retrieved")
        },
        function (error) { console.log(error.message); });
    }

//And these are some helper functions from the CRM SDK

    //Internal supporting functions
    function getClientUrl() {
        //Get the organization URL
        if (typeof GetGlobalContext == "function" &&
            typeof GetGlobalContext().getClientUrl == "function") {
            return GetGlobalContext().getClientUrl();
        }
        else {
            //If GetGlobalContext is not defined check for Xrm.Page.context;
            if (typeof Xrm != "undefined" &&
                typeof Xrm.Page != "undefined" &&
                typeof Xrm.Page.context != "undefined" &&
                typeof Xrm.Page.context.getClientUrl == "function") {
                try {
                    return Xrm.Page.context.getClientUrl();
                } catch (e) {
                    throw new Error("Xrm.Page.context.getClientUrl is not available.");
                }
            }
            else { throw new Error("Context is not available."); }
        }
    }

    function getWebAPIPath() {
        return getClientUrl() + "/api/data/v8.0/";
    }

    //Internal validation functions
    function isString(obj) {
        if (typeof obj === "string") {
            return true;
        }
        return false;

    }

    function isNull(obj) {
        if (obj === null)
        { return true; }
        return false;
    }
    function isUndefined(obj) {
        if (typeof obj === "undefined") {
            return true;
        }
        return false;
    }
    function isFunction(obj) {
        if (typeof obj === "function") {
            return true;
        }
        return false;
    }
    function isNullOrUndefined(obj) {
        if (isNull(obj) || isUndefined(obj)) {
            return true;
        }
        return false;
    }
    function isFunctionOrNull(obj) {
        if (isNull(obj))
        { return true; }
        if (isFunction(obj))
        { return true; }
        return false;
    }

    // This function is called when an error callback parses the JSON response
    // It is a public function because the error callback occurs within the onreadystatechange
    // event handler and an internal function would not be in scope.
    this.errorHandler = function (resp) {
        try {
            return JSON.parse(resp).error;
        } catch (e) {
            return new Error("Unexpected Error")
        }
    }

    this.dateReviver = function (key, value) {
        ///<summary>
        /// Private function to convert matching string values to Date objects.
        ///</summary>
        ///<param name="key" type="String">
        /// The key used to identify the object property
        ///</param>
        ///<param name="value" type="String">
        /// The string value representing a date
        ///</param>
        var a;
        if (typeof value === 'string') {
            a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
            if (a) {
                return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6]));
            }
        }
        return value;
    }

}).call(bd_Utilities.WebAPI);

Interact with CRM form objects from Silverlight through the HTML Bridge

In this post I will show you how we can access attributes on the form via Silverlight managed code.

When you host a Silverlight application in a HTML page you can access the HTML Document Object Model (DOM) from the managed code, and call managed code from JavaScript. This is possible using the HTML Bridge technology available in Silverlight.
In the same way you can access the xrm objects on a Dynamics Crm form using managed code and vice versa when a Silverlight application is embedded in a Crm form.
In this post I will show you a simple example of how to do this.

Recipe for this example:

• I will create a simple Silverlight application
• Create a Silverlight web resource
• Add the web resource to a Crm form
• Verify

The Silverlight application consists of a Textbox and a Button as shown below:

<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Stretch">
            <TextBox x:Name="InputText" Width="200" Height="23"/>
            <Button Content="Go" Width="22" Height="20" Click="Button_Click" Margin="4,0,0,0"/>
</StackPanel>

After having created the Silverlight application let's add the following code to the Button_Click  event handler:

add this a reference to the "System.Windows.Browser" to your Silverlight project and the using statement in order to be able to use the HTML Bridge,

using System.Windows.Browser;

private void Button_Click(object sender, RoutedEventArgs e)
        {
            //Get the xrm object using the dynamic type
            dynamic xrm = (ScriptObject)HtmlPage.Window.GetProperty("Xrm");
            //this is the number of employees attribute
            var numEmployees = xrm.Page.data.entity.attributes.get("numberofemployees");

            try
            {
               
                if (!string.IsNullOrEmpty(InputText.Text))
                {
                    //convert to int the input from SL text box
                    var employees = Convert.ToInt32(InputText.Text);

                    //set the attribute on the Crm form
                    numEmployees.setValue(employees);
                }
                else
                {
                    //set the attribute on the form
                    numEmployees.setValue(null);
                }
            }
            catch(System.FormatException fe)
            {
                HtmlPage.Window.Alert(string.Format("{0}", fe.Message));
            }
            catch(System.OverflowException ofe)
            {
                HtmlPage.Window.Alert(string.Format("{0}" , ofe.Message));
            }
        }

After having added the Silverlight web resource (see this post) we can now embed it in a form (the account form in this example), thje result is shown below:

To test the application enter a value into the textbox and enter "Go", you should see the number of employee populated with the value you have inserted in alternative you can leave the text box empty.
If you try to enter a value that is too large, too small or is not a number an exception will be thrown and a message will be displayed (see below) . Note that the messages are once again shown using the HTML Bridge through the following lines of code:

HtmlPage.Window.Alert(string.Format("{0}", fe.Message));
HtmlPage.Window.Alert(string.Format("{0}" , ofe.Message));


Alternatively we could have used a Silverlight Child window or simple MessageBox.Show("")

Well that's all really! Next time we will see how to call a Silverlight method from Crm form.

Stay tuned.

Luciano.