Create Dynamic Interactions Between Custom LWC and Standard Components

Lightning Message Service allows interaction only between custom components, 

what if we need to make a interaction between Custom & Standard Component for that Salesforce has Provided us with Dynamic Interactions

Dynamic Interactions allows custom components to send events that standard components can respond to.

How you can make your Lightning pages more dynamic and interactive by below small Example.

Lets Understand The Dynamic Interaction with a Short Example Below.

Requirement.

Create an app page with 3 columns with the following components

• Column 1: An LWC containing a slider that accepts values between 1 and 30
• Column 2: A rich text standard component with initial text: Move the slider to update results
• Column 3: A Recent Items standard component showing 5 records from Account, Contact, Case, and Lead

The following changes must automatically occur when the slider value changes

• The number of records shown in the Recent Items component must be updated to match the value chosen from the slider.
• The rich text component must be updated to show the message "Slider value has changed X number of times",  where X is the number of times the slider's value has changed

Code For Custom LWC Component

1. Lets create a LWC custom component with name as "slider"

HTML File for slider.HTML

<template>

    <lightning-card title="Update standard component behavior from custom components">

        <div class="slds-m-vertical_medium slds-p-left_medium">

            <h1 class="slds-text-heading_small"></h1>

            <p class="slds-text-body_regular">

                Update standard component behavior from custom components.

            </p>

        </div>

        <div class="slds-m-vertical_medium slds-p-left_medium">

            <lightning-slider label="Volume"

                              value={val} min="1"

                              max="30"

                              onchange={handleChange}>

        </lightning-slider>

        </div>

    </lightning-card>

</template>

JavaScript File for slider.js

import { LightningElement } from 'lwc';

export default class Slider extends LightningElement {

    val = 2; //Slider Default value

    clicks = 0;

    timer;

    /*Slider Change event*/

    handleChange(event) {

        clearTimeout(this.timer);

        const targetValue = event.target.value;

        this.timer = setTimeout(() => {

            //lwc-event-detail part

            const curEvent = new CustomEvent('sliderclicked', {

                detail: {

                    count: targetValue,

                    clicks: ++this.clicks

                }

            });

            this.dispatchEvent(curEvent);

        },200);

    }

}

Meta-XML file for slider

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

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

    <apiVersion>57.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__AppPage">

            <event name="sliderclicked" label="Slider Clicked"

                description="Click Slider To Return Recent Record">

                <schema>

                    {

                    "type": "object",

                        "properties": {

                            "count": {

                                "type": "integer",

                                "title": "Slider value",

                                "description": "Value of Slider."

                            },

                            "clicks": {

                                "type": "integer",

                                "title": "Slider Clicks",

                                "description": "The Number of time Slider Clicked."

                            }

                        }

                    }

                </schema>

            </event>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

Lets See How to Add interaction for Lightning APP Builder.

Adding App builder Interaction for Clicks property

Adding App builder Interaction for Count property

Please check salesforce Mini Hack Solved Video for Detail implementation of Above Requirement 

Requirement Implementation Link

#Salesforce#CRM#CloudComputing#BusinessAutomation#CustomerExperience#DigitalTransformation#SalesforceAdmin

#SalesforceDeveloper#SalesforceConsulting#SalesforceSolutions#MarketingAutomation

#SalesforcePlatform#DataIntegration#CustomerRelationshipManagement#SalesforceTraining

#SmallBusinesses#EnterpriseSolutions#SalesforceSuccess#AIinCRM#SalesforceApp#SalesforceCommunity

#SalesforceAnalytics#CRMStrategy#SalesforcePartners

#SalesforceTips#SalesforceInsights#SalesforceJourney#SalesforceEvents#SalesforceNews

#SalesforceEcosystem

Like our post & bookmark this blog for your future learning. Any suggestions and improvements are most welcome, please comment your suggestions and improvement in the comment box. 😍😍Happy Coding Sharing is Caring 😍😍