Toimintatapa: ulkoisten palveluiden käyttö palvelinlogiikan avulla

Tässä oppaassa määrität verkkosivun, joka käyttää palvelinlogiikkaa tietueiden lukemiseen, kirjoittamiseen, päivittämiseen ja poistamiseen ulkoisista palveluista httpclient-palvelinobjektista.

Vaihe 1: Luo palvelinlogiikka

1. Kirjaudu sisään Power Pagesiin.

2. Valitse sivusto + Muokkaa.

3. Siirry Määritä työtila -kohtaan ja valitse sitten Palvelinlogiikka (esikatselu)

   

4. Valitse +Uusi palvelinlogiikka

5. Anna palvelinlogiikan nimi. Tätä nimeä käytetään ohjelmointirajapinnassa resurssitunnisteena palvelinlogiikan ohjelmointirajapintaa muodostettaessa. Esimerkki:

   Ominaisuus	Esimerkkiarvo
   Nimi	services.odata.org
   Näyttönimi	Performing CRUD operations using OData service

6. Valitse +Lisää rooleja , jos haluat määrittää asianmukaisen verkkoroolin. Valitse tässä esimerkissä Järjestelmänvalvojat ja kirjaudu myöhemmin järjestelmänvalvojaksi.

7. Valitse Lisää.

8. Valitse palvelimen logiikka ja valitse Muokkaa koodia.

   

9. Valitse Muokkaa Microsoft Visual Studio Code for the Webissä -valintaikkunassaAvaa Visual Studio Code mukautetun logiikan luomista varten.

   Tiedostosta löydät esimääritettyjä menetelmiä ja komentosarjoja.

10. Määritä palvelimen logiikkamenetelmä toimintojen lukemiseen, muokkaamiseen, luomiseen ja poistamiseen ulkoisen palvelun avulla.

    Lisää seuraava baseUrl vakio ennen menetelmää get()

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

11. Korvaa - get, post-, put- ja del -esimerkkifunktiot seuraavalla koodilla

    
    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. Tallenna tiedosto.

    Vihje

    Tallenna painamalla Ctrl+S .

Vaihe 2: Verkkosivun luominen

1. Käynnistä Power Pages -suunnittelustudio.

2. Valitse Sivut-työtilassa+ Sivu.

   

3. Valitse Luo sivu kuvailemalla - valintaikkunasta Muut tapoja lisätä sivu.

4. Kirjoita Tiedot Lisää sivu -valintaikkunaan.

   1. Kirjoita Nimi-ruutuunPalvelimen logiikka ja valitse Aloita tyhjästä asettelusta.
   2. Valitse Lisää.

   

5. Valitse Muokkaa koodia - vaihtoehto oikeasta yläkulmasta.

6. Valitse Muokkaa Visual Studio Code for the Web -valintaikkunassaAvaa Visual Studio Code.

7. Korvaa HTML-sivulta löytynyt koodi seuraavasti:

   <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. Tallenna tiedosto

   Note

   Tämä koodi luo vuorovaikutteisen tietotaulukkoliittymän CRUD-toimintojen (luonti, luku, päivitys, poisto) esittelemiseen ulkoisella OData-palvelulla Power Pages -palvelinlogiikan avulla. Se sisältää CSS-muotoilun reagoivalle taulukkoasettelulle, käsittelyilmoituksen peittokuvan ja JavaScript-toiminnon, jonka avulla käyttäjät voivat tarkastella ulkoisesta palvelusta noudettuja tietoja, lisätä uusia tietueita napsauttamalla ➕ painiketta, muokata olemassa olevia tietueita kaksoisnapsauttamalla taulukon rivejä (lukuun ottamatta UserName-kenttää), tallentaa muutokset :n kanssa ✅, peruuttaa muokkaukset :n kanssa ❌ja poistaa tietueita käyttämällä 🗑️-painiketta. Koodi käyttää jQueryä ja turvallista WebAPI-paketoijaa todennetuilla AJAX-kutsuilla /_api/serverlogics/services.odata.org-päätepisteeseen. Vastaustietoja käsitellään OData-kontekstin jäsentämiseksi ja palveluistunnon hallitsemiseksi seuraavia toimintoja varten.

9. Palaa Power Pages -suunnittelutyökaluun.

10. Ohjausikkunassa 'Muokkaat koodia Visual Studio Code for the Webissä', seuraa ohjeita ja napsauta Synkronoi-painiketta.

Vaihe 3: Palvelinlogiikan käyttö lukemiseen, tarkastelemiseen, muokkaamiseen, luomiseen ja poistamiseen

Palvelimen logiikan toimintojen testaaminen:

1. Valitse Esikatselu ja sitten Työpöytä.
2. Kirjaudu sisään sivustoosi käyttäjätilillä, jolle on määritetty aiemmin luomasi Palvelinlogiikan käyttäjärooli . Kun valitsimme Järjestelmänvalvojat-roolin edellisessä vaiheessa, tässä esimerkissä kirjaudu sisään järjestelmänvalvojana.
3. Siirry aiemmin luodulle Palvelinlogiikka-verkkosivulle .
4. Tarkista toiminnot.

Liittyvät tiedot

Palvelinlogiikan yleiskatsaus
Laatijapalvelimen logiikka
PalvelinobjektitMiten Dataverse-taulukoiden kanssa vuorovaikuteta palvelinlogiikan avulla