Instrucións: Usar a API web dos portais

Nesta guía, configurará unha páxina web e un modelo web personalizado que utilizará a API web para ler, escribir, actualizar e eliminar rexistros desde a táboa de contactos.

Nota

Pode cambiar os nomes das columnas ou usar unha táboa diferente seguindo os pasos deste exemplo.

Paso 1. Creación de donfiguracións do sitio

Para poder usar a API web de portais, ten que activar a configuración do sitio requirida coa aplicación Xestión de portais. A configuración do sitio depende da táboa que desexe usar ao interactuar coa API web.

Inicie a aplicación Xestión de portais.
No panel da esquerda da aplicación Xestión do portal, seleccione Configuración do sitio.
Seleccione Nova.
Na caixa Nome, introduza Webapi/contact/enabled.
Na lista Sitio web, seleccione o rexistro do seu sitio web.
Na caixa Valor, introduza verdadeiro.
Seleccione Gardar eamp; Pechar.
Seleccione Novo.
Na caixa Nome, introduza Webapi/contact/fields.
Na lista Sitio web, seleccione o rexistro do seu sitio web.
Na caixa Valor, introduza
nome, apelidos, nome completo, enderezo de correo electrónico 1, teléfono 1
Seleccione Gardar eamp; Pechar.
Seleccione Novo.
Na caixa Nome, introduza Webapi/error/innererror.
Na lista Sitio web, seleccione o rexistro do seu sitio web.
Na caixa Valor, introduza verdadeiro.
Seleccione Gardar eamp; Pechar.
Verifique a configuración do sitio para a API web.

Paso 2. Configurar permisos

Terá que configurar os permisos para que os usuarios poidan usar a función API web. Neste exemplo, terá que configurar ou crear un novo rol web que utilizará a API web, a continuación, engadirá os permisos de táboa para a táboa Contacto e asociará o permiso de táboa a rol web e, por último, asignará o rol web aos usuarios para permitirlles utilizar a API web.

Nota

A API web segue os permisos de táboas que proceden do contexto do rol web do usuario autenticado ou do rol web anónimo. Considere se os seus usuarios xa teñen un rol web que teña acceso ás táboas específicas do seu sitio web que necesita a API web. Non necesita crear roles web adicionais só para usar a API web.

Cear unha función web

Se actualmente non ten un rol web con permisos para a táboa á que está accedendo a través da API web ou necesita un contexto diferente para acceder aos datos, siga os seguintes pasos para poder crear un novo rol web e asignar permisos de táboa.

Inicie a aplicación Xestión de portais.
No panel esquerdo, na sección Seguranza, seleccione Roles web.
Seleccione Nova.
Na caixa Nome, introduza Usuario da API web (ou o nome que mellor reflicta a función do usuario que accede a esta funcionalidade).
Na lista Sitio web, seleccione o rexistro do seu sitio web.
Seleccione Gardar.

Crear permisos da táboa

Inicie o estudio de deseño de Power Pages.
Seleccione o espazo de traballo Seguridade .
Na sección Protexer , seleccione Permisos de táboa.
Seleccione novo permiso.
Na caixa Nome, insira Permiso de táboa de contacto.
Na lista Nome da táboa, seleccione Contacto (contacto).
Na lista de Tipo de acceso, seleccione Global.
Seleccione os privilexios Ler, Escribir, Crear e Eliminar.
Seleccione + Engadir roles e seleccione o rol web que seleccionou ou creou anteriormente.
Seleccione Gardar eamp; Pechar.

Engadir contactos á función web

Inicie a aplicación Xestión de portais.
No panel esquerdo, na sección Seguranza, seleccione Contactos.
Seleccione un contacto que desexe utilizar neste exemplo para a API web.

Nota

Este contacto é a conta de usuario empregada neste exemplo para probar a API web. Asegúrese de seleccionar o contacto correcto no seu portal.
Seleccione Relacionado>Roles web.
Seleccione Engadir rol web existente.
Seleccione o rol Usuario da API web creado anteriormente.
Seleccione Engadir.
Seleccione Gardar eamp; Pechar.

Paso 3. Crear unha páxina web

Agora que activou a API web e configurou os permisos de usuario, cree unha páxina web con código de mostra para ver, editar, crear e eliminar rexistros.

Inicie o estudio de deseño de Power Pages.
Na área de traballo Páxinas, seleccione + Páxina.
No diálogo Engadir unha páxina,
Na caixa Nome, introduza WebAPI e seleccione o deseño Comezar desde cero.
Seleccione Engadir.
Seleccione a opción Editar código na esquina superior dereita.
Seleccione Abrir Visual Studio Code.

Copie o seguinte fragmento de código de mostra e pégueo entre as etiquetas de <div></div> da sección da páxina.

    <!-- Sample code for Web API demonstration -->
<style>
    #processingMsg {
        width: 150px;
        text-align: center;
        padding: 6px 10px;
        z-index: 9999;
        top: 0;
        left: 40%;
        position: fixed;
        -webkit-border-radius: 0 0 2px 2px;
        border-radius: 0 0 2px 2px;
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        display: none;
    }

    table td[data-attribute] .glyphicon-pencil {
        margin-left: 5px;
        opacity: 0;
    }

    table td[data-attribute]:hover .glyphicon-pencil {
        opacity: 0.7;
    }
</style>

<script>
  $(function() {
    //Web API ajax wrapper
    (function(webapi, $) {
      function safeAjax(ajaxOptions) {
        var deferredAjax = $.Deferred();
        shell.getTokenDeferred().done(function(token) {
          // Add headers for ajax
          if (!ajaxOptions.headers) {
            $.extend(ajaxOptions, {
              headers: {
                "__RequestVerificationToken": token
              }
            });
          } else {
            ajaxOptions.headers["__RequestVerificationToken"] = token;
          }
          $.ajax(ajaxOptions)
            .done(function(data, textStatus, jqXHR) {
              validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
            }).fail(deferredAjax.reject); //ajax
        }).fail(function() {
          deferredAjax.rejectWith(this, arguments); // On token failure pass the token ajax and args
        });
        return deferredAjax.promise();
      }
      webapi.safeAjax = safeAjax;
    })(window.webapi = window.webapi || {}, jQuery)
    // Notification component
    var notificationMsg = (function() {
      var $processingMsgEl = $('#processingMsg'),
        _msg = 'Processing...',
        _stack = 0,
        _endTimeout;
      return {
        show: function(msg) {
          $processingMsgEl.text(msg || _msg);
          if (_stack === 0) {
            clearTimeout(_endTimeout);
            $processingMsgEl.show();
          }
          _stack++;
        },
        hide: function() {
          _stack--;
          if (_stack <= 0) {
            _stack = 0;
            clearTimeout(_endTimeout);
            _endTimeout = setTimeout(function() {
              $processingMsgEl.hide();
            }, 500);
          }
        }
      }
    })();
    // Inline editable table component
    var webAPIExampleTable = (function() {
      var trTpl = '<% _.forEach(data, function(data){ %>' +
        '<tr data-id="<%=data.id%>" data-name="<%=data.fullname%>">' +
        '<% _.forEach(columns, function(col){ %>' +
        '<td data-attribute="<%=col.name%>" data-label="<%=col.label%>" data-value="<%=data[col.name]%>">' +
        '<%-data[col.name]%><i class="glyphicon glyphicon-pencil"></i>' +
        '</td>' +
        '<% }) %>' +
        '<td>' +
        '<button class="btn btn-default delete" type="submit"><i class="glyphicon glyphicon-trash" aria-hidden="true"></i></button>' +
        '</td>' +
        '</tr>' +
        '<% }) %>';
      var tableTpl = '<table class="table table-hover">' +
        '<thead>' +
        '<tr>' +
        '<% _.forEach(columns, function(col){ %>' +
        '<th><%=col.label%></th>' +
        '<% }) %>' +
        '<th>' +
        '<button class="btn btn-default add" type="submit">' +
        '<i class="glyphicon glyphicon-plus" aria-hidden="true"></i> Add Sample Record' +
        '</button>' +
        '</th>' +
        '</tr>' +
        '</thead>' +
        '<tbody>' + trTpl + '</tbody>' +
        '</table>';
      function getDataObject(rowEl) {
        var $rowEl = $(rowEl),
          attrObj = {
            id: $rowEl.attr('data-id'),
            name: $rowEl.attr('data-name')
          };
        $rowEl.find('td').each(function(i, el) {
          var $el = $(el),
            key = $el.attr('data-attribute');
          if (key) {
            attrObj[key] = $el.attr('data-value');
          }
        })
        return attrObj;
      }
      function bindRowEvents(tr, config) {
        var $row = $(tr),
          $deleteButton = $row.find('button.delete'),
          dataObj = getDataObject($row);
        $.each(config.columns, function(i, col) {
          var $el = $row.find('td[data-attribute="' + col.name + '"]');
          $el.on('click', $.proxy(col.handler, $el, col, dataObj));
        });
        //User can delete record using this button
        $deleteButton.on('click', $.proxy(config.deleteHandler, $row, dataObj));
      }
      function bindTableEvents($table, config) {
        $table.find('tbody tr').each(function(i, tr) {
          bindRowEvents(tr, config);
        });
        $table.find('thead button.add').on('click', $.proxy(config.addHandler, $table));
      }
      return function(config) {
        var me = this,
          columns = config.columns,
          addHandler = config.addHandler,
          deleteHandler = config.deleteHandler,
          $table;
        me.render = function(el) {
          $table = $(el).html(_.template(tableTpl)({
            columns: columns,
            data: me.data
          })).find('table');
          bindTableEvents($table, {
            columns: columns,
            addHandler: addHandler,
            deleteHandler: deleteHandler
          });
        }
        me.addRecord = function(record) {
          $table.find('tbody tr:first').before(_.template(trTpl)({
            columns: columns,
            data: [record]
          }));
          bindRowEvents($table.find('tbody tr:first'), config);
        }
        me.updateRecord = function(attributeName, newValue, record) {
          $table.find('tr[data-id="' + record.id + '"] td[data-attribute="' + attributeName + '"]').text(newValue);
        }
        me.removeRecord = function(record) {
          $table.find('tr[data-id="' + record.id + '"]').fadeTo("slow", 0.7, function() {
            $(this).remove();
          });
        }
      };
    })();
    //Applicaton ajax wrapper 
    function appAjax(processingMsg, ajaxOptions) {
      notificationMsg.show(processingMsg);
      return webapi.safeAjax(ajaxOptions)
        .fail(function(response) {
          if (response.responseJSON) {
            alert("Error: " + response.responseJSON.error.message)
          } else {
            alert("Error: Web API is not available... ")
          }
        }).always(notificationMsg.hide);
    }
    function loadRecords() {
      return appAjax('Loading...', {
        type: "GET",
        url: "/_api/contacts?$select=fullname,firstname,lastname,emailaddress1,telephone1",
        contentType: "application/json"
      });
    }
    function addSampleRecord() {
      //Sample data to create a record - change as appropriate
      var recordObj = {
        firstname: "Willie",
        lastname: "Huff" + _.random(100, 999),
        emailaddress1: "Willie.Huff@contoso.com",
        telephone1: "555-123-4567"
      };
      appAjax('Adding...', {
        type: "POST",
        url: "/_api/contacts",
        contentType: "application/json",
        data: JSON.stringify(recordObj),
        success: function(res, status, xhr) {
          recordObj.id = xhr.getResponseHeader("entityid");
          recordObj.fullname = recordObj.firstname + " " + recordObj.lastname;
          table.addRecord(recordObj);
        }
      });
      return false;
    }
    function deleteRecord(recordObj) {
      var response = confirm("Are you sure, you want to delete \"" + recordObj.name + "\" ?");
      if (response == true) {
        appAjax('Deleting...', {
          type: "DELETE",
          url: "/_api/contacts(" + recordObj.id + ")",
          contentType: "application/json",
          success: function(res) {
            table.removeRecord(recordObj);
          }
        });
      }
      return false;
    }
    function updateRecordAttribute(col, recordObj) {
      var attributeName = col.name,
        value = recordObj[attributeName],
        newValue = prompt("Please enter \"" + col.label + "\"", value);
      if (newValue != null && newValue !== value) {
        appAjax('Updating...', {
          type: "PUT",
          url: "/_api/contacts(" + recordObj.id + ")/" + attributeName,
          contentType: "application/json",
          data: JSON.stringify({
            "value": newValue
          }),
          success: function(res) {
            table.updateRecord(attributeName, newValue, recordObj);
          }
        });
      }
      return false;
    }
    var table = new webAPIExampleTable({
      columns: [{
        name: 'firstname',
        label: 'First Name',
        handler: updateRecordAttribute
      }, {
        name: 'lastname',
        label: 'Last Name',
        handler: updateRecordAttribute
      }, {
        name: 'emailaddress1',
        label: 'Email',
        handler: updateRecordAttribute
      }, {
        name: 'telephone1',
        label: 'Telephone',
        handler: updateRecordAttribute
      }],
      data: [],
      addHandler: addSampleRecord,
      deleteHandler: deleteRecord
    });
    loadRecords().done(function(data) {
      table.data = _.map(data.value, function(record){
        record.id = record.contactid;
        return record;
      });
      table.render($('#dataTable'));
    });
  });
</script>
<div id="processingMsg" class="alert alert-warning" role="alert"></div>
<div id="dataTable"></div>

Pegue o código.

Seleccione CTRL-S para gardar o código.
No estudio de deseño, seleccione Sincronizar para actualizar o sitio coas edicións do código.

Paso 4. Usar a API web para ler, ver, editar, crear e eliminar

Para probar a funcionalidade da API web:

Seleccione Previsualizar e logo escolla Escritorio.
Inicie sesión no seu sitio coa conta de usuario á que se lle asignou o rol de Usuario da API web que creou anteriormente.
Vaia á páxina web WebApi creada anteriormente.
Seleccione Engadir rexistro de mostra para engadir o rexistro de mostra do script.
Seleccione un campo. Neste exemplo, seleccionamos Correo electrónico para cambiar o enderezo de correo electrónico dun contacto.
Seleccione a icona Eliminar eliminar un rexistro.

Agora que creou unha páxina web cunha mostra para ler, ver, editar, crear e eliminar rexistros, pode personalizar os formularios e o deseño.

Seguinte paso

Redactar solicitudes HTTP e xestionar erros

Consulte tamén

Comentarios

Resultoulle útil esta páxina?

Last updated on 2024-10-16