レコードを作成およびコピーするための UI の作成
学習の目的
- ユーザインターフェース API に対する要求を実行し、デフォルト値を取得してレコードをコピーする。
- ユーザインターフェース API に対する要求を実行し、デフォルト値を取得してレコードを作成する。
- ユーザインターフェース API に対する要求を実行し、レコードをコピーまたは作成する。
デフォルト値を取得してレコードをコピー
- Trailhead Playground で、[Sales (セールス)] アプリケーションを開きます。
- [Opportunities (商談)] をクリックします。
- [すべての商談] リストビューを選択します。
- 商談をクリックして開きます。
- [Clone (コピー)] をクリックします。
![Lightning Experience の [Opportunity (商談)] レコードホーム。](https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/user-interface-api/build-ui-to-create-and-clone-a-record/images/ja-JP/9677214efcb9b0a50f4391319a602691_clone_opportunity.png)
Lightning Experience のフォームには、コピーされたレコードから、商談名、取引先名、金額などの値が事前入力されています。
[Cancel (キャンセル)] または [Save (保存)] をクリックします。ここではコピーした商談は使用しません。ユーザインターフェースを確認するだけです。
GET /ui-api/record-defaults/clone/{recordId}
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 など) を展開するには、クリックします。

- 編集モードのオブジェクトの 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}
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 ステートを更新します。
-
[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 オブジェクトを展開します。
レコードを作成またはコピー
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 でも表示できます!