Navigate to a Record’s Create Page with Default Field Values (LWC)

 Hi,

We are going to learn how can navigate to a new record page with default values.

To launch a record’s create a page with prepopulated field values 

we have to use lightning/pageReferenceUtils and lightning/navigation together.

lightning/pageReferenceUtils:

This module provides the encodeDefaultFieldValues() and decodeDefaultFieldValues() functions, 

which encode default field values into a string and decode them.

We have to assign Assign an encoded string to the 

 "pageReference.state.defaultFieldValues" attribute in a "standard__objectPage" page reference.

 

 Eg: 

 Launch a Contact Record with Default Field Values Using a Standard Action 

 This example launches a record’s create page with pre-populated default values:

  This example HTML includes the link to create a contact.  

 <!-- navToNewRecordWithDefaults.html -->

<template>

        <lightning-button

            name="new-with-defaults"

            label="Go to New Contact with Defaults"

            class="slds-m-around_medium"

            onclick={navigateToNewContactWithDefaults}

        ></lightning-button>

</template>

 

 To encode the default field values into a string, 

 pass them to encodeDefaultFieldValues(). Assign the encoded string to the state.

 defaultFieldValues property in the page reference.

 

 // navToNewRecordWithDefaults.js

import { LightningElement } from 'lwc';

import { NavigationMixin } from 'lightning/navigation';

import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';

export default class NavToNewRecordWithDefaults extends NavigationMixin(LightningElement) {

    navigateToNewContactWithDefaults() {

        const defaultValues = encodeDefaultFieldValues({

            FirstName: 'Sreevardhan',

            LastName: 'M',

            LeadSource: 'Other'

        });

        console.log(defaultValues);

        this[NavigationMixin.Navigate]({

            type: 'standard__objectPage',

            attributes: {

                objectApiName: 'Contact',

                actionName: 'new'

            },

            state: {

                defaultFieldValues: defaultValues

            }

        });

    }

}

Let's take a lightning quick action on Account Page called "Create Contact Record".

Let's create a lightning web component called "defaultValuesComponent"

defaultValuesComponent.html:

<template>

    

</template>

defaultValuesComponent.js:

import { LightningElement } from 'lwc';

import { NavigationMixin } from 'lightning/navigation';

import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';

export default class DefaultValuesComponent extends NavigationMixin(LightningElement) {

    connectedCallback(){

        this.navigateToNewContactWithDefaults();

    }

    navigateToNewContactWithDefaults() {

        const defaultValues = encodeDefaultFieldValues({

            FirstName: 'SreeVardhan',

            LastName: 'M',

            LeadSource: 'Other'

        });

        this[NavigationMixin.Navigate]({

            type: 'standard__objectPage',

            attributes: {

                objectApiName: 'Contact',

                actionName: 'new'

            },

            state: {

                defaultFieldValues: defaultValues

            }

        });

    }

}

defaultValuesComponent.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>false</isExposed>    

</LightningComponentBundle>

Now let's wrap our Lightning web component  inside an Aura component called "defaultValuesComponentAura"

defaultValuesComponentAura.cmp:

<aura:component implements="force:lightningQuickAction" >

    <c:defaultValuesComponent/>

</aura:component>

Create Lighting action "Create Contact Record" on Account object with "defaultValuesComponentAura"

When user clicks on "Create Contact Record" it opens new Contact page with default values:

Note:

 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, you are responsible for decoding the string of default field values from the URL.

Reference:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_default

Share JavaScript Code in LWC

Hi,

To share code between components, create an ES6 module, and export the variables or functions that you want to share.

 An ES6 module is a JavaScript file that explicitly exports variables or functions that other modules can use.

 Modules make it easier to structure your code without polluting the global scope.

Your module structure looks like this:

There are two ways to export functionality from an ES6 module.

• A module can export a single default function or variable.
• A module can also export named functions or variables.

A module can export a single default function or variable:

The component that imports the function chooses a name to refer to the default export.

 It doesn't have to be the name of the function or JavaScript file, that’s just a convention. 

The myLibraryjs.js module is in the default namespace(c).

myLibraryjs.html: 

No markup needed here as we want to expose functions from this component. 

<template>

    

</template>

myLibraryjs.js:

export default function () { 

    return 'Calculator Example';

 };

myLibraryjs.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>false</isExposed>

</LightningComponentBundle>

A module can also export named functions or variables:

Here we are going to export named functions from "jsLibraryModule" component:

jsLibraryModule.HTML: (no changes needed)

<template>

    

</template>

jsLibraryModule.js:

const getRoles = () => {

    return [

        { label: 'Manager', value: 'Manager' },

        { label: 'Assistent Manager', value: 'AstManager' },

    ];

};

const calculate2numbers = (fnumber, snumber) => {

    

    return parseInt(fnumber)+parseInt(snumber);

};

export { getRoles, calculate2numbers };

jsLibraryModule.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>false</isExposed>

</LightningComponentBundle>

Now let's see how to import the same into other components and invoke the same.

importJSComponent.html:

<template>

    <lightning-card>

        <h3 slot="title">

            <lightning-icon icon-name="utility:connected_apps" size="small">

            </lightning-icon>

             {message}

        </h3>

        <div slot="footer">

                <lightning-badge label={result}></lightning-badge>                 

        </div>

        <p class="slds-p-horizontal_small">

            <lightning-input value={firstNumber} name="fnumber" label="First Number" 

               onchange={handleChanges}></lightning-input>

            <lightning-input value={secondNumber} name="snumber" label="Second Number"

                 onchange={handleChanges}></lightning-input>

            <br/>

            <lightning-button label="Submit" variant="brand" 

                onclick={handleClick}></lightning-button>

        </p>

    </lightning-card>

</template>

importJSComponent.js:

Here we are importing and calling: 

default function:

import myfunction from 'c/myLibraryjs';

Named fucntions:

import {calculate2numbers } from 'c/jsLibraryModule'

import { LightningElement } from 'lwc';

import myfunction from 'c/myLibraryjs';

import {calculate2numbers } from 'c/jsLibraryModule'

export default class ImportJSComponent extends LightningElement {

    message = myfunction();      

    firstNumber=0;

    secondNumber=0;

    result=0;

    handleChanges(event){

        if(event.target.name==='fnumber'){

            this.firstNumber= event.target.value;

        }

        if(event.target.name==='snumber'){

            this.secondNumber= event.target.value;

        }

        

    }

    handleClick(){

        this.result = calculate2numbers(this.firstNumber,this.secondNumber);        

    }

}

importJSComponent.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

    </targets>

</LightningComponentBundle>

Output:

Reference:

https://recipes.lwc.dev/

https://recipes.lwc.dev/#misc

https://lwc.dev/guide/javascript_share_code

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/js_share_code