Tutorial: Portale-Web-API verwenden

Artikel
03/16/2023

Hinweis

Ab 12. Oktober 2022 ist Power Apps-Portale Power Pages. Weitere Informationen: Microsoft Power Pages ist jetzt allgemein verfügbar (Blog)
Wir werden die in Kürze migrieren und die Dokumentation für Power Apps-Portale mit der Power Pages-Dokumentation zusammenführen.

In diesem Tutorial werden Sie eine Webseite und eine angepasste Webvorlage festlegen, die die Web-API zum Lesen, Schreiben, Aktualisieren und Löschen von Datensätzen aus der Kontakttabelle verwendet.

Hinweis

Sie können die Spaltennamen ändern oder eine andere Tabelle verwenden, während Sie die Schritte in diesem Beispiel befolgen.

Schritt 1. Erstellen von Website-Einstellungen

Bevor Sie die Web-API für Portale verwenden können, müssen Sie die erforderlichen Website-Einstellungen mit der Portalverwaltungs-App aktivieren. Die Website-Einstellungen hängen von der Tabelle ab, die Sie für die Interaktion mit der Web-API verwenden möchten.

Wechseln Sie zu Power Apps.
Wählen Sie im linken Bereich Apps aus.
Wählen Sie die App Portalverwaltungs aus.
Wählen Sie im linken Fensterbereich der App Portalverwaltung die Option Site-Einstellungen.
Wählen Sie Neu aus.
Geben Sie im Feld Name Webapi/contact/enabled ein.
Wählen Sie aus der Liste Website Ihren Websitedatensatz aus.
Geben Sie im Feld Wert den Wert wahr ein.
Wählen Sie Speichern und schließen aus.
Wählen Sie Neu aus.
Geben Sie im Feld Name Webapi/contact/fields ein.
Wählen Sie aus der Liste Website Ihren Websitedatensatz aus.
Geben Sie im Feld Wert ein
firstname,lastname,fullname,emailaddress1,telephone1 ein.
Wählen Sie Speichern und schließen aus.
Wählen Sie Neu aus.
Geben Sie im Feld Name Webapi/error/innererror ein.
Wählen Sie aus der Liste Website Ihren Websitedatensatz aus.
Geben Sie im Feld Wert den Wert wahr ein.
Wählen Sie Speichern und schließen aus.
Website-Einstellungen für die Web-API überprüfen.

Schritt 2. Berechtigungen konfigurieren

Sie müssen Berechtigungen konfigurieren, damit Benutzer die Web-API-Funktion verwenden können. In diesem Beispiel aktivieren Sie die Tabelle Kontakt für Tabellenberechtigungen, erstellen eine Web-Rolle mit der Web-API, fügen die Tabellenberechtigungen für die Tabelle Kontakt zu dieser Web-Rolle hinzu und fügen die Web-Rolle dann den Benutzern hinzu, um ihnen die Nutzung der Web-API zu erlauben.

Wählen Sie im linken Fensterbereich der App Portalverwaltung die Option Tabellenberechtigungen aus.
Wählen Sie Neu aus.
Geben Sie im Feld Name Berechtigung für Kontakttabelle ein.
Wählen Sie in der Liste Tabellenname die Option Kontakt (Kontakt) aus.
Wählen Sie aus der Liste Website Ihren Websitedatensatz aus.
Wählen Sie Global in der Liste Zugriffstyp aus.
Wählen Sie die Berechtigungen Lesen, Schreiben, Erstellen und Löschen.
Wählen Sie Speichern und schließen aus.

Webrolle erstellen

Sie können eine vorhandene Webrolle auf Ihrer Website verwenden oder eine neue Webrolle erstellen.

Wählen Sie im linken Bereich Webrollen aus.
Wählen Sie Neu aus.
Geben Sie im Name -Feld Web-API-Benutzer (oder einen beliebigen Namen, der die Rolle des Benutzers, der auf diese Funktion zugreift, am besten widerspiegelt) ein.
Wählen Sie aus der Liste Website Ihren Websitedatensatz aus.
Klicken Sie auf Speichern.

Verknüpfte Tabellenberechtigungen hinzufügen

Wählen Sie mit der neuen oder vorhandenen Webrolle Verknüpft > Tabellenberechtigungen aus.
Wählen Sie Vorhandene Tabellenberechtigung hinzufügen aus.
Wählen Sie die zuvor erstellte Berechtigung für Kontakttabelle aus.
Klicken Sie auf Hinzufügen.
Wählen Sie Speichern und schließen aus.

Der Webrolle Kontakte hinzufügen

Wählen Sie im linken Bereich Kontakte aus.
Wählen Sie einen Kontakt aus, den Sie in diesem Beispiel für die Web-API verwenden möchten.

Hinweis

Dieser Kontakt ist das Benutzerkonto, das in diesem Beispiel zum Testen der Web-API verwendet wird. Stellen Sie sicher, dass Sie den richtigen Kontakt in Ihrem Portal auswählen.
Wählen Sie Zugehörig > Webrollen aus.
Wählen Sie Vorhandene Webrolle hinzufügen aus.
Wählen Sie die vorhin erstellte Rolle Web-API-Benutzer aus.
Klicken Sie auf Hinzufügen.
Wählen Sie Speichern und schließen aus.

Schritt 3. Webseite erstellen

Nachdem Sie die Web-API aktiviert und die Benutzerberechtigungen konfiguriert haben, erstellen Sie eine Webseite mit Beispielcode zum Anzeigen, Bearbeiten, Erstellen und Löschen von Datensätzen.

Wählen Sie im linken Bereich der App Portalverwaltung die Option Webseiten.
Wählen Sie Neu aus.
Geben Sie in das Feld Name webapi ein.
Wählen Sie aus der Website-Liste Ihren Websitedatensatz aus.
Wählen Sie als Übergeordnete Seite Start aus.
Geben Sie als Teil-URL webapi ein.
Wählen Sie als Seitenvorlage Start aus.
Als Veröffentlichungsstatus wählen Sie Veröffentlicht aus.
Wählen Sie Speichern aus.
Wählen Sie Zugehörig > Webseiten aus.
In der Webseitenassoziierten Ansicht wählen Sie webapi.
Scrollen Sie nach unten zum Abschnitt Inhalt und gehen Sie dann zu Kopieren (HTML) (HTML-Designer).
Wählen Sie die Registerkarte HTML aus.

Kopieren Sie den folgenden Beispielcodeausschnitt und fügen Sie ihn in den HTML-Designer ein.

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

Code einfügen.

Wählen Sie Speichern und schließen aus.

Schritt 4. Den Cache der Portale leeren

Sie haben eine webapi Beispielseite zum Testen der Web-API-Funktionalität erstellt. Bevor Sie beginnen, stellen Sie sicher, dass der Cache des Power Apps-Portals geleert wurde, sodass die Änderungen aus der Portalverwaltungs-App in Ihrem Portal angezeigt werden.

WICHTIG: Das Löschen des serverseitigen Cache des Portals führt zu einer vorübergehenden Leistungsverschlechterung des Portals, während die Daten von Microsoft Dataverse neu geladen werden.

Leeren Sie den Cache wie folgt:

Melden Sie sich in Ihrem Portal als Mitglied der Administratoren-Webrolle an.
Ändern Sie die URL, indem Sie /_‑services/about an das Ende anhängen. Wenn die Portal-URL zum Beispiel https://contoso.powerappsportals.com lautet, ändern Sie sie in https://contoso.powerappsportals.com/_services/about.

HINWEIS: Sie müssen Mitglied der Webrolle Administratoren sein, um den Cache leeren zu können. Wenn ein leerer Bildschirm angezeigt wird, überprüfen Sie die Webrollen-Zuweisungen.
Wählen Sie Cache löschen aus.

Weitere Informationen: Löschen des serverseitigen Caches für ein Portal

Schritt 5. Verwenden Sie die Web-API, um zu lesen, anzuzeigen, zu bearbeiten, zu erstellen und zu löschen

Die zuvor erstellte Beispiel-Webseite mit der URL webapi ist nun bereit zum Testen.

So testen Sie die Web-API-Funktionalität:

Melden Sie sich bei Ihrem Portal mit dem Benutzerkonto an, dem die Web-API-Benutzerrolle zugewiesen wurde, die Sie zuvor erstellt haben.
Gehen Sie zur vorher erstellten Webseite webapi. Zum Beispiel: https://contoso.powerappsportals.com/webapi. Die WebAPI ruft Datensätze von Micrsoft Dataverse ab.
Wählen Sie Beispieldatensatz hinzufügen aus, um den Beispieldatensatz aus dem Skript hinzuzufügen.
Wählen Sie ein Feld aus. In diesem Beispiel haben wir E-Mail ausgewählt, um die E-Mail-Adresse eines Kontakts zu ändern.
Wählen Sie die Schaltfläche , um einen Datensatz zu löschen.

Nachdem Sie nun eine Webseite mit einem Beispiel zum Lesen, Bearbeiten, Erstellen und Löschen von Datensätzen erstellt haben, können Sie die Formulare und das Layout anpassen.

Nächster Schritt

HTTP-Anforderungen erstellen und Fehlern behandeln

Siehe auch

Übersicht über Web-API für Portale
Portale Schreib-, Aktualisierungs- und Löschvorgänge über die Web-API
Portale Lesevorgänge über die Web-API
Spaltenberechtigungen konfigurieren

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).

Share via

Tutorial: Portale-Web-API verwenden

Schritt 1. Erstellen von Website-Einstellungen

Schritt 2. Berechtigungen konfigurieren

Webrolle erstellen

Verknüpfte Tabellenberechtigungen hinzufügen

Der Webrolle Kontakte hinzufügen

Schritt 3. Webseite erstellen

Schritt 4. Den Cache der Portale leeren

Schritt 5. Verwenden Sie die Web-API, um zu lesen, anzuzeigen, zu bearbeiten, zu erstellen und zu löschen

Nächster Schritt

Siehe auch

Feedback

Zusätzliche Ressourcen