Javascript Widget
This widget utilizes the great cross-domain iframe resizer from David J. Bradshaw.
Features
- Dynamic iFrame height adjustment: responsive to Flow content and parent window responsive width
- Pass all query strings parent page to the iFrame
- Set manual querystring values in shortcode
- Finish URL for redirect on flow complete
Implementation Options
For folks running WordPress, I have a plugin available in the directory.
Folks looking to implement on any other site can use the pure javascript implementation.
Variable Options
Attribute Description Allowed Values Required Default
iframeurl url of the public visualforce page rendering the flow full url true “https://threelevers.secure.force.com/demo/iFrameDemo”
endurl url to redirect folks to upon completing the flow full url false none
height initial height of the iframe in pixels before fully loaded number of pixels (i.e. “75px”) false “50px”
extraqs any querystring you want to pass to the iframe, in addition to the querystrings on the parent page. key/value pair separated by “=”. pairs separated “&” (example “foo=bar&this=that”) false none
ease set if the height adjustment of the iframe is eased “true” or “false” false “false”
easespeed speed of the ease in seconds any number (example “.5” or “2”) false “.2”
lazy designate ‘loading=”lazy”‘ to iframe “true” or “false” false “true”
Demo
Loading
See external example on https://jsfiddle.net/jasonbest/e7r3618v
Instructions
- Prepare Lighting Flow on Visualforce page
- Make Visualforce Public
- Add code block to your page
1. Prepare Lightning Flow on Visualforce page
Follow the example from Salesforce to render the flow on a Visualforce page.
Next, you will need to add some lines of code to the Visualforce page to allow it it communicate with the parent page on which you will iframe it.
Add the javascript file right before the closing </head> tag. Be sure to update domain name to your domain.
Modify FINISHED behavior to redirect to url set in the shortcode.
if (event.getParam("status") === "FINISHED") {
// Control what happens when the interview finishes
var url = "{!$CurrentPage.parameters.endUrl}"; //capture value entered in shortcode
//check if any value was given for endurl
if (url.length > 1) {
window.parent.location.href = url; //redirect to endUrl
}
Optional
If you need to pass input variables to the flow, modify your inputVariables collection to reflect the variable names you will use. See the following example:
// Set the input variables
var inputVariables = [{
name: 'inputName1', //named Flow input variable
type: 'String', //variable data type
value: '{!$CurrentPage.parameters.qsname}' //name of the querystring you will use to popuate the variable
}];
Just above component.startFlow("myFlowName", inputVariables); add line 1-9 of the following code.
let height;
var checkExist = setInterval(function() {
height = document.body.scrollHeight;
window.parent.postMessage({
frameHeight: height
}, '*');
console.log(height);
}, 500); // check every 500ms
///////////
// Start an interview in the flowContainer div, and
// initializes the input variables.
component.startFlow("myFlowName", inputVariables);
2. Make Visualforce Page Public
Refer to the following documentation to create a Salesforce site with the proper configuration
3. Add Code Block to page
Add shortcode to your page. Follow the Shortcode Format and Options
Feedback and Support
Support for the WordPress plugin is available here.
If you need support for the javascript implementation, please complete the form below and I will get back to you when I am able.