How to pass Object or collection of Objects to a web resource in CRM 2011

In Dynamics CRM if we want to pass data to a web resource, then we use Xrm.Utility.openWebResource function and pass as second parameter. But in this case we can’t pass Object or Array as parameter.
 

So to solve this problem one can use JSON. Using JSON we can convert Object or Collection of Object (Array) in string format. This converted data can be used to pass data to web resource. Let us take an example of passing collection of object to web resource. Here I have used collection of array that contains Id, Description and Name of Record. 

   var arrayObject = new Array();

              arrayObject[0] = new Object();

              arrayObject[0].name = "Sample Record 1";

              arrayObject[0].id = “1.";

              arrayObject[0].decription = "Test Description ";

Then after defining collection of object we will pass that object to JSON.stringify. This function will return collection in JSON String format. Then this JSON string is encoded to get parameter that is going to passed to the web resource.

var customParameters = encodeURIComponent(JSON.stringify(arrayObject));

This encoded JSON string can be passed to web resource using below code: 

Xrm.Utility.openWebResource("new_/Records.html", customParameters);

Here “Records.html” is used for displaying this collection of object on HTML page. In web resource “Records.html”, passed parameter can be collected as follows:

var queryParam = Xrm.Page.context.getQueryStringParameters();

The collected parameter is in JSON string format so we have to convert array using JSON.parse to convert it into collection of object.

if (queryParam.Data) {

                        arrayObject = JSON.parse(queryParam.Data);

                       }

In this way we can pass collection of object as parameter to web resource. Similarly we can do for object as well. 

We have used above code for passing some data to HTML web resource Records.html. This web resource takes collection of objects. And then show in table format as you can see in below screen shot.

But when we pass parameter to web resource it is passed as query string. Query string has limitation based on browsers used. So when we pass parameter to web resource it trims/neglects extra characters from the query string. So it will cause problem while converting JSON string object into Object. And this problem of query string limitation can be solved using window.opener. 

The opener property returns a reference to the window that created the window. When opening a window with window.open(), you can use this property from the destination window to return details of the source (parent) window. By using window.opener we can access global parameters defined in parent web resource. In this way we can access Objects or collection without any limitations.

Let us take same example of passing collection of object to web resource. We will take collection of object defined as follows. 

               var _arrayObject = new Array();

              arrayObject[0] = new Object();

              arrayObject[0].name = "Record 1";

              arrayObject[0].id = "1.";

              arrayObject[0].decription = "Test Description";
              arrayObject[0] = new Object();

              arrayObject[0].name = "Record 2";

              arrayObject[0].id = "2.";

              arrayObject[0].decription = "Test Description";

Then we open web resource i.e. Records.html using Xrm.Utility.openWebResource.

Xrm.Utility.openWebResource("new_/Records.html");

In web resource, passed data can be collected as follows:

if (window.opener._arrayObject != null) {

                           var  _arrayObject = window.opener._arrayObject

                        }

By using above we can pass large amount of data to HTML web resource.

I have used the windows.opener to collect the data from _arrayObject global object. This collection is converted into HTML table format. I have used this code for displaying selected records into grid.