Nasıl yapılır: Sunucu mantığını kullanarak dış hizmetlerle etkileşim kurma

Bu kılavuzda, dış hizmetler httpclient sunucu nesnesindeki kayıtları okumak, yazmak, güncelleştirmek ve silmek için sunucu mantığını kullanacak bir web sayfası ayarlayacaksınız.

Uyarı

Bu örnekte kullanılır https://services.odata.org/TripPinRESTierService , ancak diğer genel kullanıma açık ücretsiz test araçlarını kullanabilirsiniz.

1. Adım: Sunucu mantığı oluşturma

  1. Power Pages'de oturum açın.

  2. Site + Düzenle'yi seç.

  3. Çalışma alanını ayarla'ya gidin, ardından Sunucu mantığı (önizleme) seçeneğini belirleyin

    Kurulum çalışma alanında sunucu mantığının seçileceği yeri gösteren ekran görüntüsü.

  4. +Yeni sunucu mantığını seçin

  5. Sunucu mantığı için ad girin. Bu ad API'de sunucu mantığı API'si oluşturulurken kaynak tanımlayıcısı olarak kullanılır. Örneğin:

    Mülkiyet Örnek Değer
    İsim services.odata.org
    Kolay Ad Performing CRUD operations using OData service

  6. Uygun web rolünü atamak için +Rol ekle'yi seçin. Sunucu mantığında Yönetici rolü eklendi Bu örnekte , Devam etmek için Yöneticiler'i seçin ve daha sonra yönetici olarak oturum açın.

  7. Add (Ekle) seçeneğini belirleyin.

  8. Sunucu mantığını seçin ve Kodu düzenle'yi seçin.

    Kodu düzenle'yi seçin

  9. Özel mantığı yazmak için Web için Microsoft Visual Studio Code'da düzenleme iletişim kutusunda, Visual Studio Code'u Aç'ı seçin.

    Önceden tanımlanmış yöntemleri ve betikleri dosyada bulabilirsiniz.

  10. Dış hizmeti kullanarak işlemleri okumak, düzenlemek, oluşturmak, silmek için sunucu mantığı yöntemini tanımlayın.

    Aşağıdaki sabiti baseUrl yönteminden get() önce ekleyin

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

  11. get, post, putve del örnek işlevlerini aşağıdaki kodla değiştirin

    
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. Dosyayı kaydedin.

    Tavsiye

    Kaydetmek için Ctrl+S kullanın.

2. Adım: Web Sayfası Oluşturma

  1. Power Pages design studio'yu başlatın.

  2. Sayfalar çalışma alanında + Sayfa'yı seçin.

    Yeni sayfa ekleme

  3. Bir sayfa oluşturmak için sayfayı açıklayın iletişim kutusunda Diğer sayfa ekleme yöntemleri'ni seçin.

  4. Sayfa ekle iletişim kutusunda ayrıntıları girin.

    1. Ad kutusuna Sunucu mantığı girin ve Boştan başla düzenini seçin.
    2. Add (Ekle) seçeneğini belirleyin.

    Sayfa eklemek için değerleri girin

  5. Sağ üst köşedeki Kodu Düzenle seçeneğini belirleyin.

  6. Web için Visual Studio Code'da Düzenle iletişim kutusundaVisual Studio Code'ı Aç'ı seçin.

  7. HTML sayfasında bulunan kodu aşağıdakilerle değiştirin:

    <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. Dosyayı kaydetme

    Uyarı

    Bu kod, Power Pages sunucu mantığını kullanarak dış OData hizmetiyle CRUD (Oluşturma, Okuma, Güncelleştirme, Silme) işlemlerini göstermek için etkileşimli bir veri tablosu arabirimi oluşturur. Yanıt veren bir tablo düzeni için CSS stili, işleme bildirimi katmanı ve kullanıcıların dış hizmetten alınan verileri görüntülemesine, düğmeye tıklayarak yeni kayıtlar eklemesine, tablo satırlarına çift tıklayarak ➕ (UserName alanı dışında) mevcut kayıtları düzenlemesine, değişiklikleri ✅ile kaydetmesine, ile ❌düzenlemeleri iptal etmesine ve ️ düğmesini kullanarak 🗑kayıtları silmesine olanak tanıyan JavaScript işlevselliğini içerir. Kod, /_api/serverlogics/services.odata.org uç noktasına kimliği doğrulanmış AJAX çağrıları yapmak, OData bağlamını ayrıştırmak ve sonraki işlemler için bir hizmet oturumunu yönetmek üzere yanıt verilerini işlemek için jQuery ve güvenli bir WebAPI sarmalayıcı kullanır.

  9. Power pages tasarımcısına geri dönün.

  10. Web için Visual Studio Code'da kod düzenliyorsunuz iletişim kutusunda yönergeleri izleyin ve Eşitle düğmesine tıklayın.

3. Adım: Sunucu mantığını kullanarak okuma, görüntüleme, düzenleme, oluşturma ve silme

Sunucu mantığı işlevselliğini test etmek için:

  1. Önizleme'yi ve ardından Masaüstü'nü seçin.
  2. Daha önce oluşturduğunuz Sunucu mantığı Kullanıcı rolü atanmış kullanıcı hesabıyla sitenizde oturum açın. Önceki adımda Yöneticiler rolünü seçtiğimizde, bu örnekte yönetici olarak oturum açın.
  3. Daha önce oluşturulan Sunucu mantığı web sayfasına gidin.
  4. İşlemleri doğrulayın.

Sunucu mantığına genel bakış
Sunucu mantığı oluşturma
Sunucu nesneleriSunucu mantığını kullanarak Dataverse tablolarıyla etkileşim kurma

  • Last updated on