Guide pratique pour interagir avec des services externes à l’aide de la logique serveur

Dans ce guide, vous allez configurer une page web qui utilisera la logique du serveur pour lire, écrire, mettre à jour et supprimer des enregistrements de l’objet serveur httpclient des services externes.

Note

Cet exemple utilise https://services.odata.org/TripPinRESTierService , mais vous pouvez utiliser d’autres outils de test gratuits disponibles publiquement.

Étape 1 : Créer une logique de serveur

  1. Connectez-vous à Power Pages.

  2. Sélectionnez site + Modifier.

  3. Accédez à l’espace de travail Configurer , puis sélectionnez Logique serveur (préversion)

    Capture d’écran montrant où sélectionner la logique du serveur dans l’espace de travail Configurer.

  4. Sélectionner +Nouvelle logique de serveur

  5. Entrez le nom de la logique du serveur. Ce nom est utilisé dans l’API comme identificateur de ressource lors de la construction de l’API logique du serveur. Par exemple:

    Propriété Exemple de valeur
    Nom services.odata.org
    Nom complet Performing CRUD operations using OData service

  6. Sélectionnez +Ajouter des rôles pour attribuer un rôle web approprié. Ajout du rôle Administrateur dans la logique du serveur Dans cet exemple, sélectionnez Administrateurs et connectez-vous ultérieurement en tant qu’administrateur pour continuer.

  7. Sélectionnez Ajouter.

  8. Sélectionnez la logique du serveur et sélectionnez Modifier le code.

    Sélectionner modifier le code

  9. Dans la boîte de dialogue Modifier dans Microsoft Visual Studio Code pour le web , sélectionnez Ouvrir Visual Studio Code pour créer la logique personnalisée.

    Vous trouverez des méthodes et des scripts prédéfinis dans le fichier.

  10. Définissez la méthode logique du serveur pour lire, modifier, créer, supprimer des opérations à l’aide du service externe.

    Ajoutez la constante suivante baseUrl avant la get() méthode

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

  11. Remplacez les fonctions d'exemple get, post, put, et del par le code suivant

    
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. Enregistrez le fichier.

    Conseil / Astuce

    Utilisez Ctrl+S pour enregistrer.

Étape 2 : Créer une page web

  1. Lancez Power Pages design Studio.

  2. Dans l’espace de travail Pages , sélectionnez + Page.

    Ajouter une nouvelle page

  3. Dans la boîte de dialogue Décrire une page pour la créer , sélectionnez Autres façons d’ajouter une page.

  4. Dans la boîte de dialogue Ajouter une page , entrez les détails.

    1. Dans la zone Nom , entrez la logique du serveur et sélectionnez Démarrer à partir d’une disposition vide .
    2. Sélectionnez Ajouter.

    Entrer des valeurs pour ajouter une page

  5. Sélectionnez l’option Modifier le code dans le coin supérieur droit.

  6. Dans la boîte de dialogue Modifier dans Visual Studio Code pour le web, sélectionnez Ouvrir Visual Studio Code.

  7. Remplacez le code trouvé dans la page HTML par les éléments suivants :

    <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. Enregistrez le fichier

    Note

    Ce code crée une interface interactive de table de données pour montrer les opérations CRUD (Créer, Lire, Mettre à jour, Supprimer) avec un service OData externe à l’aide de la logique serveur Power Pages. Il inclut un style CSS pour une disposition de table réactive, une superposition de notification de traitement et une fonctionnalité JavaScript qui permet aux utilisateurs d’afficher les données récupérées à partir du service externe, d’ajouter de nouveaux enregistrements en cliquant sur le ➕ bouton, de modifier les enregistrements existants en double-cliquant sur les lignes de table (à l’exception du champ UserName), d’enregistrer les modifications avec ✅, d’annuler les modifications avec ❌, et de supprimer des enregistrements à l’aide du 🗑bouton ️ . Le code utilise jQuery et un wrapper WebAPI sécurisé pour effectuer des appels AJAX authentifiés au point de terminaison /_api/serverlogics/services.odata.org, gérant les données de réponse pour analyser le contexte OData et gérer une session de service pour les opérations suivantes.

  9. Revenez au concepteur de Power Pages.

  10. Dans la fenêtre de dialogue "Vous modifiez du code dans Visual Studio Code pour le Web", suivez les instructions et cliquez sur le bouton Synchroniser.

Étape 3 : Utiliser la logique serveur pour lire, afficher, modifier, créer et supprimer

Pour tester la fonctionnalité logique du serveur :

  1. Sélectionnez Aperçu, puis choisissez Bureau.
  2. Connectez-vous à votre site avec le compte d’utilisateur affecté au rôle d’utilisateur logique serveur que vous avez créé précédemment. Comme nous avons sélectionné le rôle Administrateurs à l’étape précédente, dans cet exemple, connectez-vous en tant qu’administrateur.
  3. Accédez à la page web logique du serveur créée précédemment.
  4. Vérifiez les opérations.

Vue d’ensemble de la logique serveur
Écrire une logique de serveur
Objets serveurComment interagir avec des tables Dataverse à l’aide de la logique serveur

  • Last updated on