Návod: Použití webového rozhraní API portálu

Článek
04/25/2023

V tomto průvodci vytvoříte webovou stránku a vlastní webovou šablonu, která bude používat webové rozhraní API ke čtení, zápisu, aktualizaci a odstraňování záznamů z tabulky kontaktů.

Poznámka:

Podle kroků v tomto příkladu můžete změnit názvy sloupců nebo použít jinou tabulku.

Krok 1. Vytvořit nastavení webu

Než budete moci použít webové rozhraní API portálů, musíte povolit požadovaná nastavení webu pomocí aplikace Správa portálu. Nastavení webu závisí na tabulce, kterou chcete použít při interakci s webovým rozhraním API.

Spusťte aplikaci Správa portálu.
V levém podokně aplikace Správa portálu vyberte Nastavení webu.
Vyberte Nové.
Do pole Název zadejte Webapi/contact/enabled.
V seznamu Web vyberte záznam svého webu.
Do pole Hodnota zadejte true.
Zvolte Uložit a zavřít.
Vyberte Nové.
Do pole Název zadejte Webapi/contact/fields.
V seznamu Web vyberte záznam svého webu.
Do pole Hodnota zadejte
firstname,lastname,fullname,emailaddress1,telephone1
Zvolte Uložit a zavřít.
Vyberte Nové.
Do pole Název zadejte Webapi/error/innererror.
V seznamu Web vyberte záznam svého webu.
Do pole Hodnota zadejte true.
Zvolte Uložit a zavřít.
Ověřte nastavení webu pro webové rozhraní API.

Krok 2. Konfigurace oprávnění

Budete muset nakonfigurovat oprávnění, aby uživatelé mohli používat funkci webového rozhraní API. V tomto příkladu budete muset nastavit nebo vytvořit novou webovou roli, která použije webové rozhraní API, dále přidáte oprávnění k tabulce Kontakt a přidružíte jej k této webové roli, a nakonec tuto webovou roli přiřadíte uživatelům, abyste jim umožnili používat webové rozhraní API.

Poznámka:

Webové rozhraní API se řídí oprávněními k tabulce pocházejícími z kontextu webové role ověřeného uživatele nebo anonymní webové role. Zvažte, zda vaši uživatelé již mají webovou roli, která má přístup ke konkrétním tabulkám na vašem webu, které potřebuje webové rozhraní API. Chcete-li používat webové rozhraní API, nemusíte vytvářet další webové role.

Vytvoření webové role

Pokud aktuálně nemáte webovou roli s oprávněními k tabulce, ke které přistupujete prostřednictvím webového rozhraní API, nebo požadujete jiný kontext přístupu k datům, pomocí následujících kroků zjistíte, jak vytvořit novou webovou roli a přiřadit oprávnění k tabulce.

Spusťte aplikaci Správa portálu.
V levém podokně v části Zabezpečení vyberte Webové role.
Vyberte Nový.
V poli Jméno zadejte Uživatel webového rozhraní API (nebo jakékoli jméno, které nejlépe odráží roli uživatele přistupujícího k této funkci).
V seznamu Web vyberte záznam svého webu.
Zvolte Uložit.

Vytvoření oprávnění pro tabulku

Spusťte návrhové studio Power Pages.
Vyberte pracovní prostor Nastavení.
V sekci Zabezpečení vyberte Oprávnění k tabulce.
Vyberte Nové oprávnění.
V poli Název zadejte Oprávnění k tabulce Kontakt.
V seznamu Název tabulky vyberte Kontakt (kontakt).
V seznamu Typ přístupu vyberte položku Globální.
Vyberte oprávnění Čtení, Zápis, Vytvoření a Odstranění.
Vyberte + Přidat role a vyberte webovou roli, kterou jste vybrali nebo vytvořili dříve.
Zvolte Uložit a zavřít.

Přidání kontaktů do webové role

Spusťte aplikaci Správa portálu.
V levém podokně v části Zabezpečení vyberte Kontakty.
Vyberte kontakt, který chcete v tomto příkladu pro webové rozhraní API použít.

Poznámka:

Tento kontakt je uživatelský účet použitý v tomto příkladu pro testování webového rozhraní API. Nezapomeňte na svém portálu vybrat správný kontakt.
Vyberte Související>Webové role.
Vyberte Přidat existující webovou roli.
Vyberte roli Uživatel webového rozhraní API vytvořenou dříve.
Vyberte Přidat.
Zvolte Uložit a zavřít.

Krok 3. Vytvořte webovou stránku

Nyní, když jste povolili webové rozhraní API a nakonfigurovali uživatelská oprávnění, vytvořte webovou stránku s ukázkovým kódem pro prohlížení, úpravy, vytváření a mazání záznamů.

Spusťte návrhové studio Power Pages.
V pracovním prostoru Stránky vyberte + Stránka.
V dialogovém okně Přidat stránku:
V poli Název zadejte Webové rozhraní API a potom vyberte rozložení Začít od začátku.
Vyberte Přidat.
V pravém horním rohu vyberte možnost Upravit kód.
Vyberte Otevřít Visual Studio Code.

Zkopírujte následující ukázkový fragment kódu a vložte jej mezi značky <div></div> v sekci stránky.

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

Vložení kódu.

Kód uložíte kombinací kláves CTRL-S.
V návrhovém studiu volbou Synchronizovat přidáte úpravy kódu na web.

Krok 4. Čtení, zobrazování, úpravy, vytváření a odstraňování obsahu pomocí webového rozhraní API

Testování funkčnosti webového rozhraní API:

Vyberte Náhled a pak vyberte Desktop.
Přihlaste se ke svému webu pomocí uživatelského účtu, kterému byla přiřazena role Uživatel webového rozhraní API, kterou jste vytvořili dříve.
Přejděte na webovou stránku WebAPI vytvořenou dříve.
Volbou Přidat ukázkový záznam přidejte ukázkový záznam ze skriptu.
Vyberte pole. V tomto příkladu jsme vybrali E-mail, abychom změnili e-mailovou adresu kontaktu.
Výběrem ikony Odstranit odstraníte záznam.