#Lightning Web Components6 discussing

I use the Lightning Component "Tab" on a lightning page. Is there a way to get the URL to one of the component's tabs? Hovering over a tab just shows "javascript:void(0)".

For example, I want to give a user a direct link to the "Decisions" tab. But I can't because I don't know the URL to that tab.

Thanks,

Marc

#Lightning Component  #Lightning Web Components

Preventing Recursive Lightning Message Service Calls in Screen Flow LWCs Using a Source Flag 

When working with Lightning Message Service (LMS) inside Screen Flow embedded LWCs, communication between components becomes extremely powerful — but it can also introduce unexpected recursive behaviour.

Recently, I encountered an interesting real-world scenario where two LWCs on a Screen Flow were unintentionally triggering each other repeatedly, causing incorrect value population even though the logic looked perfectly fine.

This blog walks through:

•  The Scenario 
•  The Problem 
•  Debugging Process 
•  Root Cause 
•  The Solution (Using Source Flag) 
•  Best Practices 
•  Final Takeaways 

Scenario

I had a Screen Flow containing two Lightning Web Components:

• LWC A — Publishes some values 
• LWC B — Publishes some values 
•  Both components subscribe to the same Lightning Message Channel

So essentially:

•  LWC A publishes → LWC B receives 
•  LWC B publishes → LWC A receives 

This setup is valid and expected — and initially, everything worked correctly.

However, as the use case evolved, values started getting populated incorrectly

. 

Even though:

•  Logic was correct 
•  Variables were correct 
•  Message structure was correct 

The values were getting overwritten incorrectly.

Example Behavior:

1.  LWC A publishes value 
2.  LWC B receives and updates 
3.  LWC B publishes updated value 
4.  LWC A receives again 
5.  LWC A publishes again 
6.  Loop continues... 

This created a recursive publish-subscribe loop

. 

To identify the issue:

•  Added console logs 
•  Checked publish events 
•  Checked subscription callbacks 

While debugging, I noticed:

• Publish method firing multiple times
• Subscription handler triggering repeatedly
• Unexpected value overwrites

This clearly indicated recursive message passing

. 

The root cause was:

Since both components:

•  Subscribe 
•  Update values 
•  Publish again 

It resulted in infinite cross-communication.

This is a common pitfall when using Lightning Message Service with multiple publishers

. 

The Solution — Using a Source Flag

To stop recursion, I introduced a Source Flag inside the message payload.

The idea:

•  Each LWC sends its name as source
•  When receiving a message: 
  •  If message source == current LWC 
  •  Ignore the message 

This prevents recursive triggering.

Example Message Payload

{
    value: selectedValue,
    source: 'LWC_A'
}

Implementation Example

Publisher

publishMessage() {
    const message = {
        value: this.selectedValue,
        source: 'LWC_A'
    };
    publish(this.messageContext, SAMPLEMC, message);
}

Subscriber

subscribeMessage() {
    this.subscription = subscribe(
        this.messageContext,
        SAMPLEMC,
        (message) => {
            if(message.source === 'LWC_A') {
                return;
            }
            this.selectedValue = message.value;
        }
    );
}

1.  LWC A publishes (source = LWC A) 
2.  LWC B receives 
3.  LWC B updates UI 
4.  LWC B publishes (source = LWC B) 
5.  LWC A receives 
6.  LWC A updates UI 
7.  No recursion 

#Lightning Web Components  #Lightning Message Channel  #Salesforce Developer  #Issues

Current error "Cannot find Lightning Component Bundle lwc learning."  Apparently at some point I created an LWC called lwc learning or lwc_learning. I now can't find the folder or file but when attempting to deploy source to org I can't do it :(     Is there a way to ignore this file or folder specifically? Or even better find and remove the reference.     Please halp.

#SFDX CLI #Lightning Web Components #Lightning Configuration 

Hi I am facing an issue while creating an Movie search app using the APIs.

1.⭐ https://m.media-amazon.com

  2.⭐ https://www.omdbapi.com

import { LightningElement } from 'lwc';

const DELAY=300;

export default class MovieSearch extends LightningElement {

    selectedType="";

    selectedsearch="";

    loading=false;

    selectedPageNo="1";

    delayTimeout;//to store the timeout delay

    // search filter for movies .....

    get typeoptions(){

        return[

        {label:"None",value: ""},

        {label:"Movie",value: "movie"},

        {label:"Series",value: "series"},

        {label:"Episode",value: "episode"}

    ];

    }

//here we are destructuring the values....

    handleChange(event)

    {

        let {name,value}=event.target;

        this.loading=true;

        if(name ==="type")

        {

            this.selectedType=value;

        }

        else if(name ==="search")

        {

          this.selectedsearch=value;

        }

        else if(name==="pageno")

        {

            this.selectedPageNo=value;

        }

        //debouncing process--> where we can delay the execution process for sometime that we want...

        clearTimeout(this.delayTimeout)// this will clears the existing timeout...

        this.delayTimeout =setTimeout(()=>{

           this.searchMovies();

        },DELAY);//always define the constants in Capital letters as a best practice.....

    }

//this method will search for the entered movies

// here we need to use the fetch method.

// Fetch method always returns the promise .

//to handle the promise we need to uise asyn and await.

   async searchMovies()

      {

        //how to put the url..

        // http://www.omdbapi.com/?i=tt3896198&apikey=ac0b1a0e

        //const URL='https://www.omdbapi.com/?s=${enteredValue}&type=${this.selectedType}&page=${this.pageNumber}&apikey=ddb0ceaa'---> Api key we need to enter from our mail;

        const url=`https://www.omdbapi.com/?s=${this.selectedsearch}&type=${this.selectedType}&page=${this.selectedPageNo}&apikey=ddb0ceaa`;// by using that url we are making API call

        const res=await fetch(url);//here we are calling the API

        const data=await res.json();//herte we atre storing the response in the property of a data by using the json.

        console.log("Movies Search Output",data);

      }

}

HTML:

<template>

   <!--Filter Section for the movies--> 

  <div>

<lightning-layout horizontal-align="center">

    <lightning-layout-item 

    padding="around-small"

    size="3">

    <!--Filter Section==> for the  type of movies(movie,series,episode)-->

    <lightning-combobox

            name="type"

            label="Type"

            value={selectedType}

           placeholder="Select Type"

            options={typeoptions}

            onchange={handleChange} ></lightning-combobox>

 </lightning-layout-item>

    <lightning-layout-item 

    padding="around-small" 

    size="7">

    <!--Filter Section{ by using the name we can search here }-->

    <lightning-input

            name="enter-search"

            label="Enter Search Item"

            placeholder="Search for Movie/Series"

            type="search"

            is-loading={loading}

            onchange={handleChange}

        ></lightning-input>

    </lightning-layout-item>

  <!--PAge Number Code-->

    <lightning-layout-item 

    padding="around-small" 

    size="2">

    <lightning-input 

    type="number" 

    name="pageno" 

    label="Page"

    onchange={handleChange}

    value={selectedPageNo}

    field-level-help="Range 1-100"

    min="1"

    max="100"

    step="1" 

    message-when-range-underflow="Minimum value is 1"

    message-when-range-overflow="Maximum value is 1">

    </lightning-input>

    </lightning-layout-item>

</lightning-layout>

  </div>

   <!--Display Section-->

   <div>

   </div>

</template> #Salesforce Developer #Lightning Web Components #Lightning Experience #Integration #Salesforce Developer #LWC