Návod: Použitie webového rozhrania API portálu

Článok
10/16/2024

V tomto návode vytvoríte webovú stránku a vlastnú webovú šablónu, ktorá bude používať webové rozhranie API na čítanie, zápis, aktualizáciu a odstraňovanie záznamov z tabuľky kontaktov.

Poznámka

Pri postupe podľa krokov v tomto príklade môžete zmeniť názvy stĺpcov alebo použiť inú tabuľku.

Krok č. 1: Vytvoriť nastavenia lokality

Predtým, ako budete môcť používať webové rozhranie API portálov, musíte povoliť požadované nastavenia stránok pomocou aplikácie Portal Management. Nastavenia lokality závisia od tabuľky, ktorú chcete použiť pri interakcii s webovým rozhraním API.

Spustite aplikáciu Správa portálu.
Na ľavej table v aplikácii Správa portálu vyberte Nastavenia lokality.
Vyberte Nové.
V poli Názov zadajte Webapi/contact/enabled.
V zozname Webová lokalita si vyberte záznam vašej webovej lokality.
Do poľa Hodnota zadajte true.
Vyberte Uložiť & Zavrieť.
Stlačte možnosť Nové.
V poli Názov zadajte Webapi/contact/fields.
V zozname Webová lokalita si vyberte záznam vašej webovej lokality.
V políčku Hodnota zadajte
meno,priezvisko,cele meno,e-mailová adresa1,telefón1
Vyberte Uložiť & Zavrieť.
Stlačte možnosť Nové.
V poli Názov zadajte Webapi/error/innererror.
V zozname Webová lokalita si vyberte záznam vašej webovej lokality.
Do poľa Hodnota zadajte true.
Vyberte Uložiť & Zavrieť.
Overte nastavenia webu pre Web API.

Krok č. 2. Konfigurácia povolení

Budete musieť nakonfigurovať povolenia, aby používatelia mohli používať funkciu webového rozhrania API. V tomto príklade budete musieť nastaviť alebo vytvoriť novú webovú rolu, ktorá bude používať webové rozhranie API, ďalej pridáte oprávnenia tabuľky pre tabuľku Kontakt a priradíte oprávnenie tabuľky k webovej role a nakoniec priradíte webovú rolu používateľom, aby mohli používať webové rozhranie API.

Poznámka

Nasleduje webové rozhranie API oprávnení tabuľky pochádzajúcich z kontextu webovej roly overeného používateľa alebo anonymnej webovej roly. Zvážte, či vaši používatelia už majú webovú rolu, ktorá má prístup ku konkrétnym tabuľkám na vašej webovej lokalite, ktoré vyžaduje webové rozhranie API. Ak chcete používať webové rozhranie API, nemusíte vytvárať ďalšie webové roly.

Vytvorenie webovej roly

Ak momentálne nemáte webovú rolu s povoleniami na tabuľku, ku ktorej pristupujete cez webové rozhranie API, alebo požadujete iný kontext prístupu k údajom, postupujte podľa nasledujúcich krokov, aby ste vytvorili novú webovú rolu a pridelili povolenia pre tabuľku.

Spustite aplikáciu Správa portálu.
Na ľavej table v časti Zabezpečenie vyberte Webové roly.
Vyberte Nové.
V poli Názov zadajte Používateľ webového rozhrania API (alebo akýkoľvek názov, ktorý najlepšie odráža rolu používateľa pristupujúceho k tejto funkcii).
V zozname Webová lokalita si vyberte záznam vašej webovej lokality.
Vyberte položku Uložiť.

Vytvorenie povolení tabuľky

Spustite Power Pages dizajnérske štúdio.
Vyberte pracovný priestor Zabezpečenie .
V časti Chrániť vyberte Povolenia tabuľky.
Vyberte Nové povolenie.
V poli Názov zadajte Povolenie tabuľky kontaktu.
V zozname Názov tabuľky vyberte Kontakt (kontakt).
V zozname Typ prístupu vyberte položku Globálny.
Označte oprávnenia Čítať, Zápis, Vytvorenie a odstránenie.
Vyberte + Pridať roly a vyberte webovú rolu, ktoré ste si vybrali alebo vytvorili predtým.
Vyberte Uložiť & Zavrieť.

Pridanie kontaktov do webovej roly

Spustite aplikáciu Správa portálu.
Na ľavej table v časti Zabezpečenie vyberte Kontakty.
Zvoľte kontakt, ktorý chcete v tomto príklade použiť pre Web API.

Poznámka

Tento kontakt je používateľský účet použitý v tomto príklade na testovanie webového rozhrania API. Nezabudnite na svojom portáli zvoliť správny kontakt.
Zvoľte možnosť Súvisiace>Webové roly.
Vyberte Pridať existujúcu webovú rolu.
Stlačte rolu Používateľ webového rozhrania API vytvorenú predtým.
Stlačte možnosť Pridať.
Vyberte Uložiť & Zavrieť.

Krok č. 3. Vytvorte webovú stránku

Teraz, keď ste povolili webové rozhranie API a nakonfigurovali oprávnenia používateľov, vytvorte webovú stránku so vzorovým kódom na prezeranie, úpravu, vytváranie a odstraňovanie záznamov.

Spustite Power Pages dizajnérske štúdio.
V pracovnom priestore Stránky vyberte možnosť + Stránka.
V dialógovom okne Pridať stránku,
Do poľa Názov zadajte WebAPI a vyberte Začať od prázdneho rozloženia.
Stlačte možnosť Pridať.
Vyberte možnosť Upraviť kód v pravom hornom rohu.
Vyberte Otvoriť Visual Studio Code.

Skopírujte nasledujúci vzorový zlomok kódu a vložte ho medzi značky <div></div> v sekcii 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>

Prilepte kód.

Výberom položky CTRL-S uložte kód.
V dizajnérskom štúdiu vyberte Synchronizáciu na aktualizáciu lokality úpravami kódu.

Krok č. 4. Pomocou webového rozhrania API môžete prehliadať, upravovať, vytvárať a mazať

Testovanie funkčnosti webového rozhrania API:

Vyberte Náhľad a potom zvoľte možnosť Pracovná plocha.
Prihláste sa na svoju lokalitu pomocou používateľského účtu, ktorému bolo pridelená rola Používateľ webového rozhrania API, ktorú ste predtým vytvorili.
Prejdite na predtým vytvorenú webovú stránku WebApi.
Zvoľte možnosť Pridať ukážkový záznam na pridanie ukážkového záznamu zo skriptu.
Vybrať pole. V tomto príklade sme vybrali E-mail na zmenu e-mailovej adresy kontaktu.
Stlačením ikony Odstrániť vymažte záznam.

Teraz, keď ste vytvorili webovú stránku so vzorkou na čítanie, úpravu, vytváranie a odstraňovanie záznamov, môžete prispôsobiť formuláre a rozloženie.

Nasledujúci krok

Vytvárajte požiadavky HTTP a spracovávajte chyby

Zdieľať cez