Salesforce Lightning Web Components Communication

Parent-Child Component Communication

In Salesforce Lightning Web Components (LWC), communication between parent and child components is essential for building interactive and dynamic user interfaces. This communication can be achieved using public properties marked with @api to pass data from parent to child components.

Child Component (receives data via @api)

Let’s start with the child component, which receives data from the parent component through a public property.

childComponent.js

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
  @api message; // public property, reactive
}

childComponent.html

<template>
  <lightning-card title="Child Component">
    <p class="slds-p-around_medium">
      Message from Parent: {message}
    </p>
  </lightning-card>
</template>

Parent Component (passes data to child)

Now, let’s look at the parent component, which passes data to the child component using the public property defined in the child component.

parentComponent.js

import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
  parentMessage = 'Hello from Parent!';
}

parentComponent.html

<template>
  <lightning-card title="Parent Component">
    <p class="slds-p-around_medium">
      Parent says: {parentMessage}
    </p>

    <!-- Pass data to child via @api property -->
    <c-child-component message={parentMessage}></c-child-component>
  </lightning-card>
</template>

Child-Parent Component Communication

In Salesforce Lightning Web Components, child components can communicate with their parent components by dispatching custom events. This mechanism allows child components to notify parent components of changes or trigger specific actions in the parent component.

Let’s explore how child components can dispatch custom events to communicate with their parent components.

Child Component (dispatches event)

childComponent.js

import { LightningElement } from 'lwc';

export default class ChildComponent extends LightningElement {
  handleClick() {
    // Create and dispatch a custom event
    const myEvent = new CustomEvent('sendmessage', {
      detail: { text: 'Hello Parent, from Child!' }
    });
    this.dispatchEvent(myEvent);
  }
}

childComponent.html

<template>
  <lightning-card title="Child Component">
    <lightning-button label="Send Message to Parent" onclick={handleClick}></lightning-button>
  </lightning-card>
</template>

Parent Component (listens for event)

In the parent component, we need to listen for the custom event dispatched by the child component to receive and handle the data sent by the child.

parentComponent.js

import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
  parentMessage;

  handleMessage(event) {
    this.parentMessage = event.detail.text;
  }
}

parentComponent.html

<template>
  <lightning-card title="Parent Component">
    <p class="slds-p-around_medium">
      Message received from Child: {parentMessage}
    </p>

    <!-- Listen for custom event from child -->
    <c-child-component onsendmessage={handleMessage}></c-child-component>
  </lightning-card>
</template>

Publish-Subscribe Pattern

The publish-subscribe pattern, also known as Pub/Sub pattern, is a messaging pattern commonly used for communication between multiple components in an application. In Salesforce Lightning Web Components, the Pub/Sub pattern can be implemented using a central event bus or a third-party library to facilitate communication between components that are not directly related.

Let’s dive into how we can implement the Pub/Sub pattern in Salesforce Lightning Web Components.

Create a PubSub Utility

First, we need to create a utility for the Pub/Sub pattern that allows components to subscribe to and publish events.

pubsub.js

const events = {};

const subscribe = (eventName, callback) => {
  if (!events[eventName]) {
    events[eventName] = [];
  }
  events[eventName].push(callback);
};

const unsubscribe = (eventName, callback) => {
  if (events[eventName]) {
    events[eventName] = events[eventName].filter(listener => listener !== callback);
  }
};

const publish = (eventName, payload) => {
  if (events[eventName]) {
    events[eventName].forEach(callback => {
      try {
        callback(payload);
      } catch (error) {
        console.error(error);
      }
    });
  }
};

export default {
  subscribe,
  unsubscribe,
  publish
};

Publisher Component (publishes event)

Next, we have a publisher component that publishes an event using the Pub/Sub utility created earlier.

publisherComponent.js

import { LightningElement } from 'lwc';
import pubsub from 'c/pubsub';

export default class PublisherComponent extends LightningElement {
  handleClick() {
    pubsub.publish('messageEvent', { text: 'Hello from Publisher!' });
  }
}

publisherComponent.html

<template>
  <lightning-card title="Publisher">
    <lightning-button label="Publish Message" onclick={handleClick}></lightning-button>
  </lightning-card>
</template>

Subscriber Component (consumes event)

Lastly, we have a subscriber component that subscribes to the event published by the publisher component and consumes the data sent through the event.

subscriberComponent.js

import { LightningElement } from 'lwc';
import pubsub from 'c/pubsub';

export default class SubscriberComponent extends LightningElement {
  message;

  connectedCallback() {
    pubsub.subscribe('messageEvent', this.handleMessage.bind(this));
  }

  handleMessage(payload) {
    this.message = payload.text;
  }
}

subscriberComponent.html

<template>
  <lightning-card title="Subscriber">
    <p class="slds-p-around_medium">Received: {message}</p>
  </lightning-card>
</template>

The post Salesforce Lightning Web Components Communication first appeared on Vinod Sebastian - B.Tech, M.Com, PGCBM, PGCPM, PGDBIO.

Salesforce Lightning Web Components Concepts

@track

The @track decorator in Salesforce Lightning Web Components (LWC) marks a property as reactive. When a tracked property changes, the component’s template rerenders to reflect those changes. This decorator ensures that if a property changes, the component can react to that change and update the UI accordingly. All properties are reactive by default (no need for @track unless you want deep reactivity in nested objects/arrays).

@api

The @api decorator exposes a public property in a Lightning web component, allowing the property to be set from a parent component. This decorator marks a property as public and defines its behavior.

@wire

The @wire decorator enables the wiring of a Lightning web component to a wire adapter. Wire adapters are functions that receive configuration parameters and return data. By using the @wire decorator, a component can receive data from Salesforce without needing to write imperative Apex or JavaScript code.

Wire to Salesforce Data (UI API)

Fetch account records using the Lightning Data Service wire adapter:

import { LightningElement, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';

export default class WireDemoRecord extends LightningElement {
    recordId = '001XXXXXXXXXXXXXXX'; // Example Account Id
    accountName;
    accountIndustry;

    @wire(getRecord, { recordId: '$recordId', fields: [NAME_FIELD, INDUSTRY_FIELD] })
    wiredAccount({ error, data }) {
        if (data) {
            this.accountName = data.fields.Name.value;
            this.accountIndustry = data.fields.Industry.value;
        } else if (error) {
            console.error(error);
        }
    }
}

Apex Controller

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List getAccounts() {
        return [SELECT Id, Name, Industry FROM Account LIMIT 5];
    }
}

Example 2: Wire to Apex Method

Fetch data from a custom Apex class:

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List getAccounts() {
        return [SELECT Id, Name, Industry FROM Account LIMIT 5];
    }
}

LWC JavaScript

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class WireDemoApex extends LightningElement {
    accounts;
    error;

    @wire(getAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.accounts = undefined;
        }
    }
}

Imperative Call

In Lightning Web Components (LWC), an imperative call means you’re calling an Apex method directly from JavaScript instead of using @wire. This gives you more control (e.g., calling on button click, handling parameters dynamically, or chaining logic).

Apex Controller

public with sharing class AccountController {
    @AuraEnabled
    public static List getAccounts(Integer limitSize) {
        return [SELECT Id, Name, Industry FROM Account LIMIT :limitSize];
    }
}

LWC JavaScript (Imperative Call)

import { LightningElement, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class ImperativeCallDemo extends LightningElement {
    @track accounts;
    @track error;

    handleLoadAccounts() {
        getAccounts({ limitSize: 5 }) // Imperative call with parameter
        .then(result => {
            this.accounts = result;
            this.error = undefined;
        })
        .catch(error => {
            this.error = error;
            this.accounts = undefined;
        });
    }
}

ConnectedCallback

The connectedCallback lifecycle hook in Lightning web components is called when a component is inserted into the DOM. This hook is useful for performing tasks such as initializing state, setting up event listeners, or fetching data when the component is connected to the DOM.

import { LightningElement, track } from 'lwc';

export default class ConnectedCallbackDemo extends LightningElement {
    @track message = 'Loading...';

    connectedCallback() {
        // This runs when the component is added to the DOM
        console.log('Component connected to the DOM');

        // Example: simulate fetching data
        setTimeout(() => {
            this.message = 'Data loaded successfully!';
        }, 2000);
    }
}

CustomEvent

A CustomEvent in Salesforce Lightning Web Components is a way for a child component to communicate with its parent component. Custom events allow child components to dispatch events with data that parent components can listen for and handle.

The post Salesforce Lightning Web Components Concepts first appeared on Vinod Sebastian - B.Tech, M.Com, PGCBM, PGCPM, PGDBIO.

Salesforce Lightning Web Components Basic Project

Project Structure

A basic Salesforce Lightning Web Components (LWC) project typically follows a specific structure:

• lwc-project/
  • force-app/
    • main/
      • default/
        • aura/
        • lwc/
          • helloWorld/
            • helloWorld.html
            • helloWorld.js
            • helloWorld.js-meta.xml
            • helloWorld.css
        • classes/
• sfdx-project.json
• README.md

HelloWorld Component Files

helloWorld.html

The HTML file for the helloWorld Lightning Web Component:

<template>
    <lightning-card title="Hello World">
        <p class="slds-p-around_medium">Hello, {greeting}!</p>
        <lightning-input label="Enter your name" onchange={handleChange}></lightning-input>
    </lightning-card>
</template>

helloWorld.js

The JavaScript file for the helloWorld Lightning Web Component:

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {
    greeting = 'World';

    handleChange(event) {
        this.greeting = event.target.value;
    }
}

helloWorld.js-meta.xml

The XML metadata file for the helloWorld Lightning Web Component:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

The post Salesforce Lightning Web Components Basic Project first appeared on Vinod Sebastian - B.Tech, M.Com, PGCBM, PGCPM, PGDBIO.

Salesforce Lightning Web Components

Introduction to Salesforce Lightning Web Components

Salesforce Lightning Web Components (LWC) are a modern and lightweight framework designed for developing responsive web applications on the Salesforce platform. This innovative framework offers a host of benefits and features for developers looking to enhance their Salesforce development experience.

Understanding the Lightning Web Component Framework

The Lightning Web Component (LWC) framework is a cutting-edge programming model that enables developers to create web components utilizing standard web technologies such as HTML, JavaScript, and CSS. This framework is built on modern web standards to deliver exceptional performance and reusability in Salesforce development projects. Unlike its predecessor, Aura components, LWC adheres to the Web Components standard, facilitating the creation of components that seamlessly integrate with various frameworks and libraries.

Key Highlights of the Lightning Web Component Framework

• Performance: LWC is optimized for performance, ensuring fast loading times and smooth user interactions.
• Reusability: Developers can easily reuse LWC across different parts of their Salesforce applications, promoting code efficiency and consistency.
• Interoperability: LWC components are designed to be interoperable with other frameworks and libraries, allowing for seamless integration within diverse development ecosystems.
• Maintainability: The modular structure of LWC promotes clean and maintainable code, simplifying the development and management of complex applications.

Exploring LWC Fundamentals

Before delving deeper into Salesforce Lightning Web Components, it’s essential to grasp the fundamental concepts that underpin this powerful framework. Let’s explore the core principles and components that form the building blocks of LWC development.

Core Principles of Lightning Web Components

When working with Salesforce Lightning Web Components, developers should keep in mind the following core principles:

• Web Standards Compliance: LWC adheres to modern web standards, ensuring compatibility and future-proofing your applications.
• Component-Based Architecture: LWC follows a component-based architecture, allowing for modular development and easy maintenance.
• Event-Driven Programming: Events play a crucial role in communication between components in LWC, enabling seamless interaction and data exchange.
• Shadow DOM Encapsulation: LWC utilizes the Shadow DOM to encapsulate styles and markup, preventing style leakage and ensuring component isolation.

Core Components in Lightning Web Components

Lightning Web Components provide a set of core components that simplify common development tasks and enhance the user experience. Some essential core components include:

1. Lightning Button

Used for actions like submit, save, or custom events.

<lightning-button label="Save" onclick={handleSave}></lightning-button>

2. Lightning Input

Collects user input (text, number, email, etc.).

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

3. Lightning Card

Displays content in a styled card layout.

<lightning-card title="Account Details" icon-name="standard:account">
    <p class="slds-p-horizontal_small">This is account info.</p>
</lightning-card>

4. Lightning Datatable

Displays tabular data with sorting, inline editing, and actions.

<lightning-datatable
    key-field="id"
    data={accountData}
    columns={columns}
    hide-checkbox-column="true">
</lightning-datatable>

5. Lightning Layout

Flexible grid system for responsive design.

<lightning-layout>
    <lightning-layout-item size="6">
        <p>Left Column</p>
    </lightning-layout-item>
    <lightning-layout-item size="6">
        <p>Right Column</p>
    </lightning-layout-item>
</lightning-layout>

6. Lightning Record Form

Auto-generates a form for Salesforce records.

<lightning-record-form
    record-id={recordId}
    object-api-name="Account"
    layout-type="Full"
    mode="Edit">
</lightning-record-form>

7. Lightning Spinner

Shows a loading indicator.

<lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>

8. Lightning Tabset

Organizes content into tabs.

<lightning-tabset>
    <lightning-tab label="Details">
        <p>Details content here</p>
    </lightning-tab>
    <lightning-tab label="Related">
        <p>Related content here</p>
    </lightning-tab>
</lightning-tabset>

9. Lightning Toast (via JS)

Displays notifications programmatically.

import { ShowToastEvent } from 'lightning/platformShowToastEvent';
this.dispatchEvent(
    new ShowToastEvent({
        title: 'Success',
        message: 'Record saved successfully!',
        variant: 'success'
    })
);

The post Salesforce Lightning Web Components first appeared on Vinod Sebastian - B.Tech, M.Com, PGCBM, PGCPM, PGDBIO.