Självstudier: Använda webb-API:et med portaler

Artikel
03/15/2023

Anteckning

Från och med den 12 oktober 2022 byter Power Apps-portaler namn till Power Pages. Mer information: Microsoft Power Pages är nu allmänt tillgänglig (blogg)
Vi kommer snart migrera och sammanfoga dokumentationen för Power Apps-portaler med Power Pages-dokumentationen.

I den här självstudien skapar du en webbsida och en anpassad webbmall som använder webb-API:t för att läsa, skriva, uppdatera och ta bort poster från kontakttabellen.

Anteckning

Du kan ändra kolumnnamnen eller använda en annan tabell och följa stegen i det här exemplet.

Steg 1. Skapa webbplatsinställningar

Innan du kan använda webb-API:t för portalerna måste du aktivera de webbplatsinställningar som krävs i programmet Portalhantering. Webbplatsinställningarna beror på tabellen som du vill använda när du interagerar med webb-API:et.

Gå till Power Apps.
I vänstra fönstret väljer du Appar.
Välj programmet Portalhantering .
I vänster fönster av programmet Portalhantering väljer du Webbplatsinställningar.
Välj Nytt.
I rutan Namn anger du Webbapi/kontakt/aktiverad.
I listan Webbplats väljer du din webbplatspost.
I rutan Värde anger du sant.
Välj Spara och stäng.
Välj Nytt.
I rutan Namn anger du Webbapi/kontakt/fält.
I listan Webbplats väljer du din webbplatspost.
I rutan Värde anger du
förnamn,efternamn,fullständigtnamn,epostadress1,telefon1
Välj Spara och stäng.
Välj Nytt.
I rutan Namn anger du Webbapi/fel/interntfel.
I listan Webbplats väljer du din webbplatspost.
I rutan Värde anger du sant.
Välj Spara och stäng.
Verifiera webbplatsinställningarna för webb-API.

Steg 2. Konfigurera behörigheter

Du måste konfigurera behörigheter så att användarna kan använda webb-API-funktionen. I det här exemplet ska du aktivera tabellen Kontakt för tabellbehörigheter, skapa en webbroll med webb-API:t, lägga till tabellbehörigheter för tabellen Kontakt till den här webbrollen och sedan lägga till webbrollen till användare för att låta dem använda webb-API:t.

I vänster fönster av programmet Portalhantering väljer du Tabellbehörigheter.
Välj Nytt.
I rutan Namn ange Behörighet för kontakttabell.
I listan Tabellnamn , välj Kontakt (kontakt).
I listan Webbplats väljer du din webbplatspost.
I listan Åtkomsttyp väljer du Global.
Välj behörigheterna läsa, skriv, skapa och ta bort.
Välj Spara och stäng.

Skapa en webbroll

Du kan använda en befintlig webbroll på webbplatsen eller skapa en ny webbroll.

I den vänstra rutan väljer du Webbroller .
Välj Nytt.
I rutan Namn , ange Webb-API-användare (eller vilket namn som helst som bäst återspeglar rollen för användaren som använder den här funktionen).
I listan Webbplats väljer du din webbplatspost.
Välj Spara.

Lägg till relaterade tabellbehörigheter

Med den nya eller befintliga webbrollen väljer du Relaterad > Tabellbehörigheter.
Välj Lägg till befintlig tabellbehörighet.
Välj kontakttabellbehörighet, skapad tidigare.
Markera Lägga till.
Välj Spara och stäng.

Lägg till kontakter i webbrollen

I den vänstra rutan väljer du Kontakter.
Välj en kontakt som du vill använda i det här exemplet för webb-API:t.

Anteckning

Den här kontakten är användarkontot som används i det här exemplet för att testa webb-API:t. Kontrollera att du väljer rätt kontakt på portalen.
Välj Relaterad > Webbroller.
Välj Lägg till befintlig webbroll.
Välj rollen Webb-API-användare som skapats tidigare.
Markera Lägga till.
Välj Spara och stäng.

Steg 3. Skapa webbsida

Nu när du har aktiverat webb-API:t och konfigurerat användarbehörigheterna skapar du en webbsida med exempelkod som du kan använda för att visa, redigera, skapa och ta bort poster.

I vänster fönster av programmet Portalhantering väljer du Webbsidor.
Välj Nytt.
I rutan Namn anger du Webb-API.
I listan Webbplats väljer du din webbplatspost.
För Överordnad sida väljer du Hem.
För Partiell URL anger du webapi.
För Sidmall väljer du Hem.
För Publiceringstillstånd väljer du Publicerad.
Välj Spara.
Välj Relaterad > Webbsidor.
Från associerad vyn webbsida väljer du webapi.
Bläddra ned till avsnittet Innehåll och gå sedan till Kopiera (HTML) (HTML-designer).
Välj fliken HTML.

Kopiera följande exempelkodavsnitt och klistra in det i HTML-designer.

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

Klistra in kod.

Välj Spara och stäng.

Steg 4. Rensa portalens cacheminne

Du har skapat en webapi exempelsida där du kan testa webb-API-funktionerna. Innan du börjar ska du se till att Power Apps-portalens cacheminne har rensats så att ändringarna från programmet Portalhantering återspeglas på portalen.

VIKTIGT: Rensning av portalens cacheminne på serversidan orsakar tillfälliga prestandaproblem i portalen när data läses in på nytt från Microsoft Dataverse.

Rensa cacheminnet:

Logga in på portalen som medlem i webbrollen Administratörer.
Ändra URL genom att lägga till /_tjänster/om på slutet. Till exempel om portalens URL är https://contoso.powerappsportals.com, ändra den till https://contoso.powerappsportals.com/_services/about.

OBS! Du måste vara medlem i webbrollen Administratörer för att rensa cacheminnet. Om du ser en tom skärmbild kontrollerar du webbrollens tilldelningar.
Välj Rensa cacheminne.

Mer information: Rensa cacheminnet på serversidan för en portal

Steg 5. Med webb-API kan du läsa, visa, redigera, skapa och ta bort

Exempelwebbsidan med URL webbapi som skapades tidigare kan nu testas.

Så här testar du webb-API-funktioner:

Logga in på portalen med användarkontot som har tilldelats rollen Webb-API-användare som du skapade tidigare.
Gå till webbsidan för webbapi som skapades tidigare. Exempel: https://contoso.powerappsportals.com/webapi Webb-API hämtar poster från Microsoft Dataverse.
Välj Lägg till exempelpost om du vill lägga till exempelposten från skriptet.
Välj ett fält. I det här exemplet har vi valt E-post för att ändra e-postadressen för en kontakt.
Välj för att ta bort en post.