Start tracking your progress
Trailhead Home
Trailhead Home

Build UI to Create and Clone a Record

Learning Objectives

After completing this unit, you’ll be able to:
  • Make a request to User Interface API to get the default values to clone a record.
  • Make a request to User Interface API to get the default values to create a record.
  • Make a request to User Interface API to clone or create a record.

Get Default Values to 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.
Opportunity record home in Lightning Experience.

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

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

To get the information to build this form, use the UI API record defaults clone resource.
GET /ui-api/record-defaults/clone/{recordId}
The cloneDefaultsFetcher.js saga retrieves the default values for creating a record.
let defaultsUrl = action.creds.instanceUrl + '/services/data/v45.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.
JSON response from clone record defaults.
Let’s take a high-level look at the response. It’s similar to a response from the /ui-api/record-ui/{recordId} resource, but the payload is smaller.
  • Includes layout metadata for the object in edit mode.
  • Includes objectInfos (object metadata) for the cloned object and for any nested objects. For example, if you clone an Opportunity, the response includes object metadata for the Opportunity object. It also includes object metadata for the Account object, because the opportunity references an account. It also includes object metadata for the User object, because fields like OwnerId reference a user.
  • Includes the default record data from the record you’re cloning so you can use it to create a record.

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

Get Default Values to Create a Record

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}
The createDefaultsFetcher.js saga retrieves the default values for creating a record.
let defaultsUrl = action.creds.instanceUrl + '/services/data/v45.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.A form with empty, editable fields for creating an account.
  2. To see the JSON response from User Interface API, click Show JSON.
JSON response from create record defaults.
The response includes the necessary information for the app to construct a user interface that lets users create a record.
  • Includes layout metadata for the object in create mode.
  • Includes objectInfos (object metadata) for the specified object and any nested objects.
  • Includes null values for record fields other than Owner and OwnerId, which are populated with values for the user who made the request.

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.

Create or Clone a Record

When a user clicks Save, the Record Viewer app makes a POST request to /ui-api/records to commit the record to the database.
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!

retargeting