Gewusst wie: Interagieren mit externen Diensten mithilfe der Serverlogik

In diesem Leitfaden richten Sie eine Webseite ein, die die Serverlogik zum Lesen, Schreiben, Aktualisieren und Löschen von Datensätzen aus dem httpclient-Serverobjekt für externe Dienste verwendet.

Hinweis

In diesem Beispiel wird https://services.odata.org/TripPinRESTierService verwendet, aber Sie könnten auch andere öffentlich verfügbare kostenlose Testtools nutzen.

Schritt 1: Erstellen einer Serverlogik

  1. Melden Sie sich bei Power Pages an.

  2. Wählen Sie "Website + Bearbeiten" aus.

  3. Navigieren Sie zum Arbeitsbereich einrichten , und wählen Sie dann Serverlogik (Vorschau) aus.

    Screenshot, der zeigt, wo im Arbeitsbereich 'Einrichten' die Serverlogik ausgewählt werden soll.

  4. Wählen Sie +Neue Serverlogik

  5. Geben Sie den Namen für die Serverlogik ein. Dieser Name wird in der API als Ressourcenbezeichner beim Erstellen der Serverlogik-API verwendet. Beispiel:

    Eigentum Beispielwert
    Name services.odata.org
    Anzeigename Performing CRUD operations using OData service

  6. Wählen Sie +Rollen hinzufügen , um eine entsprechende Webrolle zuzuweisen. Administratorrolle in Serverlogik hinzugefügt Wählen Sie in diesem Beispiel "Administratoren" aus, und melden Sie sich später als Administrator an, um fortzufahren.

  7. Wählen Sie Hinzufügen aus.

  8. Wählen Sie die Serverlogik aus, und wählen Sie "Code bearbeiten" aus.

    Bearbeitungscode auswählen

  9. Wählen Sie im Dialogfeld " In Microsoft Visual Studio Code für das Web bearbeiten" die Option "Visual Studio Code öffnen " aus, um die benutzerdefinierte Logik zu erstellen.

    Sie finden vordefinierte Methoden und Skripts in der Datei.

  10. Definieren Sie die Serverlogikmethode zum Lesen, Bearbeiten, Erstellen, Löschen von Vorgängen mit externem Dienst.

    Fügen Sie vor der baseUrl Methode die folgende get() Konstante hinzu.

    
 const baseUrl  = "https://services.odata.org/TripPinRESTierService";

  11. Ersetzen Sie die Beispiel-Funktionen get, post, put und del durch den folgenden Code.

    
async function get() { 
   try { 
      Server.Logger.Log("GET called"); // Logger reference 
      if (!Server.Context.QueryParameters["username"]) { 
            const response = await Server.Connector.HttpClient.GetAsync( 
               `${baseUrl}/People?$select=UserName,FirstName,LastName,MiddleName,Age`, 
               {'content-type':'application/json'}); 
            return response; 
      } 
      else {             
            const id = Server.Context.QueryParameters["username"]; // Context reference 
            const response = await Server.Connector.HttpClient.GetAsync( 
               `${baseUrl}(${id})/People?$select=UserName,FirstName,LastName,MiddleName,Age`, 
               {'content-type':'application/json'}); 
            return response; 
      }         
   } catch (err) { 
      Server.Logger.Error("GET failed: " + err.message); 
      return JSON.stringify({ status: "error", method: "GET", message: err.message }); 
   } 
} 

async function post() { 
   try { 
      Server.Logger.Log("POST called"); 
      const data = JSON.parse(Server.Context.Body);            
      const url = `${baseUrl}/${data.serviceSession}/People`; 
      const { serviceSession, ...body } = data;  
      const response = await Server.Connector.HttpClient.PostAsync( 
            url,  
            JSON.stringify(body), 
            {'content-type':'application/json'}); 
      return response; 
   } catch (err) { 
      Server.Logger.Error("POST failed: " + err.message); 
      return JSON.stringify({ status: "error", method: "POST", message: err.message }); 
   } 
}  

async function put() { 
   try { 
      Server.Logger.Log("PUT called"); 
      const data = JSON.parse(Server.Context.Body);         
      const url = `${baseUrl}/${data.serviceSession}/People('${data.UserName}')`; 
      const { UserName, ...body1 } = data; 
      const { serviceSession, ...body } = body1; 
      const response = await Server.Connector.HttpClient.PatchAsync( 
            url,  
            JSON.stringify(body), 
            {'content-type':'application/json'}); 
      return response; 
   } catch (err) { 
      Server.Logger.Error("PUT failed: " + err.message); 
      return JSON.stringify({ status: "error", method: "PUT", message: err.message }); 
   } 
}    

async function del() { 
   try { 
      // "delete" keyword should not be used in script file. 
      Server.Logger.Log("DEL called"); 
      const username = Server.Context.QueryParameters["username"]; 
      const serviceSession = Server.Context.QueryParameters["serviceSession"]; 
      const url = `${baseUrl}/${serviceSession}/People('${username}')`; 
      const response = await Server.Connector.HttpClient.DeleteAsync( 
            url,  
            {'content-type':'application/json'}); 
      return response; 
   } catch (err) { 
      Server.Logger.Error("Deletion failed: " + err.message); 
      return JSON.stringify({ status: "error", method: "DEL", message: err.message }); 
   } 
}

  12. Speichern Sie die Datei.

    Tipp

    Verwenden Sie STRG+S , um zu speichern.

Schritt 2: Erstellen einer Webseite

  1. Starten Sie das Power Pages-Designstudio.

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

    Hinzufügen einer neuen Seite

  3. Wählen Sie im Dialogfeld "Beschreiben Sie eine Seite, um sie zu erstellen" die Option "Weitere Möglichkeiten zum Hinzufügen einer Seite" aus.

  4. Geben Sie im Dialogfeld "Seite hinzufügen " Details ein.

    1. Geben Sie im Feld "Name " die Serverlogik ein, und wählen Sie "Start" aus dem leeren Layout aus.
    2. Wählen Sie Hinzufügen aus.

    Eingeben von Werten zum Hinzufügen einer Seite

  5. Wählen Sie die Option "Code bearbeiten" in der oberen rechten Ecke aus.

  6. Wählen Sie im Dialogfeld "In Visual Studio Code für das Web bearbeiten" die Option "Visual Studio Code öffnen" aus.

  7. Ersetzen Sie den in der HTML-Seite gefundenen Code durch Folgendes:

    <div class="row sectionBlockLayout text-left" style="min-height: auto; padding: 8px;">
<div class="container" style="display: flex; flex-wrap: wrap;">
   <div class="col-md-12 columnBlockLayout" style="padding: 16px; margin: 60px 0px; min-height: 200px;">
      <!-- Sample code for Web API demonstration -->
      <style>
      #processingMsg {
         padding: 6px 12px;
         background: #eee;
         border-radius: 4px;
         position: fixed;
         top: 10px;
         left: 50%;
         transform: translateX(-50%);
         display: none;
         z-index: 9999;
         text-align: center;
         font-weight: bold;
      }

      table {
         border-collapse: collapse;
         width: 100%;
         margin-top: 10px;
         font-family: Arial, sans-serif;
      }

      th,
      td {
         border: 1px solid #ccc;
         padding: 6px;
         text-align: left;
      }

      button {
         cursor: pointer;
         border: 1px solid #aaa;
         padding: 4px 8px;
         border-radius: 4px;
         background: #fff;
         font-size: 14px;
         margin-right: 2px;
      }

      button.add {
         color: green;
      }

      button.save {
         color: green;
      }

      button.cancel {
         color: orange;
      }

      button.delete {
         color: red;
      }

      input {
         width: 95%;
         box-sizing: border-box;
      }

      td.actions {
         white-space: nowrap;
      }

      td[data-attribute="UserName"] {
         background: #f9f9f9;
         cursor: default;
      }
      </style>

      <div id="processingMsg">Processing...</div>
      <div id="dataTable"></div>

      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script>
      $(function () {

         // Safe WebAPI wrapper for Power Pages
         (function (webapi, $) {
            function safeAjax(opts) {
            var d = $.Deferred();
            shell.getTokenDeferred().done(function (token) {
               opts.headers = opts.headers || {};
               opts.headers["__RequestVerificationToken"] = token;
               $.ajax(opts)
                  .done((data, ts, jq) => validateLoginSession(data, ts, jq, d.resolve))
                  .fail(d.reject);
            }).fail(() => d.rejectWith(this, arguments));
            return d.promise();
            }
            webapi.safeAjax = safeAjax;
         })(window.webapi = window.webapi || {}, jQuery);

         // Notification overlay
         const notify = (() => {
            const $m = $('#processingMsg'); let s = 0, t;
            return {
            show: (msg = 'Processing...') => { $m.text(msg); if (!s) $m.show(); s++; },
            hide: () => { s = Math.max(0, s - 1); if (!s) t = setTimeout(() => $m.hide(), 200); }
            };
         })();

         function ajaxCall(msg, opts) {
            notify.show(msg);
            return webapi.safeAjax(opts)
            .fail(r => alert(r.responseJSON?.error?.message || 'Server error'))
            .always(notify.hide);
         }

         // Table columns
         const cols = [
            { name: 'UserName', label: 'User Name', editable: false },
            { name: 'FirstName', label: 'First Name' },
            { name: 'LastName', label: 'Last Name' },
            { name: 'MiddleName', label: 'Middle Name' },
            { name: 'Age', label: 'Age' }
         ];

         let data = [];
         let serviceSession = '';
         function render() {
            const html = `<table>
            <thead>
               <tr>
                  ${cols.map(c => `<th>${c.label}</th>`).join('')}
                  <th>Actions <button class="add">➕</button></th>
               </tr>
            </thead>
            <tbody>
               ${data.map(r => `<tr data-UserName="${r.UserName}">
                  ${cols.map(c => `<td data-attribute="${c.name}" data-value="${r[c.name] || ''}">
                        ${r[c.name] || ''}
                  </td>`).join('')}
                  <td class="actions">
                        <button class="delete">🗑️</button>
                  </td>
               </tr>`).join('')}
            </tbody>
      </table>`;
            $('#dataTable').html(html);
         }

         // Double click row to edit except username
         $('#dataTable').on('dblclick', 'tr', function () {
            const $tr = $(this);
            if ($tr.hasClass('editing')) return;
            $tr.addClass('editing');
            $tr.find('td[data-attribute]').each(function () {
            const $td = $(this);
            if ($td.data('attribute') === 'UserName') return;
            const old = $td.text().trim();
            $td.html(`<input type="text" value="${old}" data-attr="${$td.data('attribute')}"/>`);
            });
            $tr.find('.actions').append('<button class="save">✅</button><button class="cancel">❌</button>');
         });

         $('#dataTable').on('click', '.save', function () {
            const $tr = $(this).closest('tr');
            const username = $tr.data('username');
            const updates = {};
            $tr.find('input').each(function () {
            const attr = $(this).data('attr');
            let value = $(this).val().trim();

            if (attr === 'Age') {
               value = Number(value);
               if (isNaN(value)) value = null; // safety fallback
            }

            updates[attr] = value;
            });

            ajaxCall('Updating...', {
            type: 'PUT',
            url: `/_api/serverlogics/services.odata.org`,
            contentType: 'application/json',
            data: JSON.stringify(Object.assign({ UserName: username, serviceSession: `${serviceSession}` }, updates)),
            success: () => { Object.assign(data.find(x => x.UserName === username), updates); render(); }
            });
         });

         $('#dataTable').on('click', '.cancel', () => render());

         $('#dataTable').on('click', '.delete', function () {
            const username = $(this).closest('tr').data('username');
            if (!confirm('Delete ' + username + '?')) return;
            ajaxCall('Deleting...', {
            type: 'DELETE',
            url: `/_api/serverlogics/services.odata.org?username=${username}&serviceSession=${serviceSession}`,
            success: () => { data = data.filter(x => x.UserName !== username); render(); }
            });
         });

         $('#dataTable').on('click', '.add', function () {
            const r = {
            serviceSession: `${serviceSession}`,
            UserName: 'user' + Math.floor(Math.random() * 9000 + 1000),
            FirstName: 'New',
            LastName: 'Person',
            MiddleName: '',
            Age: 25
            };
            ajaxCall('Adding...', {
            type: 'POST',
            url: `/_api/serverlogics/services.odata.org`,
            contentType: 'application/json',
            data: JSON.stringify(r),
            success: () => { data.unshift(r); render(); }
            });
         });

         // Initial load
         ajaxCall('Loading...', {
            type: 'GET',
            url: `/_api/serverlogics/services.odata.org`,
            contentType: 'application/json'
         }).done(resp => {
            const parsed = JSON.parse(resp.data);
            const body = JSON.parse(parsed.Body);

            const ctx = body['@odata.context'];
            const match = ctx.match(/\\S\\[^)]*\\/);
            serviceSession = match ? match[0] : '';

            data = (body.value || []).map(r => ({
            UserName: r.UserName,
            FirstName: r.FirstName,
            LastName: r.LastName,
            MiddleName: r.MiddleName,
            Age: r.Age
            }));
            render();
         });

      });
      </script>
   </div>
</div>
</div>

  8. Speichern der Datei

    Hinweis

    Dieser Code erstellt eine interaktive Datentabellenschnittstelle zum Demonstrieren von CRUD-Vorgängen (Create, Read, Update, Delete) mit einem externen OData-Dienst mit Power Pages-Serverlogik. Es enthält CSS-Formatierungen für ein dynamisches Tabellenlayout, eine Verarbeitungsbenachrichtigungsüberlagerung und JavaScript-Funktionalität, mit der Benutzer Daten anzeigen können, die aus dem externen Dienst abgerufen wurden, neue Datensätze hinzufügen, indem Sie auf die ➕ Schaltfläche klicken, vorhandene Datensätze bearbeiten, indem Sie auf Tabellenzeilen doppelklicken (mit Ausnahme des Felds "Benutzername"), Änderungen mit ✅speichern, Bearbeitungen abbrechen und ❌Datensätze mithilfe der 🗑Schaltfläche " löschen. Der Code verwendet jQuery und einen sicheren WebAPI-Wrapper, um authentifizierte AJAX-Aufrufe an den Endpunkt "/_api/serverlogics/services.odata.org" durchzuführen und die Antwortdaten zu verarbeiten, um den OData-Kontext zu analysieren und eine Dienstsitzung für nachfolgende Vorgänge zu verwalten.

  9. Kehren Sie zum Power Pages-Designer zurück.

  10. Im Dialogfeld „Sie bearbeiten Code in Visual Studio Code für das Web“ folgen Sie den Anweisungen und klicken Sie auf die Schaltfläche Synchronisieren.

Schritt 3: Verwenden der Serverlogik zum Lesen, Anzeigen, Bearbeiten, Erstellen und Löschen

So testen Sie die Serverlogikfunktionalität:

  1. Wählen Sie "Vorschau" und dann "Desktop" aus.
  2. Melden Sie sich bei Ihrer Website mit dem Benutzerkonto an, dem die zuvor erstellte Serverlogikbenutzerrolle zugewiesen wurde. Als wir die Rolle "Administratoren " im vorherigen Schritt ausgewählt haben, melden Sie sich in diesem Beispiel als Administrator an.
  3. Wechseln Sie zur zuvor erstellten Serverlogikwebseite .
  4. Überprüfen Sie die Vorgänge.

Übersicht über Die Serverlogik
Autorenserverlogik
ServerobjekteInteraktion mit Dataverse-Tabellen mithilfe der Serverlogik

  • Last updated on