サンプル: データパラメーターを使用した Web リソースへの複数の値の引き渡し

[アーティクル]
01/05/2024

(HTML) Web リソースページは、data という単一のカスタムパラメーターのみを受け取ることができます。 data パラメーターで複数の値を渡すには、パラメーターをエンコードし、ページ内でパラメーターをデコードする必要があります。

ここに示すページは、単一のパラメーターで追加の値を渡し、Web リソースでそれらを処理する手法を表します。

注意

Web リソースへのパラメーターとしてサポートされるのは英数字のみです。クエリ文字列に含まれるすべての文字が検証され、渡されるパラメーターの有効性が確認されます。無効であることが判明したパラメーターがある場合、要求は失敗します。たとえば、角かっこで囲まれたテキスト値を渡すと、無効なパラメーターの種類と見なされます。

HTML Web リソースの例

以下の HTML コードは、次の 3 つの関数を定義するスクリプトを含む webpage (HTML) Web リソースを表します。

getDataParam: body.onload イベントから呼び出され、ページに渡されたクエリ文字列パラメーターを取得し、data という名前のパラメーターを探します。
parseDataValue: getDataParam から data パラメーターを受け取り、data パラメーターで渡された値を表示するための DHTML テーブルを構築します。

注意

クエリ文字列に含まれるすべての文字は、encodeURIComponent 関数を使用してエンコードされます。この関数は、JavaScript decodeURIComponent 関数を使用して、渡された値をデコードします。
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" という webpage Web リソースを作成します。

渡すパラメーターは first=First Value&second=Second Value&third=Third Value です。

注意

フォームエディターの Web リソースのプロパティダイアログボックスを使用して静的パラメーターを追加する場合は、パラメーターをエンコードせずに カスタムパラメーター (データ) 列に貼り付けることができます。これらの値はエンコードされますが、ページ内でデコードして値を抽出する必要はあります。
コードで生成される動的な値の場合は、パラメーターで encodeURIComponent メソッドを使用します。エンコードされる値は次のようになります。

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

ページを開き、エンコードされたパラメーターを data パラメーターの値として渡します。
```
https://<server name>/WebResources/new_/ShowDataParams.htm?data=first%3DFirst%20Value%26second%3DSecond%20Value%26third%3DThird%20Value  
```
注意

Web リソースをフォームに追加し、エンコードされていないパラメーターを カスタムパラメーター (データ) 列に貼り付けた場合は、フォームをプレビューできます。
new_/ShowDataParams.htm により、動的に生成されたテーブルが表示されます。

パラメーター値

第 1 First Value

第 2 Second Value

第 3 Third Value

パラメーター	値
第 1	First Value
第 2	Second Value
第 3	Third Value

動作

データクエリ文字列パラメーター値に埋め込まれた値にアクセスするには、Web ページ Web リソースで、data パラメーターの値を抽出し、コードを使用して文字列を配列に分割して、名前と値の各ペアに個別にアクセスできます。

ページが読み込まれると、getDataParam 関数が呼び出されます。この関数は、data パラメーターを識別し、値を ParseDataValue 関数に渡します。 data パラメーターが見つからない場合、noParams 関数はテーブルではなくページにメッセージを追加します。

ParseDataValue 関数は、getDataParam と同様のロジックを使用してカスタムパラメーター区切り文字を特定し、名前と値のペアの配列を作成します。次に、テーブルを生成し、空の document.body に追加します。

参照

Web ページ (HTML) の Web リソース
 Web リソース

注意

ドキュメントの言語設定についてお聞かせください。簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。個人データは収集されません (プライバシーステートメント)。

次の方法で共有

サンプル: データパラメーターを使用した Web リソースへの複数の値の引き渡し

HTML Web リソースの例

このページの使用方法

動作

参照

その他のリソース

次の方法で共有

サンプル: データ パラメーターを使用した Web リソースへの複数の値の引き渡し

HTML Web リソースの例

このページの使用方法

動作

参照

その他のリソース

サンプル: データパラメーターを使用した Web リソースへの複数の値の引き渡し