方法: サーバーロジックを使用して外部サービスと対話する

このガイドでは、サーバーロジックを使用して、外部サービス httpclient サーバーオブジェクトからレコードを読み取り、書き込み、更新、および削除する Web ページを設定します。

注

この例では https://services.odata.org/TripPinRESTierService を使用しますが、他の一般公開されている無料のテストツールを使用することもできます。

手順 1: サーバーロジックを作成する

Power Pages にサインインします。
[サイト + 編集] を選択します。
[セットアップ] ワークスペースに移動し、[サーバーロジック (プレビュー)] を選択します。
[+新しいサーバーロジック] を選択する
サーバーロジックの名前を入力します。この名前は、サーバーロジック API の構築時にリソース識別子として API で使用されます。例えば次が挙げられます。

プロパティ値の例

名前 services.odata.org

表示される名前 Performing CRUD operations using OData service
[+ ロールの追加] を選択して、適切な Web ロールを割り当てます。この例では、[ 管理者 ] を選択し、後で管理者としてサインインして続行します。
[] を選択し、[] を追加します。
サーバーロジックを選択し、[コードの編集] を選択します。
[ Web 用の Microsoft Visual Studio Code で編集] ダイアログで、[ Visual Studio Code を開く ] を選択してカスタムロジックを作成します。

定義済みのメソッドとスクリプトがファイル内にあります。
外部サービスを使用して操作の読み取り、編集、作成、削除を行うサーバーロジックメソッドを定義します。

baseUrl メソッドの前に次のget()定数を追加します
```
 const baseUrl  = "https://services.odata.org/TripPinRESTierService";
```

プロパティ	値の例
名前	`services.odata.org`
表示される名前	`Performing CRUD operations using OData service`

get、post、put、delのサンプル関数を次のコードに置き換えます


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 }); 
   } 
}

ファイルを保存します。

ヒント

Ctrl+キーを使用して保存します。

手順 2: Web ページを作成する

Power Pages デザインスタジオを起動します。
[ページ] ワークスペースで、[+ ページ]を選択します。
[ ページを作成するための説明 ] ダイアログで、[ その他の方法] を選択してページを追加します。
[ ページの追加 ] ダイアログで、詳細を入力します。
1. [ 名前 ] ボックスに「 サーバーロジック」 と入力し、[ 空白レイアウトから開始] を選択します。
2. [] を選択し、[] を追加します。
右上隅にある [ コードの編集] オプションを選択します。
[ Web の Visual Studio Code で編集] ダイアログで、[ Visual Studio Code を開く] を選択します。

HTML ページで見つかったコードを次のコードに置き換えます。

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

ファイルを保存する

注

このコードでは、Power Pages サーバーロジックを使用して、外部 OData サービスで CRUD (作成、読み取り、更新、削除) 操作をデモンストレーションするための対話型データテーブルインターフェイスを作成します。これには、レスポンシブテーブルレイアウトの CSS スタイル設定、処理通知オーバーレイ、および JavaScript 機能が含まれています。これにより、ユーザーは外部サービスから取得したデータを表示したり、ボタンをクリックして新しいレコードを➕追加したり、テーブル行 (UserName フィールドを除く) をダブルクリックして既存のレコードを編集したり、 ✅で変更を保存したり、 ❌で編集をキャンセルしたり、 🗑️ ボタンを使用してレコードを削除したりできます。このコードでは、jQuery と安全な WebAPI ラッパーを使用して、/_api/serverlogics/services.odata.org エンドポイントに対して認証済みの AJAX 呼び出しを行い、応答データを処理して OData コンテキストを解析し、後続の操作のためにサービスセッションを管理します。
Power Pages デザイナーに戻る。
[ Web 用の Visual Studio Code でコードを編集しています ] ダイアログで、指示に従って [ 同期 ] ボタンをクリックします。

手順 3: サーバーロジックを使用して、読み取り、表示、編集、作成、削除を行う

サーバーロジック機能をテストするには:

[ プレビュー] を選択し、[デスクトップ] を選択 します。
前に作成した サーバーロジック のユーザーロールが割り当てられているユーザーアカウントを使用して、サイトにサインインします。前の手順で 管理者 ロールを選択したので、この例では管理者としてサインインします。
前に作成した サーバーロジック Web ページに移動します。
操作を確認します。

サーバーロジックの概要
 著者サーバーロジック
 サーバーオブジェクトサーバーロジックを使用して Dataverse テーブルを操作する方法

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-11-06

方法: サーバー ロジックを使用して外部サービスと対話する

手順 1: サーバー ロジックを作成する

手順 2: Web ページを作成する

手順 3: サーバー ロジックを使用して、読み取り、表示、編集、作成、削除を行う

関連情報

フィードバック

その他のリソース

方法: サーバーロジックを使用して外部サービスと対話する

手順 1: サーバーロジックを作成する

手順 3: サーバーロジックを使用して、読み取り、表示、編集、作成、削除を行う