1

I have a lightning component which is included inside a VisualForce page. When accessing the page directly with a url parameter 'Id' this works fine (component loads inside the vf page and display record details)

My next step is to call this vf page url from vf page button, so I created a custom button and referred the vf page url. Now i want to pass variable with url to LWC.

PROBLEM; when call from the url action it doesn't set value to the "strInput" parameter.

currentPageReference = null; 
urlStateParameters = null;

/* Params from Url */
urlId = null;
urlLanguage = null;
urlType = null;

@wire(CurrentPageReference)
getStateParameters(currentPageReference) {
   if (currentPageReference) {
      this.urlStateParameters = currentPageReference.state;
      console.log('URL--->'+this.urlStateParameters);
      this.setParametersBasedOnUrl();
   }
}

setParametersBasedOnUrl() {
   this.urlId = this.urlStateParameters.id || null;
   this.urlLanguage = this.urlStateParameters.lang || null;
   this.urlType = this.urlStateParameters.type || 'true';
} 

VF Page:

 <div style="text-align:center; height:20px;">
      <apex:form >
      <apex:commandButton id="ViewAll" value="LWC" onclick="CallLWC()"/>
      </apex:form>
      <script>
        function CallLWC(){            
        console.log('param is {!user.Id}')
        window.open("../apex/lwccalling?id={!User.Id}")
        }
      </script>
  </div>
1
  • I assume lwccalling is a visualforce page in which you're including the LWC somehow - can you share that piece of code?
    – Alba Rivas
    Sep 6, 2021 at 10:12

1 Answer 1

0

This does not answer directly the question of why it works one way but not the other, but maybe solves the issue:

Use a javascript function in LWC to get query parameters from URL:

function getQueryParameters() {
var params = {};

var searchParams = [];

let search = location.search;
search = search.startsWith("?") ? search.substring(1) : search;

search.split("&").forEach(element => {
    if (element.startsWith("?q=") || element.startsWith("q=")) {
        let decompressedValue = decompressQueryParams(element.split("=")[1]);
        searchParams.push("q=" + decompressedValue);
    } else {
        searchParams.push(element);
    }
});

if (searchParams.length > 0) {
    search = searchParams.join("&");
}
if (search) {
    try {
        params = JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g, '":"') + '"}', (key, value) => {
            return key === "" ? value : decodeURIComponent(value);
        });
    } catch (error) {
        return params;
    }
}

return params;
}

So that in your LWC you can say this:

/* Params from Url */
urlId;
urlLanguage;
urlType;
strInput;

connectedCallback(){
    let urlParams = this.getQueryParameters();
    this.urlId = urlParams['id'];
    this.urlLanguage = urlParams['lang'];
    this.urlType = urlParams['type'];
    this.strInput = urlParams['c__strInput']
}

getQueryParameters() {
    var params = {};

    var searchParams = [];

    let search = location.search;
    search = search.startsWith("?") ? search.substring(1) : search;

    search.split("&").forEach(element => {
        if (element.startsWith("?q=") || element.startsWith("q=")) {
            let decompressedValue = decompressQueryParams(element.split("=")[1]);
            searchParams.push("q=" + decompressedValue);
        } else {
            searchParams.push(element);
        }
    });

    if (searchParams.length > 0) {
        search = searchParams.join("&");
    }
    if (search) {
        try {
            params = JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g, '":"') + '"}', (key, value) => {
                return key === "" ? value : decodeURIComponent(value);
            });
        } catch (error) {
            return params;
        }
    }

    return params;
}
4
  • Suppose this is the URL XXXXXXX--c.visualforce.com/apex/LWCCall?c__strInput=true&id=0052K00000CBkb1QAD&inline=1. I Want this variable c__strInput=true in urlType. Sep 6, 2021 at 12:39
  • The code I proposed returns an object where the Keys are the parameters. You can do like this: this.getQueryParameters()['c__strInput'] Sep 6, 2021 at 13:00
  • in my code where it will fit? meaning calling of getQueryParameters Sep 6, 2021 at 13:04
  • I will edit my response and add your LWC Controller fixed Sep 6, 2021 at 13:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .