Export (0) Print
Expand All

Sample: Pass multiple values to a web resource through the data parameter

Applies To: CRM 2015 on-prem, CRM Online

[This topic is pre-release documentation and is subject to change in future releases.]

A webpage (HTML) or Silverlight web resource page can only accept a single custom parameter called data. To pass more than one value in the data parameter, you need to encode the parameters and decode the parameters in your page.

The page here represents a technique to pass the additional values within a single parameter and then process them within your web resource. This page is available in the downloadable files for the SDK at sdk\samplecode\js\webresources\showdataparams.htm

The HTML code below represents a webpage (HTML) web resource that includes a script that defines three functions:

  • getDataParam: Called from the body.onload event, this function retrieves any query string parameters passed to the page and locates one named data.

  • parseDataValue: Receives the data parameter from getDataParam and builds a DHTML table to display any values passed within the data parameter.

    noteNote
    All characters included in the query string will be encoded using the encodeURIComponent method. This function uses the JScript decodeURIComponent method to decode the values passed.

  • noParams: Displays a message when no parameters are passed to the page.

<!DOCTYPE html >
<html lang="en-us">
<head>
 <title>Show Data Parameters Page</title>
 <style type="text/css">
  body
  {
   font-family: Segoe UI, Tahoma, Arial;
   background-color: #d6e8ff;
  }
  tbody
  {
   background-color: white;
  }
  th
  {
   background-color: black;
   color: White;
  }
 </style>
 <script type="text/javascript">
  document.onreadystatechange = function () {
   if (document.readyState == "complete") {
    getDataParam();
   }
  }

  function getDataParam() {
   //Get the any query string parameters and load them
   //into the vals array

   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") {
      parseDataValue(vals[i][1]);
      found = true;
      break;
     }
    }
    if (!found)
    { noParams(); }
   }
   else {
    noParams();
   }
  }

  function parseDataValue(datavalue) {
   if (datavalue != "") {
    var vals = new Array();

    var message = document.createElement("p");
    setText(message, "These are the data parameters values that were passed to this page:");
    document.body.appendChild(message);

    vals = decodeURIComponent(datavalue).split("&");
    for (var i in vals) {
     vals[i] = vals[i].replace(/\+/g, " ").split("=");
    }

    //Create a table and header using the DOM
    var oTable = document.createElement("table");
    var oTHead = document.createElement("thead");
    var oTHeadTR = document.createElement("tr");
    var oTHeadTRTH1 = document.createElement("th");
    setText(oTHeadTRTH1, "Parameter");
    var oTHeadTRTH2 = document.createElement("th");
    setText(oTHeadTRTH2, "Value");
    oTHeadTR.appendChild(oTHeadTRTH1);
    oTHeadTR.appendChild(oTHeadTRTH2);
    oTHead.appendChild(oTHeadTR);
    oTable.appendChild(oTHead);
    var oTBody = document.createElement("tbody");
    //Loop through vals and create rows for the table
    for (var i in vals) {
     var oTRow = document.createElement("tr");
     var oTRowTD1 = document.createElement("td");
     setText(oTRowTD1, vals[i][0]);
     var oTRowTD2 = document.createElement("td");
     setText(oTRowTD2, vals[i][1]);

     oTRow.appendChild(oTRowTD1);
     oTRow.appendChild(oTRowTD2);
     oTBody.appendChild(oTRow);
    }

    oTable.appendChild(oTBody);
    document.body.appendChild(oTable);
   }
   else {
    noParams();
   }
  }

  function noParams() {
   var message = document.createElement("p");
   setText(message, "No data parameter was passed to this page");


   document.body.appendChild(message);
  }
  //Added for cross browser support.
  function setText(element, text) {
   if (typeof element.innerText != "undefined") {
    element.innerText = text;
   }
   else {
    element.textContent = text;
   }

  }
 </script>
</head>
<body>
</body>
</html>


  1. Create a webpage web resource called "new_/ShowDataParams.htm" using the sample code.

    The parameters you want to pass are: first=First Value&second=Second Value&third=Third Value

    noteNote
    If you’re adding static parameters using the Web Resource Properties dialog box from the form editor, you can simply paste the parameters without encoding them into the Custom Parameter(data) field. These values will be encoded for you, but you’ll still need to decode them and extract the values in your page.

  2. For dynamic values generated in code, use the encodeURIComponent method on the parameters. The encoded values should be:

    first%3DFirst%20Value%26second%3DSecond%20Value%26third%3DThird%20Value

    Open the page passing the encoded parameters as the value of the data parameter:

    http://<server name>/WebResources/new_/ShowDataParams.htm?Data=first%3DFirst%20Value%26second%3DSecond%20Value%26third%3DThird%20Value
    
    noteNote
    If you have added the web resource to a form and have pasted the un-encoded parameters into the Custom Parameters(data) field, you can just preview the form.

  3. The new_/ShowDataParams.htm will display a dynamically generated table:

     

    Parameter Value

    first

    First Value

    second

    Second Value

    third

    Third Value

To access the values embedded within the data query string parameter value, in your webpage web resource you can extract the value of the data parameter and then use code to split the string into an array so you can access each name value pair individually.

When the page loads the getDataParam function is called. This function simply identifies the data parameter and passes the value to the ParseDataValue function. If no data parameter is found the noParams function will add a message to the page in place of the table.

The ParseDataValue function uses similar logic found in getDataParam to locate the custom parameter delimiters to create an array of name value pairs. Then it generates a table and appends it to the otherwise empty document.body.

See Also

Microsoft Dynamics CRM 2015 and Microsoft Dynamics CRM Online
Send comments about this topic to Microsoft.
© 2015 Microsoft. All rights reserved.
Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2015 Microsoft