You need to sign in to do that
Don't have an account?
Betre Kenna
Pass URL Parameters to a Lightning Component with embedded flow.
I have a flow that has an input variable. I also have the following VF page which calls the flow. I would like to pass parameters to the lightning component inside the community using URL parameters like:
http://<<communityURL>>/<<communityName>>?varFormName=signup I have tried so many ways but not be able to pass the variable. Here is the code:
<apex:page id="TrainingRegistration" showHeader="false" docType="html-5.0"
lightningStyleSheets="true"
sidebar="false"
standardStylesheets="false">
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<apex:includeLightning />
</head>
<body class="slds-scope">
<div id="flowContainer"/>
<script>
// try to use a URL parameter to set the varFormName input variable for the flow
const queryString = window.location.search;
//alert(queryString);
const urlParams = new URLSearchParams(QueryString);
//alert(urlParams)
const varFormName = urlParams.get('varFormName'); //URL param name
var statusChange = function (event) {
if(event.getParam("status") === "FINISHED") {
// Control what happens when the interview finishes
var outputVariables = event.getParam("outputVariables");
var key;
for(key in outputVariables) {
if(outputVariables[key].name === "myOutput") {
// Do something with an output variable
}
}
}
};
$Lightning.use("c:publicForms", function() {
// Create the flow component and set the onstatuschange attribute
$Lightning.createComponent("lightning:flow",
{"onstatuschange":statusChange},
"flowContainer",
function (component) {
// Set the input variables
var inputVariables = [
{
name : 'varFormName',
type : 'String',
value : component.get(varFormName)
}
];
// Start an interview in the flowContainer div, and
// initialize the input variables.
//variable name inputVariables
//alert(inputVariables[0].value);
component.startFlow("Signup_Form", inputVariables);
}
);
}
);
// for scaling on mobile
window.onload = function(){
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute("content", "width=device-width, initial-scale=1.0");
}
</script>
</body>
</html>
I really appreciate any help you can provide.
http://<<communityURL>>/<<communityName>>?varFormName=signup I have tried so many ways but not be able to pass the variable. Here is the code:
<apex:page id="TrainingRegistration" showHeader="false" docType="html-5.0"
lightningStyleSheets="true"
sidebar="false"
standardStylesheets="false">
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<apex:includeLightning />
</head>
<body class="slds-scope">
<div id="flowContainer"/>
<script>
// try to use a URL parameter to set the varFormName input variable for the flow
const queryString = window.location.search;
//alert(queryString);
const urlParams = new URLSearchParams(QueryString);
//alert(urlParams)
const varFormName = urlParams.get('varFormName'); //URL param name
var statusChange = function (event) {
if(event.getParam("status") === "FINISHED") {
// Control what happens when the interview finishes
var outputVariables = event.getParam("outputVariables");
var key;
for(key in outputVariables) {
if(outputVariables[key].name === "myOutput") {
// Do something with an output variable
}
}
}
};
$Lightning.use("c:publicForms", function() {
// Create the flow component and set the onstatuschange attribute
$Lightning.createComponent("lightning:flow",
{"onstatuschange":statusChange},
"flowContainer",
function (component) {
// Set the input variables
var inputVariables = [
{
name : 'varFormName',
type : 'String',
value : component.get(varFormName)
}
];
// Start an interview in the flowContainer div, and
// initialize the input variables.
//variable name inputVariables
//alert(inputVariables[0].value);
component.startFlow("Signup_Form", inputVariables);
}
);
}
);
// for scaling on mobile
window.onload = function(){
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute("content", "width=device-width, initial-scale=1.0");
}
</script>
</body>
</html>
I really appreciate any help you can provide.
You can try below steps to fix the issue:
- Change urlParams = new URLSearchParams(QueryString); to const urlParams = new URLSearchParams(queryString); i.e Use queryString instead of QueryString.
- You can remove component.get(varFormName) and directly use the varFormName variable obtained from the URL as the value for the input variable.
Thanks.