範例：透過資料參數傳遞多個值到一個 Web 資源中

發行項
03/04/2017

發行︰ 2017年1月

適用於： Dynamics 365 (online)、Dynamics 365 (on-premises)、Dynamics CRM 2016、Dynamics CRM Online

(HTML) Web 資源頁面只接受單一自訂參數，稱為 data。若要在 data 參數中傳遞超過一個以上的值，您必須將參數編碼和並將頁面中的參數解碼。

此處頁面呈現一種技術，可在單一參數中傳遞額外的值，然後在 Web 資源中處理之。此頁面可於 sdk\samplecode\js\webresources\showdataparams.htm 下載 SDK 檔案。

範例 HTML Web 資源

以下的 HTML 程式碼代表網頁 (HTML) Web 資源，包含定義三個函數的指令碼：

getDataParam:呼叫 body.onload 事件，此函數擷取任何查詢字串參數，傳遞至頁面以及找到名稱 data 的。
parseDataValue：擷取來自 getDataParam 的資料參數，並建置一個 DHTML 工作表來顯示任何在 data 參數中傳遞的值。

注意

所有包含在查詢字串中的字元，將會用 encodeURIComponent 方法編碼。此函數使用 JavaScriptdecodeURIComponent 方法來解碼傳遞的值。
noParams：在沒有參數傳遞至頁面上時會顯示一道訊息。

<!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>

利用此頁面

使用此範例程式碼建立名為「new_/ShowDataParams.htm」的網頁 Web 資源。

要傳遞的參數如下：first=First Value&second=Second Value&third=Third Value

注意

如果您要從表單編輯工具中新增使用 Web 資源屬性對話方塊靜態參數，您可以貼上參數且不需要將其編碼納入 Custom Parameter(data) 欄位中。這些值將會為您編碼，但您仍需要解碼並在頁面上解出這些值。
對於程式碼產生的動態值，請使用參數的 encodeURIComponent 方法。此編碼值應為：

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

開啟傳遞編碼參數做為的資料參數值的頁面：
```
http://<server name>/WebResources/new_/ShowDataParams.htm?Data=first%3DFirst%20Value%26second%3DSecond%20Value%26third%3DThird%20Value
```
注意

如果已新增 Web 資源至表單，且已將未編碼參數貼至 Custom Parameters(data) 欄位，您可以預覽此表單。
new_/ShowDataParams.htm 會顯示動態產生的表：

參數

值

第一個

第一個值

第二個

第二個值

第三個

第三個值

參數	值
第一個	第一個值
第二個	第二個值
第三個	第三個值

運作方式

若要存取嵌在資料查詢字串參數值中的值，您可以在網頁 Web 資源中解開此資料參數的值，然後使用程式碼將此字串分割成陣列，這麼一來您就可以個別存取各個成對的名稱值。

在頁面載入時，將會呼叫 getDataParam 函數。此函數會識別資料參數並傳遞值到 ParseDataValue 函數中。如果找不到資料參數，noParams 函數將會新增訊息至頁面取代工作表。

getDataParam 函數使用 ParseDataValue 中可找到的相似邏輯來尋找自訂參數定義符號來建立成對名稱值的陣列。然後它會產生工作表並附加至原本空白的 document.body 中。

另請參閱

Microsoft Dynamics 365 的 Web 資源
 範例：匯入檔案為 Web 資源
 網頁 (HTML) Web 資源
 Silverlight (XAP) Web 資源

Microsoft Dynamics 365

共用方式為

範例：透過資料參數傳遞多個值到一個 Web 資源中

範例 HTML Web 資源

利用此頁面

運作方式

另請參閱

其他資源