Utilizarea API-ului web pentru portal

Articol
10/16/2024

În acest ghid, veți configura o pagină web și un șablon web personalizat care va folosi API-ul web pentru a citi, scrie, actualiza și șterge înregistrările din tabelul de persoane de contact.

Notă

Puteți schimba numele coloanei sau puteți utiliza un alt tabel în timp ce urmați pașii din acest exemplu.

Pasul 1. Creare setări de site

Înainte de a putea utiliza portalul Web API, trebuie să activați setările de site necesare cu aplicația Portal Management. Setările site-ului depind de tabelul pe care doriți să îl utilizați atunci când interacționați cu API-ul web.

Porniți aplicația Gestionare portal.
În aplicația Management portal din panoul din stânga, selectați Setări site.
Selectați Nou.
În caseta Nume, introducețiWebapi/contact/activat.
În lista Site web, selectați înregistrarea site-ului web.
În caseta Valoare, introduceți adevărat.
Selectați Salvați & Aproape.
Selectați Nou.
În caseta Nume, introducețiWebapi/contact/câmpuri.
În lista Site web, selectați înregistrarea site-ului web.
În caseta Valoare, Introduceți
prenume, prenume, nume complet, adresă de e-mail1, telefon1
Selectați Salvați & Aproape.
Selectați Nou.
În caseta Nume, introducețiWebapi/eroare/innererror.
În lista Site web, selectați înregistrarea site-ului web.
În caseta Valoare, introduceți adevărat.
Selectați Salvați & Aproape.
Verificați setările site-ului pentru API-ul Web.

Pasul 2. Configurați permisiunile

Va trebui să configurați permisiunile astfel încât utilizatorii să poată utiliza caracteristica API Web. În acest exemplu, veți configura sau crea un nou rol web care va utiliza API-ul web, apoi veți adăuga permisiunile de tabel pt. tabelul Persoane de contact și veți asocia permisiunea de tabel la rolul web, iar la final veți atribui rolul web la utilizatori pentru a le permite să utilizeze API-ul web.

Notă

API-ul web urmează permisiunile de tabel care provin din contextul rolului web al utilizatorului autentificat sau al rolului web anonim. Luați în considerare dacă utilizatorii dvs. au deja un rol web care are acces la tabelele specifice din site-ul dvs. web necesare API-ului web. Nu trebuie să creați roluri web suplimentare doar pentru a utiliza API-ul web.

Pentru a crea un rol web

Dacă în prezent nu aveți un rol web cu permisiuni pentru tabelul pe care îl accesați prin API-ul web sau aveți nevoie de un context diferit de accesare a datelor, urmați pașii de mai jos pentru a afla cum să creați un nou rol web și să atribuiți permisiuni pentru tabel.

Porniți aplicația Gestionare portal.
În panoul din stânga, în secțiunea Securitate, selectați Roluri web.
Selectați Nou.
În caseta Nume, introduceți Utilizator Web API (sau orice nume care reflectă cel mai bine rolul utilizatorului care accesează această funcționalitate).
În lista Site web, selectați înregistrarea site-ului web.
Selectați Salvați.

Creați permisiunile pentru tabel

Lansați studioul de design Power Pages.
Selectați Securitate spațiul de lucru.
În secțiunea proteja , selectați Permisiuni pentru tabel.
Selectați Permisiune nouă.
În caseta Nume, introduceți Permisiunea pentru tabelul de persoane de contact.
În lista Nume tabel, selectați Persoană de contact (persoană de contact).
În lista Tip de acces, selectați Global.
Selectați privilegiile Citire, SCriere, Creare și Ștergere.
Selectați + Adăugați roluri și selectați rolul web pe care l-ați selectat sau creat mai devreme.
Selectați Salvați & Aproape.

Adăugați persoane de contact la rolul web

Porniți aplicația Gestionare portal.
În panoul din stânga, în secțiunea Securitate, selectați Persoane de contact.
Selectaţi un contact pe care doriţi să îl utilizaţi în exemplu pentru API Web.

Notă

Acest contact este contul de utilizator utilizat în acest exemplu pentru testarea API-ului Web. Asigurați-vă că ați selectat contactul corect în portalul dvs.
Selectați Corelat>Roluri web.
Selectați Adăugați un rol web existent.
Selectați rolul Utilizator API Web, creat mai devreme.
Selectați Adăugare.
Selectați Salvați & Aproape.

Pasul 3. Creați o pagină web

Acum, după ce ați activat API-ul web și ați configurat permisiunile utilizatorilor, creați o pagină web cu un exemplu de cod pentru a vizualiza, edita, crea și șterge înregistrări.

Lansați studioul de design Power Pages.
În spațiul de lucru Pagini, selectați + Pagină.
În caseta de dialog Adăugați o pagină,
În caseta Nume, introduceți WebAPI și selectați aspectul Începere de la zero.
Selectați Adăugare.
Selectați opțiunea Editați codul din colțul din dreapta sus.
Selectați Deschideți Visual Studio Code.

Copiați următorul fragment de cod exemplu și inserați-l între etichetele <div></div> din secțiunea paginii.

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

Inserați codul.

Selectați CTRL-S pentru a salva codul.
În studioul de design, selectați Sincronizare pentru a actualiza site-ul cu modificările de cod.

Pasul 4. Utilizați API-ul Web pentru a citi, vizualiza, edita, crea și șterge

Pentru a testa funcționalitatea API web:

Selectați Previzualizare, apoi alegeți Desktop.
Conectați-vă la site-ul dvs. cu contul de utilizator căruia i-a fost atribuit rolul Utilizator API web pe care l-ați creat mai devreme.
Accesați pagina web WebApi creată mai devreme.
Selectați Adăugați eșantion de înregistrare pentru a adăuga eșantionul de înregistrare din script.
Selectați un câmp. În acest exemplu, am selectat E-mail pentru a schimba adresa de e-mail a unui contact.
Pentru a șterge o înregistrare, selectați pictograma Ștergere.

Acum că ați creat o pagină web cu un eșantion în acest exemplu pentru a citi, vizualiza, edita, crea și șterge înregistrări, puteți particulariza formularele și aspectul.

Următorul pas

Compuneți cereri HTTP și gestionați erorile

Partajați prin