How to pass CRM Dynamics 2015 Form data(filed values) to an HTML page which has JavaScript functions

Question

I recently acquired a JavaScript API for a web-phone web client. From CRM I want to launch this client and pass my CRM Form data to it, I have created a custom ribbon button that has to call that HTML Page and pass relevant data to it.

The ribbon button should launch the URL to the web-phone, but at the same time pass parameters to the JavaScript functions in the HTML page, do I use JavaScript action on ribbon or do I use URL action , if I use URL how do I pass data to the JScript function?

To make this clearer I have a Contact entity in CRM which has a mobile number that I want to pass as a parameter to the HTML page that has the JavaScript functions I want to utilize for the web-phone client

Answer 1

If you are using an url to call the external page you can append the parameters as a "GET" so after calling the page:

page.html?phone=123123

then you will be able to access that from your html page as this other post states Get url parameter jquery Or How to Get Query String Values In js and you should be fine. Also if you use it as an embedded web resource in the page you will be able to access the form properties via windows.parent.Xrm

Answer 2

Add line below to head tag of html:

    <script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>

Also add this code for running in case of loading of html:

 <script src="OnLoadHtml.js" type="text/javascript"></script>

in javascript OnLoadHtml.js add these codes below:

document.onreadystatechange = function () {
    //When document is ready
    if (document.readyState == "complete") {
        //Get sent arguments in url
        var arguments = GetQueryArgument();
        //Decode encoded arguments
        var decodedArguments = decodeURIComponent(arguments)
    }
}

//Gets query passed argument
function GetQueryArgument()
{
    /*Get the any query string parameters and load them
    into the vals array*/
    var result = "";
    var vals = new Array();
    if (location.search != "") {
        vals = location.search.substr(1).split("&");
        for (var i in vals) {
            vals[i] = vals[i].replace(/\+/g, " ").split("=");
        }
        //look for the parameter named 'data'
        var found = false;
        for (var i in vals) {
            if (vals[i][0].toLowerCase() == "data") {
                result = vals[i][1];
                found = true;
                break;
            }
        }
        if (!found)
        {
            result = "";
        }
    }
    else
    {
        result = "";
    }
    return result;
}

To return result from html to javascript back:

Add line below to body tag of html:

    <input id="btnOk" type="button" class="NormalButton" value="OK" onclick="BtnOK_OnClick();">

And add this code below for javascript part:

//On ok button pressed
function BtnOK_OnClick() {
    debugger;
    console.log("Ok is clicked");
    var result = GetResult();
    //Control value is not empty
    if (result === "")
    {
        retrun;
    }
    Mscrm.Utilities.setReturnValue(result);
    try
    {
        closeWindow(true); // Close the dialog box
    }
    catch (e)
    {
        console.log("Error happened at closing.");
    }
}