Newer Version Available

This content describes an older version of this product. View Latest

Navigate to a Record Create Page with Default Field Values

The lightning:pageReferenceUtils component provides utilities for encoding default field values into a string. Pass this string into the pageReference.state.defaultFieldValues attribute on standard__objectPage page reference types.
To launch a record create page with prepopulated field values, use the lightning:pageReferenceUtils and lightning:navigation components together. The examples on this page show you how to do this using standard actions and override actions.

Launch an Account Record with Default Field Values Using a Standard Action

This example adds two standard action links that navigate to a record create page with default field values. The first link uses a URL that you generate using generateUrl(pageRef), and the second link navigates directly to the record create page using navigate(pageRef).
1<!-- auraNavigator.cmp -->
2<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
3    <aura:attribute name="url" type="String"/>
4    
5    <!-- Specify the pageReference type. Only object is supported. -->
6    <aura:attribute name="pageReference" type="Object"/>
7    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
8
9    <!-- Implement the navigation service. -->
10    <lightning:navigation aura:id="navService"/>
11
12    <!-- pageReferenceUtil component -->
13    <lightning:pageReferenceUtils aura:id="pageRefUtils"/>
14
15    <!-- Generate a link to launch an account record create page. -->
16    <a href="{!v.url}">New Account (Aura Link)</a> <br/>
17
18    <!-- Launch an account record create page -->
19    <a href="#" onclick="{!c.handleClick}">New Account (Aura PageRef)</a> <br/>
20</aura:component>
In your client-side controller, get defaultFieldValues from pageRef and pass them into encodeDefaultFieldValues(). When you click a link to create an account, encodeDefaultFieldValues() reads and encodes the values and passes them into a new standard__objectPage.
1// auraNavigatorController.js
2({
3    init : function(cmp, event, helper) {
4        var navService = cmp.find("navService");
5        var pageRef = {
6            type: "standard__objectPage",
7            attributes: {
8                objectApiName: "Account",
9                actionName: "new"
10            },
11            state: {
12            }
13        }
14        // Replace with your own field values
15        var defaultFieldValues = {
16            Name: "Salesforce, #1=CRM",
17            OwnerId: "005XXXXXXXXXXXXXXX",
18            AccountNumber: "ACXXXX",
19            NumberOfEmployees: 35000,
20            CustomCheckbox__c: true
21        };
22        pageRef.state.defaultFieldValues = cmp.find("pageRefUtils").encodeDefaultFieldValues(defaultFieldValues);
23        cmp.set("v.pageReference", pageRef);
24        var defaultUrl = "#";
25
26        // Generate a Link for the Aura Link example
27        navService.generateUrl(pageRef)
28        .then($A.getCallback(function(url) {
29            cmp.set("v.url", url ? url : defaultUrl);
30        }), $A.getCallback(function(error) {
31            cmp.set("v.url", defaultUrl);
32        }));
33    },
34    
35    // Navigate to the record create page for the Aura PageRef example
36    handleClick : function(cmp, event, helper) {
37        var navService = cmp.find("navService");
38        var pageRef = cmp.get("v.pageReference");
39        event.preventDefault();
40        navService.navigate(pageRef);
41    }
42})

Handle Default Field Values Using an Override Action

With standard actions, the default field values pass through the URL to the object as a string, and the redirect and replace is handled for you. With override actions, the encoding is handled for you, but you are responsible for decoding the string of default field values from the URL and handling the redirect and replace.

We recommend that you always redirect and replace to remove the default field values from the URL and browser history.

Important

This example uses hasPageReference to launch an account create page via an override action.

1<!-- auraNewAccountOverride.cmp -->
2<aura:component implements="lightning:actionOverride,lightning:hasPageReference">
3
4    <lightning:pageReferenceUtils aura:id="pageRefUtils"/>
5    <lightning:recordEditForm 
6                    objectApiName="Account"
7                    onload="{!c.handleCreateLoad}">
8        <lightning:messages />
9        <lightning:inputField aura:id="nameField" fieldName="Name"/>
10        <lightning:inputField aura:id="numOfEmpField" fieldName="NumberOfEmployees"/>
11        <lightning:inputField aura:id="ownerIdField" fieldName="OwnerId"/>
12        <lightning:inputField aura:id="customCheckField" fieldName="CustomCheckbox__c"/>
13        <lightning:button class="slds-m-top_small" type="submit" label="Create new" />
14    </lightning:recordEditForm>
15</aura:component>
The client-side controller reads the default field values from the state key and gets the encoded string. It then passes the string into decodeDefaultFieldValues() to decode it and retrieve the object.

All default field values are passed into the record create page as strings, regardless of field type. For example, NumberOfEmployees: 35000 is passed into the page as the string 35000 instead of a number field type. Boolean values are passed into the page as true or false strings.

Important

This example is similar to prepopulating field values using lightning:recordEditForm, except that here the defaultFieldValues are dynamically generated when navigating to the form.

1// auraNewAccountOverrideController.js
2({
3    handleCreateLoad: function (cmp, event, helper) {
4        var pageRef = cmp.get("v.pageReference");
5        var defaultFieldValues =
6        cmp.find("pageRefUtils").decodeDefaultFieldValues(pageRef.state.defaultFieldValues);
7    
8        var nameFieldValue = cmp.find("nameField").set("v.value", defaultFieldValues.Name);
9        var numOfEmpFieldValue = cmp.find("numOfEmpField").set("v.value", defaultFieldValues.NumberOfEmployees);
10        var ownerIdFieldValue = cmp.find("ownerIdField").set("v.value", defaultFieldValues.OwnerId);
11        var customCheckFieldValue = cmp.find("customCheckField").set("v.value", defaultFieldValues.CustomCheckbox__c === 'true');
12    }
13})