レコードを作成およびコピーするための UI の作成

学習の目的

この単元を完了すると、次のことができるようになります。

ユーザインターフェース API に対する要求を実行し、デフォルト値を取得してレコードをコピーする。
ユーザインターフェース API に対する要求を実行し、デフォルト値を取得してレコードを作成する。
ユーザインターフェース API に対する要求を実行し、レコードをコピーまたは作成する。

デフォルト値を取得してレコードをコピー

レコードをユーザがコピーできるユーザインターフェースを作成するには、コピーしたレコードから値が事前入力される編集可能なフォームを作成します。例を確認するために、Lightning Experience でレコードをコピーしましょう。

Trailhead Playground で、[Sales (セールス)] アプリケーションを開きます。
[Opportunities (商談)] をクリックします。
[すべての商談] リストビューを選択します。
商談をクリックして開きます。
[Clone (コピー)] をクリックします。

Lightning Experience の [Opportunity (商談)] レコードホーム。

Lightning Experience のフォームには、コピーされたレコードから、商談名、取引先名、金額などの値が事前入力されています。 Lightning Experience の [Opportunity (商談)] コピーフォーム

[Cancel (キャンセル)] または [Save (保存)] をクリックします。ここではコピーした商談は使用しません。ユーザインターフェースを確認するだけです。

このフォームを作成するための情報を取得するには、UI API record defaults clone リソースを使用します。

GET /ui-api/record-defaults/clone/{recordId}

cloneDefaultsFetcher.js saga がレコードを作成するためのデフォルト値を取得します。

let defaultsUrl = action.creds.instanceUrl + '/services/data/v48.0/ui-api/record-defaults/clone/' 
                  + action.id + '?formFactor=' + action.context.formFactor;

UI API 操作が正常に終了すると、saga は JSON 応答を保持する receiveCloneDefaults(responseJson) アクションをディスパッチします。record.js レデューサーがこのアクションをインターセプトし、入力として使用して Redux ステートを更新します。

Record Viewer アプリケーションに移動し、同じレコードをコピーして、GET /ui-api/record-defaults/clone/{recordId} コールからの JSON 応答を確認できるようにしましょう。

Record Viewer アプリケーションを再読み込みし、[Recent Items List (最近使ったデータリスト)] で商談をクリックします。
レコードが読み込まれたら、[Clone (コピー)] をクリックします。
ユーザインターフェース API からの JSON 応答を表示するには、[Show JSON (JSON を表示)] をクリックします。
JSON オブジェクト (layout、objectInfos、record など) を展開するには、クリックします。

応答を大まかに確認しましょう。/ui-api/record-ui/{recordId} リソースからの応答と似ていますが、こちらのペイロードの方が小さいです。

編集モードのオブジェクトの layout メタデータが含まれます。
コピーされたオブジェクトとネストされているオブジェクトの objectInfos (オブジェクトメタデータ) が含まれます。たとえば、商談をコピーすると、応答には商談オブジェクトのオブジェクトメタデータが含まれます。商談は取引先を参照するため、取引先オブジェクトのオブジェクトメタデータも含まれます。OwnerId のような項目はユーザを参照するため、ユーザオブジェクトのオブジェクトメタデータも含まれます。
レコードの作成に使用できるように、コピーするレコードからデフォルトの record データが含まれます。

/helpers/recordLayout.js 関数は、JSON 応答を解析して、レイアウトの内部データモデルを作成します。編集可能な項目を判別するために、getLayoutItemModel は、"editableForNew" : true であるレイアウト項目を探します。UI で必須であることを示す視覚的な処理が必要な項目を判別するために、getLayoutItemModel は "required" : true であるレイアウト項目を探します。これらのプロパティを表示するには、Record Viewer アプリケーションで JSON レイアウト応答の layout セクションを展開します。

"layout" : {
    "eTag" : "5d3f8f0a8163c3d98f16a77482cf9caa",
    "id" : "00hd000000N0BoZAAV",
    "layoutType" : "Full",
    "mode" : "Edit",
    "sections" : [ {
      "collapsible" : false,
      "columns" : 2,
      "heading" : "Opportunity Information",
      "id" : "01Bd000000SObNYEA1",
      "layoutRows" : [ {
       "layoutItems" : [ {
          "editableForNew" : true,
          "editableForUpdate" : true,
          "label" : "Opportunity Name",
          "layoutComponents" : [ {
            "apiName" : "Name",
            "componentType" : "Field",
            "label" : "Name"
          } ],
          "lookupIdApiName" : "Id",
          "required" : true,
          "sortable" : false
        },
...

デフォルト値を取得してレコードを作成

レコードをユーザが作成できるユーザインターフェースを作成するには、ユーザが入力できるように空の項目が含まれる編集可能なフォームが必要です。このフォームを作成するための情報を取得するには、record defaults create リソースを使用します。

GET /ui-api/record-defaults/create/{objectApiName}

createDefaultsFetcher.js saga がレコードを作成するためのデフォルト値を取得します。

let defaultsUrl = action.creds.instanceUrl + '/services/data/v48.0/ui-api/record-defaults/create/' 
                + action.apiName + '?formFactor=Large';

UI API 操作が正常に終了すると、saga は JSON 応答を保持する receiveCreateDefaults(responseJson) アクションをディスパッチします。record.js レデューサーがこのアクションをインターセプトし、入力として使用して Redux ステートを更新します。

Record Viewer アプリケーションに移動し、レコードを作成して、GET /ui-api/record-defaults/create/{objectApiName} コールからの JSON 応答を確認できるようにしましょう。

[Create New Record (新規レコードの作成)] メニューから、[Account (取引先)] を選択します。
ユーザインターフェース API からの JSON 応答を表示するには、[Show JSON (JSON を表示)] をクリックします。

この応答には、アプリケーションがユーザによるレコード作成用のユーザインターフェースを作成するのに必要な情報が含まれます。

作成モードのオブジェクトの layout メタデータが含まれます。
指定されたオブジェクトとネストされているオブジェクトの objectInfos (オブジェクトメタデータ) が含まれます。
record 項目には null 値が含まれます。例外は、要求を作成したユーザの値が入力される Owner および OwnerId です。

レコードをコピーする場合と同じ /helpers/recordLayout.js 関数が、JSON 応答を解析してレイアウトの内部データモデルを作成します。編集可能な項目を判別するために、getLayoutItemModel は、"editableForNew" : true であるレイアウト項目を探します。UI で必須であることを示す視覚的な処理が必要な項目を判別するために、getLayoutItemModel は "required" : true であるレイアウト項目を探します。これらのプロパティを表示するには、Record Viewer アプリケーションで JSON 応答の layout オブジェクトを展開します。

レコードを作成またはコピー

ユーザが [Save (保存)] をクリックすると、Record Viewer アプリケーションは /ui-api/records に対する POST 要求を実行してレコードをデータベースにコミットします。

POST /ui-api/records
{
  "apiName": "Account",
  "fields": {
    "Name": "New Universal Containers"
  }
}

送信した項目値は、record defaults リソースが返した項目値とマージされます。たとえば、OwnerId 項目は必須で作成可能ですが、record defaults 応答に存在するため、値を指定する必要がありません。

ワークベンチが開いているので、New Universal Containers という取引先を作成します。Record Viewer アプリケーションを再読み込みし、[Recent Items List (最近使ったデータリスト)] で New Universal Containers をクリックします。この取引先は Trailhead Playground でも表示できます!