샘플: 데이터 매개 변수를 통해 웹 리소스에 여러 값 전달

아티클
07/06/2017

게시 날짜: 2016년 11월

적용 대상: Dynamics CRM 2015

웹 페이지(HTML) 또는 Silverlight 웹 리소스 페이지는 data라는 단일 사용자 지정 매개 변수만 허용할 수 있습니다. 데이터 매개 변수 안에서 둘 이상의 값을 전달하려면 페이지 안에서 매개 변수를 인코딩하고 디코딩해야 합니다.

이곳의 페이지는 단일 매개 변수 안에서 추가 값을 전달한 후 웹 리소스 안에서 처리하는 기술을 나타냅니다. 이 페이지는 sdk\samplecode\js\webresources\showdataparams.htm에서 SDK의 다운로드 가능한 파일에서 사용할 수 있습니다.

샘플 HTML 웹 리소스

아래 HTML 코드는 세 가지 함수를 정의하는 스크립트가 포함된 웹 페이지(HTML) 웹 리소스를 나타냅니다.

getDataParam: body.onload 이벤트에서 호출되는 이 함수는 페이지에 전달된 모든 쿼리 문자열을 검색하고 이름이 data인 쿼리 문자열을 찾습니다.
parseDataValue: getDataParam에서 데이터 매개 변수를 받고 DHTML 테이블을 작성하여 data 매개 변수 안에 전달된 모든 값을 표시합니다.

참고

쿼리 문자열에 포함된 모든 문자는 encodeURIComponent 메서드를 사용하여 인코딩됩니다. 이 함수는 JScriptdecodeURIComponent 메서드를 사용하여 전달된 값을 디코딩합니다.
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"이라는 웹 페이지 웹 리소스를 만듭니다.

전달할 매개 변수는 first=First Value&second=Second Value&third=Third Value입니다.

참고

양식 편집기에서 웹 리소스 속성 대화 상자를 사용하여 정적 매개 변수를 추가할 경우 인코딩하지 않고 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
```
참고

웹 리소스를 양식에 추가하고 인코딩되지 않은 매개 변수를 Custom Parameters(data) 필드에 붙여넣은 경우 양식을 미리 볼 수 있습니다.
new_/ShowDataParams.htm은 동적으로 생성된 테이블을 표시합니다.

매개 변수

값

첫째

첫 번째 값

둘째

두 번째 값

셋째

세 번째 값

매개 변수	값
첫째	첫 번째 값
둘째	두 번째 값
셋째	세 번째 값

작동 방법

데이터 쿼리 문자열 매개 변수 값에 포함된 값에 액세스하려면 웹 페이지 웹 리소스에서 데이터 매개 변수 값을 추출한 후 코드를 사용하여 문자열을 배열로 분할할 수 있으므로 각 이름 값 쌍을 개별적으로 액세스할 수 있습니다.

페이지가 로드되면 getDataParam 함수가 호출됩니다. 이 함수는 간단히 데이터 매개 변수를 식별하고 값을 ParseDataValue 함수에 전달합니다. 데이터 매개 변수가 없으면 noParams 함수는 메시지를 테이블 대신 페이지에 추가합니다.

ParseDataValue 함수는 getDataParam에 있는 유사한 논리를 사용하여 사용자 지정 매개 변수 구분 기호를 찾아 이름 값 쌍 배열을 만듭니다. 그런 후 테이블을 생성하고 그렇지 않으면 빈 document.body에 추가합니다.

참고 항목

Microsoft Dynamics CRM 2015용 웹 리소스
샘플: 웹 리소스로 파일 가져오기
웹 페이지(HTML) 웹 리소스
Silverlight(XAP) 웹 리소스

다음을 통해 공유

샘플: 데이터 매개 변수를 통해 웹 리소스에 여러 값 전달

샘플 HTML 웹 리소스

이 페이지 사용

작동 방법

참고 항목

추가 리소스