Sunday, January 10, 2021

How to pass parameter from LWC to Apex controller?

 In this blog post we will learn "How to pass parameter from LWC to apex controller?".


wireaFunctionExample.html


<template>

    <div >

        <lightning-input type="text" label="Enter Account Name" value={accName} onchange={handleChange}> </lightning-input>

        <p>Displaying Account Information</p>

        <template if:true={accountRecord}>

            <template for:each={accountRecord} for:item="item" for:index="index">

                <p key={item.Id}>

                   Name: {item.Name}

                </p>

            </template>

        </template>

        <template if:true={error}>

            Some error occured.

        </template>

    </div>

 

</template>



wireaFunctionExample.js


import { LightningElement,wire,track,api } from 'lwc';

import getAccountData from '@salesforce/apex/getAccountRecord.getAccountRecordMethod';

 

export default class WireaFunctionExample extends LightningElement {

    @api accName;

    @track accountRecord;

    @track error;

    handleChange(event){

        const userInput = event.target.value;

        this.accName= userInput;

    }

 

    @wire(getAccountData,{ accNameParamInApex: '$accName'}) 

    accountsData({ error, data }) {

        if (data) {

            //console.log('RecordId is'+recordId);

            this.accountRecord = data;

            this.error = undefined;

        } else if (error) {

            //console.log('Error block');

            this.error = error;

            this.accountRecord = undefined;

        }

    }

}


wireaFunctionExample.js-meta.xml


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

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

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>


getAccountRecord.cls


public with sharing class getAccountRecord {

  

    @AuraEnabled(cacheable=true)

    public static List<Account> getAccountRecordMethod(String accNameParamInApex) {

        String accNameKey = '%'+accNameParamInApex+'%';

    List<Account> accList=[SELECT Id, Name, Industry

        FROM Account

        Where name Like: accNameKey];

        return accList;

    }

}


testLWCCompApp.app


<aura:application>

<c:wireaFunctionExample></c:wireaFunctionExample>

</aura:application>       


OUTPUT:


How to pass parameter from LWC to apex controller?



Sunday, January 3, 2021

How to pass recordId from LWC to apex controller?

In this blog post we are going to learn "How to pass recordId from LWC to apex controller?"


wireaFunctionExample.html


<template>

    <div >

        <p>Displaying Account Information</p>

        <template if:true={accountRecord}>

            <template for:each={accountRecord} for:item="item" for:index="index">

                <p key={item.Id}>

                   Name: {item.Name}

                   <br/>

                    Industry: {item.Industry}

                </p>

            </template>

        </template>

        <template if:true={error}>

            Some error occured.

        </template>

    </div>

 

</template>


wireaFunctionExample.js


import { LightningElement,wire,track,api } from 'lwc';

import getAccountData from '@salesforce/apex/getAccountRecord.getAccountRecordMethod';

 

export default class WireaFunctionExample extends LightningElement {

    @api recordId;

    @track accountRecord;

    @track error;

 

 

    @wire(getAccountData,{ recordIdAccount: '$recordId'}) 

    accountsData({ error, data }) {

        if (data) {

            //console.log('RecordId is'+recordId);

            this.accountRecord = data;

            this.error = undefined;

        } else if (error) {

            //console.log('Error block');

            this.error = error;

            this.accountRecord = undefined;

        }

    }

}



wireaFunctionExample.js-meta.xml


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

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

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>


getAccountRecord.cls


public with sharing class getAccountRecord {

  

    @AuraEnabled(cacheable=true)

    public static List<Account> getAccountRecordMethod(String recordIdAccount) {

    List<Account> accList=[SELECT Id, Name, Industry

        FROM Account

        Where id=:recordIdAccount];

        return accList;

    }

}


OUTPUT:

How to pass recordId from LWC to apex controller?

Explain @wire decorator in Lightning Web Component in detail?

 The Lightning Web Components programming model has three decorators that add functionality to a property or function. 

In this blog we will learn the use of "@wire decorator in Lightning Web Component".


1) @wire is used to read Salesforce data.

2) It is reactive i.e when it provisions the data the components rerender.

3) It is use to call an apex method.

We have to use default import syntax to import an Apex method as shown below in  Javascript Controller.

Syntax:

import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';


apexMethodName—This identifies the Apex method.

apexMethodReference—The name of the Apex method to import.

Classname—The name of the Apex class.

Namespace—If the class is in the same namespace as the component, don’t specify a namespace. If the class is in a managed package, We have to specify the namespace of the managed package.


To call an Apex method, a Lightning web component can do the following:

1) Wire a property
2) Wire a function
3) Call a method imperatively


Wire an Apex Method to a Property:


import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';
@wire(apexMethod, { apexMethodParams })
propertyOrFunction;


apexMethodParams—An object with parameters for the apexMethod, if needed.

propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property or an error property.


wireExample.html

<template>
    <div >
        <p>Displaying Contact Data</p>
        <template if:true={contacts.data}>
            <template for:each={contacts.data} for:item="contact">
                <p key={contact.Id}>{contact.Name}</p>
            </template>
        </template>
        <template if:true={contacts.error}>
           
        </template>
    </div>

</template>



wireExample.js

import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/FetchContact.getContactList';

export default class wireExample extends LightningElement {
    @wire(getContactList) contacts;

}


FetchContact.cls


public with sharing class FetchContact {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        return [
            SELECT Id, Name
            FROM Contact
            LIMIT 5
        ];
    }
}


wireTestingApp.app


<aura:application>
<c:wireExample></c:wireExample>
</aura:application> 


Output:

@wire in lwc


Wire an Apex Method to a Function:


wireaFunctionExample.html


<template>

    <div >

        <p>Displaying Account Information</p>

        <template if:true={accountRecord}>

            <template for:each={accountRecord} for:item="item" for:index="index">

                <p key={item.Id}>

                   Name: {item.Name}

                   <br/>

                    Industry: {item.Industry}

                </p>

            </template>

        </template>

        <template if:true={error}>

            Some error occured.

        </template>

    </div>

 

</template>


wireaFunctionExample.js


import { LightningElement,wire,track,api } from 'lwc';

import getAccountData from '@salesforce/apex/getAccountRecord.getAccountRecordMethod';

 

export default class WireaFunctionExample extends LightningElement {

    @api recordId;

    @track accountRecord;

    @track error;

 

 

    @wire(getAccountData,{ recordIdAccount: '$recordId'}) 

    accountsData({ error, data }) {

        if (data) {

            //console.log('RecordId is'+recordId);

            this.accountRecord = data;

            this.error = undefined;

        } else if (error) {

            //console.log('Error block');

            this.error = error;

            this.accountRecord = undefined;

        }

    }

}



wireaFunctionExample.js-meta.xml


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

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

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>


getAccountRecord.cls


public with sharing class getAccountRecord {

  

    @AuraEnabled(cacheable=true)

    public static List<Account> getAccountRecordMethod(String recordIdAccount) {

    List<Account> accList=[SELECT Id, Name, Industry

        FROM Account

        Where id=:recordIdAccount];

        return accList;

    }

}


OUTPUT:

@wire decorator in Lightning Web Component

lightning-record-view-form in LWC

 lightning-record-view-form use lightning-output-field and is used to display information related to that record. The field-level security and sharing are taken into consideration by this component so user will only see the data they have access to.

Note:

1)Not all standard object are supported.
For ex: Event and task.

To display the fields on a record, use lightning-output-field.


lightningRecordViewFormExample.html

<template>

    <lightning-record-view-form

            record-id={recordId}

            object-api-name="Account">

        <div class="slds-box">

            <lightning-output-field field-name="Name">

            </lightning-output-field>

            <lightning-output-field field-name="Description">

            </lightning-output-field>

        </div>

    </lightning-record-view-form>

</template>


lightningRecordViewFormExample.js

import { LightningElement,api } from 'lwc';

 

export default class LightningRecordViewFormExample extends LightningElement {

 

    @api recordId;

}


lightningRecordViewFormExample.js-meta.xml

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

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

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>


Output:


lightning-record-view-form in LWC

lightning-record-edit-form in LWC

 lightning-record-edit-form is used to display one or more fields related to the record by accepting record Id. We use lightning:inputField inside the lightning:recordEditForm to create editable fields. We can use lightning:outputField as well to display read-only information.

 lightning-record-edit-form Form supports the below features:

Display a record edit layout for editing a specified record.

Display a record create layout for creating a new record.


Editing a Record:

lightningRecordEditFormExample.html

<template>

    <lightning-record-edit-form record-id={recordId} object-api-name="Account">

        <lightning-output-field field-name="Name"></lightning-output-field>

        <lightning-input-field field-name="Description"></lightning-input-field>

        <lightning-input-field field-name="Industry"></lightning-input-field>

        <lightning-input-field field-name="Site"></lightning-input-field>

        <lightning-button

            class="slds-m-top_small"

            variant="brand"

            type="submit"

            name="update"

            label="Update">

        </lightning-button>

</lightning-record-edit-form>

</template>


lightningRecordEditFormExample.js

import { LightningElement,api } from 'lwc';

 

export default class LwcRecordEditFormExample extends LightningElement {

@api recordId;

 

}


lightningRecordEditFormExample.js-meta.xml

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

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

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>


Creating a Record:


lightningRecordEditFormExample.html

<template>

    <lightning-record-edit-form object-api-name="Account">

        <lightning-input-field field-name="Name">

        </lightning-input-field>

            <lightning-button

                class="slds-m-top_small"

                type="submit"

                label="Create new Account">

            </lightning-button>

    </lightning-record-edit-form>

</template>


lightningRecordEditFormExample.js

import { LightningElement,api } from 'lwc';

export default class LwcRecordEditFormExample extends LightningElement {

}


lightningRecordEditFormExample.js-meta.xml

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

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

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>