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

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

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

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

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

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

let defaultsUrl = action.creds.instanceUrl + '/services/data/v47.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 応答を確認できるようにしましょう。

1. Record Viewer アプリケーションを再読み込みし、[Recent Items List (最近使ったデータリスト)] で商談をクリックします。
2. レコードが読み込まれたら、[Clone (コピー)] をクリックします。
3. ユーザインターフェース API からの JSON 応答を表示するには、[Show JSON (JSON を表示)] をクリックします。
4. JSON オブジェクト (layout、objectInfos、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/v47.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 応答を確認できるようにしましょう。

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

レコードをコピーする場合と同じ /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 でも表示できます!