Exemplo: passar vários valores a um recurso da Web por meio do parâmetro de dados

Uma página de recurso da Web (HTML) só pode aceitar um único parâmetro personalizado chamado data. Para passar mais de um valor no parâmetro de dados, você precisa codificar os parâmetros e decodificar os parâmetros em sua página.

A página aqui representa uma técnica para passar os valores adicionais dentro de um único parâmetro e processá-los em seu recurso da Web.

Exemplo de recurso da Web HTML

O código HTML abaixo representa um recurso da Web que inclui um script que define três funções:

  • getDataParam: Chamada do body.onload evento, essa função recupera todos os parâmetros de cadeia de caracteres de consulta passados para a página e localiza um chamado data.

  • parseDataValue: recebe o parâmetro de dados de getDataParam e cria uma tabela DHTML para exibir quaisquer valores passados dentro do parâmetro data.

    Observação

    Todos os caracteres incluídos na cadeia de caracteres de consulta serão codificados usando o método encodeURIComponent. Essa função usa o método JavaScriptdecodeURIComponent para decodificar os valores passados.

  • noParams: exibe uma mensagem quando nenhum parâmetro é passado para a página.

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

Usando esta página

  1. Crie um recurso de página da Web chamado "new_/ShowDataParams.htm" usando o código de exemplo.

    Os parâmetros que você deseja passar são: first=First Value&second=Second Value&third=Third Value

    Observação

    Se você estiver adicionando parâmetros estáticos usando a caixa de diálogo Propriedades do Recurso da Web do editor de formulários, poderá simplesmente colar os parâmetros sem codificar-os no campo Parâmetros Personalizados(dados ). Esses valores serão codificados para você, mas você ainda precisará decodificá-los e extrair os valores em sua página.

  2. Para valores dinâmicos gerados no código, use o encodeURIComponent método nos parâmetros. Os valores codificados devem ser:

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

    Abra a página passando os parâmetros codificados como o valor do parâmetro de dados:

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

    Observação

    Se você adicionou o recurso da Web a um formulário e coleu os parâmetros não codificados no campo Parâmetros Personalizados(dados), basta visualizar o formulário.

  3. A new_/ShowDataParams.htm exibirá uma tabela gerada dinamicamente.

    Parâmetro Value
    primeiro Primeiro Valor
    segunda Segundo Valor
    terceiro Terceiro Valor

Como funciona

Para acessar os valores inseridos no valor do parâmetro da cadeia de consulta de dados, no recurso da página web, você pode extrair o valor do parâmetro de dados e, em seguida, usar o código para dividir a cadeia de caracteres em uma matriz, permitindo que você acesse cada par de valores individualmente.

Quando a página carrega a getDataParam função é chamada. Essa função simplesmente identifica o parâmetro de dados e passa o valor para a ParseDataValue função. Se nenhum parâmetro de dados for encontrado, a noParams função adicionará uma mensagem à página no lugar da tabela.

A função ParseDataValue usa lógica semelhante à encontrada em getDataParam para localizar os delimitadores de parâmetro personalizados e criar uma matriz de pares nome-valor. Em seguida, ele gera uma tabela e a acrescenta ao documento.body que estaria vazio.

Consulte também

Recursos da Web para o Dynamics 365 Customer Engagement (on-premises)
Exemplo: importar arquivos como recursos da Web
Recursos da Web (HTML)
Recursos Web do Silverlight (XAP)

  • Last updated on