Anleitung: Portale-Web-API verwenden

In dieser Anleitung 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.

Anmerkung

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.

1. Starten Sie die Portalverwaltungs-App.

2. Wählen Sie im linken Fensterbereich der App Portalverwaltung die Option Site-Einstellungen.

   

3. Wählen Sie Neu aus.

4. Geben Sie im Feld NameWebapi/contact/enabled ein.

5. Wählen Sie aus der Website-Liste Ihren Websitedatensatz aus.

6. Geben Sie im Feld Wert den Wert wahr ein.

   

7. Wählen Sie Speichern und schließen aus.

8. Wählen Sie Neu aus.

9. Geben Sie im Feld NameWebapi/contact/fields ein.

10. Wählen Sie aus der Website-Liste Ihren Websitedatensatz aus.

11. Geben Sie im Feld Wert
    firstname,lastname,fullname,emailaddress1,telephone1 ein.

    

12. Wählen Sie Speichern und schließen aus.

13. Wählen Sie Neu aus.

14. Geben Sie im Feld NameWebapi/error/innererror ein.

    

15. Wählen Sie aus der Website-Liste Ihren Websitedatensatz aus.

16. Geben Sie im Feld Wert den Wert wahr ein.

17. Wählen Sie Speichern und schließen aus.

18. 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 müssen Sie eine neue Webrolle einstellen oder erstellen, die eine Web-API verwendet. Als Nächstes fügen Sie die Tabellenberechtigungen für die Tabelle Kontakt hinzu und verknüpfen die Tabellenberechtigungen mit der Web-Rolle. Zu guter Letzt ordnen Sie die Web-Rolle dann den Benutzern hinzu, um ihnen die Nutzung der Web-API zu erlauben.

Anmerkung

Die Web-API folgt Tabellenberechtigungen, die aus dem Web-Rollen-Kontext des authentifizierten Benutzers oder der anonymen Web-Rolle stammen. Überlegen Sie, ob Ihre Benutzer bereits über eine Web-Rolle verfügen, die Zugriff auf die spezifischen Tabellen Ihrer Website hat, die von der Web-API benötigt werden. Sie brauchen keine zusätzlichen Web-Rollen zu erstellen, um die Web-API zu nutzen.

Webrolle erstellen

Wenn Sie derzeit nicht über eine Web-Rolle mit Berechtigungen für die Tabelle verfügen, auf die Sie über die Web-API zugreifen, oder einen anderen Kontext für den Zugriff auf die Daten benötigen, können Sie mit den folgenden Schritten eine neue Web-Rolle erstellen und Tabellenberechtigungen zuweisen.

1. Starten Sie die Portalverwaltungs-App.

2. Wählen Sie im linken Bereich im Abschnitt SicherheitWebrolle aus.

3. Wählen Sie Neu.

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

5. Wählen Sie aus der Website-Liste Ihren Websitedatensatz aus.

   

6. Wählen Sie Speichern.

Tabellenberechtigungen erstellen

1. Starten Sie Power Pages Designstudio.

2. Wählen Sie den Arbeitsbereich Einrichten aus.

3. Wählen Sie unter Abschnitt Sicherheit die Option Tabellenberechtigungen aus.

4. Wählen Sie Neuer Berechtigung aus.

5. Geben Sie im Feld NameBerechtigung für Kontakttabelle ein.

6. Wählen Sie in der Liste Tabellenname die Option Kontakt (Kontakt) aus.

7. Wählen Sie Global in der Liste Zugriffstyp aus.

8. Wählen Sie die Berechtigungen Lesen, Schreiben, Erstellen und Löschen.

9. Wählen Sie + Rollen hinzufügen und die Webrolle aus, die Sie zuvor ausgewählt oder erstellt haben.

10. Wählen Sie Speichern und schließen aus.

    

Der Webrolle Kontakte hinzufügen

1. Starten Sie die Portalverwaltungs-App.

2. Wählen Sie im linken Bereich im Abschnitt SicherheitKontakte aus.

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

   Anmerkung

   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.

4. Wählen Sie Zugehörig>Webrollen aus.

   

5. Wählen Sie Vorhandene Webrolle hinzufügen aus.

6. Wählen Sie die vorhin erstellte Web-API-Benutzerrolle aus.

7. Wählen Sie Hinzufügen.

   

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

1. Starten Sie Power Pages Designstudio.

2. Wählen Sie im Arbeitsbereich Seiten die Option + Seite aus.

3. Gehen Sie im Dialogfeld Seite hinzufügen wie folgt vor:

4. Wählen Sie im Dialogfeld Name aus, geben Sie WebAPI ein und wählen Sie das Layout Ohne Vorlage starten aus.

5. Wählen Sie Hinzufügen aus.

6. Klicken Sie auf die Option Code bearbeiten in der oberen rechten Ecke.

7. Wählen Sie Visual Studio Code öffnen aus.

8. Kopieren Sie das folgende Beispielcode-Snippet und fügen Sie es zwischen den <div></div>-Tags des Seitenabschnitts 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>
   

   

9. Wählen Sie CTRL-S, um den Code zu speichern.

10. Wählen Sie im Designstudio Synchronisieren aus, um die Website mit dem bearbeiteten Code zu aktualisieren.

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

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

1. Wählen Sie Vorschau und anschließend Desktop aus.

2. Melden Sie sich bei Ihrer Website mit dem Benutzerkonto an, dem die Web-API-Benutzerrolle zugewiesen wurde, die Sie zuvor erstellt haben.

3. Gehen Sie zur vorher erstellten Webseite WebApi aus.

   

4. Wählen Sie Beispieldatensatz hinzufügen aus, um den Beispieldatensatz aus dem Skript hinzuzufügen.

5. Wählen Sie ein Feld aus. In diesem Beispiel haben wir E-Mail ausgewählt, um die E-Mail-Adresse eines Kontakts zu ändern.

   

6. Wählen Sie das Symbol Löschen aus, 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

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