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

Článok
03/14/2023

Poznámka

S účinnosťou od 12. októbra 2022 sa portály Power Apps nazývajú Power Pages. Ďalšie informácie: Služba Microsoft Power Pages je teraz všeobecne dostupná (blog)
Čoskoro vykonáme migráciu a zlúčenie dokumentácie k portálom Power Apps s dokumentáciou k službe Power Pages.

V tomto kurze 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.

Ísť do Power Apps.
Na ľavej table vyberte Aplikácie.
Vyberte aplikáciu Správa portálu .
Na ľavej table aplikácie Správa portálu vyberte Nastavenia lokality.
Vyberte Nové.
Do poľa Názov zadajte Webapi/contact/enabled.
V zozname Webová lokalita vyberte záznam svojej webovej lokality.
Do poľa Hodnota zadajte pravda.
Vyberte Uložiť & Zavrieť.
Vyberte Nové.
Do poľa Názov zadajte Webapi/contact/fields.
V zozname Webová lokalita vyberte záznam svojej webovej lokality.
Do poľa Hodnota zadajte
firstname,lastname,fullname,emailaddress1,telephone1
Vyberte Uložiť & Zavrieť.
Vyberte Nové.
Do poľa Názov zadajte Webapi/error/innererror.
V zozname Webová lokalita vyberte záznam svojej webovej lokality.
Do poľa Hodnota zadajte pravda.
Vyberte Uložiť & Zavrieť.
Overte nastavenia lokality 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 aktivujete tabuľku Kontakt pre povolenia tabuľky, vytvoríte webovú rolu na používanie webového rozhrania API, pridáte povolenia tabuľky pre tabuľku Kontakt do tejto webovej roly a potom pridáte webovú rolu používateľom, aby mohli používať webové rozhranie API.

Na ľavej table aplikácie Správa portálu vyberte Povolenia tabuľky.
Vyberte Nové.
Do poľa Meno zadajte Povolenie tabuľky kontaktov.
V zozname Názov tabuľky vyberte Kontakt (kontakt).
V zozname Webová lokalita vyberte záznam svojej webovej lokality.
V zozname Typ prístupu vyberte Globálne.
Označte oprávnenia Čítať, Zápis, Vytvorenie a odstránenie.
Vyberte Uložiť & Zavrieť.

Vytvorenie webovej roly

Vo svojej webovej lokalite môžete použiť existujúcu webovú rolu alebo vytvoriť novú webovú rolu.

Na ľavej table vyberte Webové roly .
Vyberte Nové.
Do poľa Názov zadajte Používateľa webového rozhrania API (alebo akékoľvek meno, ktoré najlepšie odráža rolu používateľa, ktorý pristupuje táto funkcia).
V zozname Webová lokalita vyberte záznam svojej webovej lokality.
Vyberte Uložiť.

Pridanie súvisiacich povolení tabuľky

S novou alebo existujúcou webovou rolou vyberte Súvisiace > Povolenia tabuľky.
Vyberte Pridať oprávnenie na existujúcu tabuľku.
Vyberte Povolenie tabuľky kontaktov, ktoré bolo vytvorené skôr.
Vyberte Pridať.
Vyberte Uložiť & Zavrieť.

Pridanie kontaktov do webovej roly

Na ľavej table 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.
Vyberte Súvisiace > Webové roly.
Vyberte Pridať existujúcu webovú rolu.
Vyberte rolu Používateľ webového rozhrania API , ktorá bola vytvorená skôr.
Vyberte 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.

Na ľavej table aplikácie Správa portálu vyberte Webové stránky.
Vyberte Nové.
V poli Názov zadajte webapi.
V zozname Webová lokalita si vyberte záznam vašej webovej lokality.
Pri Nadradená stránka zvoľte možnosť Domov.
Pre Čiastočná adresa URL zadajte webapi.
Pri Šablóna stránky zvoľte možnosť Domov.
Pre Stav publikovania stlačte možnosť Publikované.
Vyberte Uložiť.
Zvoľte možnosť Súvisiace > Webové stránky.
Na Priradené zobrazenie webových stránok, vyberte webapi.
Posuňte zobrazenie nadol na Obsah a potom prejdite na Kopírovať (HTML) (Návrhár HTML).
Vyberte kartu HTML.

Skopírujte nasledujúci vzorový úryvok kódu a vložte ho do návrhára HTML.

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

Vyberte položku Uložiť a zavrieť.

Krok č. 4. Vymazanie vyrovnávacej pamäte portálov

Vytvorili ste webapi vzorovú stránku na testovanie funkčnosti webového rozhrania API. Skôr ako začnete, uistite sa, že Power Apps vyrovnávacia pamäť portálov bola vymazaná, aby sa zmeny v aplikácii správy portálu prejavili na vašom portáli.

DÔLEŽITÉ: Vymazanie vyrovnávacej pamäte na strane servera spôsobí dočasné zníženie výkonu portálu, kým sa údaje znova nenačítajú z Microsoft Dataverse.

Vymazanie vyrovnávacej pamäte:

Prihláste sa na svoj portál ako člen webovej roly Správcovia.
Zmeňte URL tak, že na koniec pridáte /_ services/about . Ak je napríklad adresa URL portálu https://contoso.powerappsportals.com, zmeňte ju na https://contoso.powerappsportals.com/_services/about.

POZNÁMKA: Ak chcete vymazať vyrovnávaciu pamäť, musíte byť členom webovej roly Administrátori . Ak vidíte prázdnu obrazovku, skontrolujte priradenia webových rolí.
Vyberte Vymazať vyrovnávaciu pamäť.

Ďalšie informácie: Vymažte vyrovnávaciu pamäť portálu na strane servera

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

Ukážková webová stránka s adresou URL webapi vytvorenou skôr, je teraz pripravené na testovanie.

Testovanie funkčnosti webového rozhrania API:

Prihláste sa na svoj portál pomocou používateľského účtu, ktorému bolo pridelená rola Používateľ webového rozhrania API, ktorú ste vytvorili predtým.
Prejdite na predtým vytvorenú webovú stránku webapi. Napríklad:https://contoso.powerappsportals.com/webapi WebAPI získa záznamy z Microsoft Dataverse.
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.
Výberom odstránite 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.

Ďalší krok

Tvorba požiadaviek HTTP a spracovanie chýb

Pozrite si tiež

Prehľad webového rozhrania API portálov
Operácie zápisu, aktualizácie a odstránenia portálov pomocou webového rozhrania API
Operácie čítania portálov pomocou webového rozhrania API
Konfigurácia povolení stĺpcov

Poznámka

Môžete nás informovať o svojich voľbách jazyka pre dokumentáciu? Absolvujte krátky prieskum. (upozorňujeme, že tento prieskum je v angličtine)

Prieskum bude trvať približne sedem minút. Nezhromažďujú sa žiadne osobné údaje (vyhlásenie o používaní osobných údajov).

Zdieľať cez

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

Krok č. 1: Vytvoriť nastavenia lokality

Krok č. 2. Konfigurácia povolení

Vytvorenie webovej roly

Pridanie súvisiacich povolení tabuľky

Pridanie kontaktov do webovej roly

Krok č. 3. Vytvorte webovú stránku

Krok č. 4. Vymazanie vyrovnávacej pamäte portálov

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

Ďalší krok

Pozrite si tiež

Pripomienky

Ďalšie zdroje informácií