Muokkaa

Jaa


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

An (HTML) 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.

Note

Only alphanumeric characters are supported as parameters to web resources. All characters included in the query string go through validation to ensure the validity of the parameters passed. If there are any parameters found to be not valid, the request will fail. For example, passing text values enclosed in angular brackets is considered an invalid parameter type.

Sample HTML web resource

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.

    Note

    All characters included in the query string will be encoded using the encodeURIComponent function. This function uses the JavaScript decodeURIComponent function 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>  
  

Using this page

  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

    Note

    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) column. 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:

    https://<server name>/WebResources/new_/ShowDataParams.htm?data=first%3DFirst%20Value%26second%3DSecond%20Value%26third%3DThird%20Value  
    

    Note

    If you have added the web resource to a form and have pasted the un-encoded parameters into the Custom Parameters(data) column, 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

How it works

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

Web Page (HTML) Web Resources
Web Resources