Build UI to Create and Clone a Record

To construct a user interface that lets users clone a record, create an editable form with pre-filled values from the cloned record. To see an example, let’s clone a record in Lightning Experience.

1. In your Trailhead Playground, open the Sales app.
2. Click Opportunities.
3. Select the All Opportunities list view.
4. Click to open an opportunity.
5. Click Clone.

The form in Lightning Experience includes pre-filled values from the cloned record, like the Opportunity Name, the Account Name, and the Amount.

Click Cancel or Save. We don’t use the cloned Opportunity, we just wanted to look at the user interface.

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;

If the UI API operation is successful, the saga dispatches the receiveCloneDefaults(responseJson) action holding the JSON response. The record.js reducer intercepts the action and uses it as an input to update the Redux state.

Let’s go over to the Record Viewer app and clone the same record so we can see the JSON response from the call to GET /ui-api/record-defaults/clone/{recordId}.

1. Reload the Record Viewer app and click the opportunity in the Recent Items List.
2. When the record loads, click Clone.
3. To see the JSON response from User Interface API, click Show JSON.
4. To expand a JSON object (like layout, objectInfos, and record), click it.

The /helpers/recordLayout.js functions parse the JSON response to build the internal data model for layouts. To determine which fields are editable, getLayoutItemModel looks for any layout item where "editableForNew" : true. To determine which fields need a visual treatment in the UI to indicate that they’re required, getLayoutItemModel looks for any layout item where "required" : true. To see these properties, expand the layout section of the JSON layout response in the Record Viewer app.

"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
        },
...

To build a user interface that lets users create a record, you need an editable form with empty fields for the user to fill in. To get the information to build this form, use the record defaults create resource.

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

If the UI API operation is successful, the saga dispatches the receiveCreateDefaults(responseJson) action holding the JSON response. The record.js reducer intercepts the action and uses it as an input to update the Redux state.

Let’s go over to the Record Viewer app and create a record so we can see the JSON response from the call to GET /ui-api/record-defaults/create/{objectApiName}.

1. From the Create New Record menu, select Account.
2. To see the JSON response from User Interface API, click Show JSON.

Like when you’re cloning a record, the same /helpers/recordLayout.js functions parse the JSON response to build the internal data model for layouts. To determine which fields are editable, getLayoutItemModel looks for any layout item where "editableForNew" : true. To determine which fields need a visual treatment in the UI to indicate that they’re required, getLayoutItemModel looks for any layout item where "required" : true. To see these properties, expand the layout object in the JSON response in the Record Viewer app.

POST /ui-api/records

{
  "apiName": "Account",
  "fields": {
    "Name": "New Universal Containers"
  }
}

Any field values you send are merged with the field values that the record defaults resource returned. For example, the OwnerId field is required and creatable, but you don’t have to provide a value because it exists in the record defaults response.

You’ve got Workbench open, so go ahead and create an account called New Universal Containers. Reload the Record Viewer app and click New Universal Containers from the Recent Items list. Don’t forget, you can also view the account in your Trailhead Playground!