ABSYZ ABSYZ

  • Home

    Home

  • About us

    Who We Are

  • Our Expertise

    What we Do

  • Our Approach

    How We Do It

  • Products

    What We Made

  • Industries

    Who We Do It For

  • Clients

    Whom We Did It For.

  • Article & Blogs

    What Experts Think

  • Careers

    Join The Team

  • Get In Touch

    Let’s Get Started

ABSYZ

LWC with Aura Components,Calling controller from LWC,LDS in LWC

Home / Article & Blogs / Salesforce / Lightning / LWC with Aura Components,Calling controller from LWC,LDS in LWC
By Team ABSYZ inLightning, Lightning Web Components

Calling controller from LWC:

Lightning web components can import methods from Apex classes into the JavaScript classes using ES6 import.Once after importing the apex class method you can able to call the apex methods as functions into the component by calling either via the wire service or imperatively.

https://videopress.com/v/gAkX46zD?preloadContent=metadata

Import Syntax

import apexMethod from’@salesforce/apex/Namespace.Classname.apexMethod’;

apexMethod : This identifies the Apex method name.

Classname : The Apex class name.

Namespace : The namespace of the Salesforce organization

To expose an Apex method to a Lightning web component, the method must be static and either global or public. Annotate the method with @AuraEnabled

[sourcecode language=”java”]

public with sharing class ContactAuraService {

    public ContactAuraService() {

    }

    @AuraEnabled(cacheable=true)

    public static List<sObject> getContactList(){

        String query = ‘select id,Name,Email,Phone From Contact’;

        return database.query(query);

    }

}

[/sourcecode]

After importing the apex class method you can able to call the apex methods as functions into the component by calling either via the wire service or imperatively. We have three ways to call Apex method

1.Wire a property

2.Wire a function

3.Call a method imperatively.

1.Wire a property:

<!–LWCWireExample.html–>

[sourcecode language=”java”]

<template>

    <lightning-card title=”Wire a property” icon-name=”standard:contact”>

            <div class=”slds-m-around_medium”>

                <template if:true={contacts.data}>

                    <template for:each={contacts.data} for:item=”con”>

                        <p key={con.Id}>{con.Name}</p>

                    </template>

                </template>

            </div>

        </lightning-card>

</template>

[/sourcecode]

<!–LWCWireExample.js–>

[sourcecode language=”java”]

import { LightningElement, wire } from ‘lwc’;

import getContactList from ‘@salesforce/apex/ContactAuraService.getContactList’;

 

export default class LWCWireExample extends LightningElement {

    @wire(getContactList) contacts;

}

[/sourcecode]

<!–LWCWireExample.js-meta.xml–>

[sourcecode language=”java”]

<?xml version=”1.0″ encoding=”UTF-8″?>

<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”LWCWireExample”>

    <apiVersion>45.0</apiVersion>

    <isExposed>true</isExposed>

    <masterLabel>Wire a property For Contact List</masterLabel>

     <targets>

    <target>lightning__AppPage</target>

    <target>lightning__RecordPage</target>

  </targets>

</LightningComponentBundle>

[/sourcecode]

2.Wire a function:

This mechanism is needed if you want to pre-process the data before going to the Lightning App.

<!–LWCWireExample.js–>

[sourcecode language=”java”]

import { LightningElement, wire,track } from ‘lwc’;

import getContactList from ‘@salesforce/apex/ContactAuraService.getContactList’;

export default class LWCWireExample extends LightningElement {

    @track contacts;

    @track error;

    @wire(getContactList)

    wiredContacts({ error, data }) {

        if (data) {

            this.contacts = data;

        } else if (error) {

            this.error = error;

        }

    }

}

[/sourcecode]

<!–LWCWireExample.html–>

[sourcecode language=”java”]

<template>

    <lightning-card title=”Wire To a function Example” icon-name=”standard:contact”>

         <div class=”slds-m-around_medium”>

            <template if:true={contacts}>

                <template for:each={contacts} for:item=”con”>

                    <p key={con.Id}> {con.Name} </p>

                </template>

            </template>

            <template if:true={error}>

                {error}

            </template>                

        </div>

    </lightning-card>

</template>

[/sourcecode]

<!–LWCWireExample.js-meta.xml→

[sourcecode language=”java”]

<?xml version=”1.0″ encoding=”UTF-8″?>

<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”LWCWireExample”>

    <apiVersion>45.0</apiVersion>

    <isExposed>true</isExposed>

    <masterLabel>Wire to a function For Contact List</masterLabel>

     <targets>

    <target>lightning__AppPage</target>

    <target>lightning__RecordPage</target>

  </targets>

</LightningComponentBundle>

[/sourcecode]

3.Call a method imperatively:

If an Apex method is not annotated with cacheable=true, you must call it imperatively.

<!–LWCWireExample.js→

[sourcecode language=”java”]

import { LightningElement, wire,track } from ‘lwc’;

import getContactList from ‘@salesforce/apex/ContactAuraService.getContactList’;

export default class LWCWireExample extends LightningElement {

    @track contacts;

    @track error;

handleLoad() {

getContactList()

.then(result => { 

this.contacts = result;

this.error = undefined;

})

.catch(error => {

this.error = error;

            this.contacts = undefined;

});

}

}

[/sourcecode]

<!–LWCWireExample.html–>

[sourcecode language=”java”]

<template>

     <lightning-card title=”Call a method imperatively Example” icon-name=”standard:contact”>

         <div class=”slds-m-around_medium”>

<p class=”slds-m-bottom_small”>

                <lightning-button label=”Get Contacts” onclick={handleLoad}></lightning-button>

            </p>

            <template if:true={contacts}>

                <template for:each={contacts} for:item=”con”>

                    <p key={con.Id}> {con.Name} </p>

                </template>

            </template>

            <template if:true={error}>

                {error}

            </template>                

        </div>

    </lightning-card>

</template>

[/sourcecode]

<!–LWCWireExample.js-meta.xml–>

[sourcecode language=”java”]

<?xml version=”1.0″ encoding=”UTF-8″?>

<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”LWCWireExample”>

    <apiVersion>45.0</apiVersion>

    <isExposed>true</isExposed>

    <masterLabel>Call a method imperatively</masterLabel>

     <targets>

    <target>lightning__AppPage</target>

    <target>lightning__RecordPage</target>

  </targets>

</LightningComponentBundle>[/sourcecode]

Lightning Web Components with Aura Components:

In an Aura component, to refer to either Aura components or Lightning web components, use camel case with a colon separating the namespace and the component name.Aura components can contain Lightning web components.However, the opposite doesn’t apply.Lightning web components can’t contain Aura components.

https://videopress.com/v/zQF9hWqg?preloadContent=metadata

<!–ContactList.cmp→

[sourcecode language=”java”]

<aura:component>

    <lightning:card title=”Aura component” iconName=”custom:custom14″ />

    <c:lWCWireExample/>

</aura:component>

[/sourcecode]

<!–TestApp.app–>

[sourcecode language=”java”]

<aura:application extends=”force:slds”>

    <c:ContactList/>

</aura:application>[/sourcecode]

LDS in Lightning Web Component:

LDS is the Lightning Components counterpart to the Visualforce standard controller, providing access to the data displayed on a page. For Lightning components, Salesforce added a new Feature – Lightning Data Service (LDS) in its Winter ’17 release. We can use LDS in our Lightning components to perform CRUD operations like create,read,update a record without use of any Apex code.Now we see how to implement LDS in LWC.

Create Record through LDS :

First import the createRecord method from ‘lightning/uiRecordApi’ in client side controller.

https://videopress.com/v/B3l43t5o?preloadContent=metadata

Syntax:

import { createRecord } from ‘lightning/uiRecordApi’;

<!–accountMangerLds.html–>

[sourcecode language=”java”]

<template>   

 <lightning-card title=”Account Manager”>

        <lightning-layout>

                <lightning-layout-item size=”6″ padding=”around-small”>

<lightning-card title=”Create Account”>

<lightning-input label=”Id” disabled value={accountId}></lightning-input>

<lightning-input name=”Account Name”    label=”Account Name” type=”text” onchange= {accountNameHandler}></lightning-input>

<lightning-input name=”Account Phone”   label=”Account Phone” type=”phone” onchange= {accountPhoneHandler}></lightning-input>

<lightning-button label=”Create Account” variant=”brand” onclick= {createAccount}></lightning-button>

                       </lightning-card>

                 </lightning-layout-item>

          <lightning-layout-item size=”6″ padding=”around-small”>

     </lightning-layout-item>

   </lightning-layout>

</lightning-card>

</template>

[/sourcecode]

<!–accountMangerLds.js–>

[sourcecode language=”java”]

import { LightningElement, api } from ‘lwc’;

import { createRecord } from ‘lightning/uiRecordApi’;

export default class AccountManagerLDS extends LightningElement {

    @api accountName;

    @api accountPhone;

    @api accountId;

    accountNameHandler(event){

        this.accountId = undefined;

        this.accountName = event.target.value;

    }

    accountPhoneHandler(event){

        this.accountId = undefined;

        this.accountPhone = event.target.value;

    }

    createAccount(){

        const fields = {‘Name’ : this.accountName,’Phone’ : this.accountPhone};

        const recordInput = {apiName:’Account’,fields};

        createRecord(recordInput)

           .then(response=>{

            this.accountId = response.id;

           })

           .catch(()=>{

           

           });

    }

}[/sourcecode]

<!–accountMangerLds.js-meta.xm–>

[sourcecode language=”java”]

<?xml version=”1.0″ encoding=”UTF-8″?>

<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”accountManagerLDS”>

    <apiVersion>45.0</apiVersion>

    <isExposed>true</isExposed>

    <masterLabel>Create Record LDS</masterLabel>

     <targets>

    <target>lightning__AppPage</target>

    <target>lightning__RecordPage</target>

  </targets>

</LightningComponentBundle>[/sourcecode]

LWCSalesforce
171
Like this post
26 Posts
Team ABSYZ

Search Posts

Archives

Categories

Recent posts

Meet OmniStudio – Revolutionize Your Creative Work

Meet OmniStudio – Revolutionize Your Creative Work

BioAsia 2023 in Hyderabad: An Annual International Event

BioAsia 2023 in Hyderabad: An Annual International Event

The Role Of Marketing in Small & Medium Enterprises

The Role Of Marketing in Small & Medium Enterprises

Salesforce For Retail: How Salesforce CRM Can Help Retailers

Salesforce For Retail: How Salesforce CRM Can Help Retailers

What is ChatGPT & How Does It Work?

What is ChatGPT & How Does It Work?

  • Previous PostSalesforce Integration with QuickBooks
  • Next PostNavigate to Google Map from Salesforce

Related Posts

Difference Between Aura and LWC
Lightning Web Components Salesforce

Difference Between Aura and LWC

How To Use Navigation And Toast Messages in LWC Inside Visualforce Page?
Lightning Web Components Salesforce

How To Use Navigation And Toast Messages in LWC Inside Visualforce Page?

How To Read Excel Data Using LWC Salesforce?
Lightning Web Components Salesforce

How To Read Excel Data Using LWC Salesforce?

Why Do We Use Lightning in Salesforce?
Lightning Salesforce

Why Do We Use Lightning in Salesforce?

Leave a Reply (Cancel reply)

Your email address will not be published. Required fields are marked *

*
*

ABSYZ Logo

INDIA | USA | UAE

  • About us
  • Article & Blogs
  • Careers
  • Get In Touch
  • Our Expertise
  • Our Approach
  • Products
  • Industries
  • Clients
  • White Papers

Copyright ©2022 Absyz Inc. All Rights Reserved.

youngsoft
Copy
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “ACCEPT ALL”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent. Privacy Policy
Cookie SettingsREJECT ALLACCEPT ALL
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.

CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Functional

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.

Performance

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

Analytics

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.

Advertisement

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.

Others

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.

SAVE & ACCEPT