Passing a web page URL parameter to a Leap app in an iframe

Use Case

You want to send a Leap notification with a link to web page and have a specific Leap record load (vs new form) in an iframe. This could be a follow-up notification where you want direct the user to a specific web page and have them see or edit a specific record.  This is a common requirement when building customer and partner portals. In these scenarios you typically want to direct all interaction back to a portal vs sending them to a standalone Leap app.

How to setup

Two things you need to do this:

In the Leap App Sending the Notification

  1. In the Leap app sending the notification you need to

    1.  Determine what the record ID is.

    2. To build the URL to the web page which include the record ID as a parameter.   

This can be done with the code below

var recID = BO.getDataId();  // this gets the record ID

// this builds the URL to the record
var webPageURL = 'https://yourwebpage'; //enter the url to the web page you want to send the user to
var URL = webPageURL + '?id='+ recID; //this appends the record ID as a parameter to the url

//this stores the URL in a field so you can use it in your notification
BO.F_Single4.setValue(URL);  // store in the field you have set in your app.  If the URL is long you might have to store in a multiline field.

On the Web Page you are Sending the User to

2. Next you need to add some JavaScript to the web page you are link to that reads the URL parameter and adds it to the iframe which displays the Leap app.  This can be done with the follow code:

<!-- this sets up the iframe shell -->
<iframe width = "70%" height="600" id="myIframe" src="" frameborder="0"></iframe>  

<!-- script which gets the parameter and sets the iframe src property -->
<script>
window.onload = function(){
	url = document.location.href;
	var paramId = new URL(url).searchParams.get("id");

	var frameElement = document.getElementById("myIframe");
	
<!-- if parameter is there the frame is set to load with it -->
	if (paramId !== null) {
	frameElement.src = 'http://leapsandbox.hclpnp.com/forms/secure/1/app/2cff1ab9-1e7d-4ddf-98bb-60844257c9c2/launch/index.html?form=F_Form1&id='+ paramId;
		}
	
<!--  otherwise it loads without the parameter -->
	else {
	frameElement.src = 'http://leapsandbox.hclpnp.com/forms/secure/1/app/2cff1ab9-1e7d-4ddf-98bb-60844257c9c2/launch/index.html?form=F_Form1';
		}
	}
</script>

Demo Example

HTML Code Used Below

The two URLs below will bring up a web page with a Leap app in an iframe.  The URL with the parameter will bring up the Leap app with that record.


Page with Empty Form

http://leapsandbox.hclpnp.com/Sandbox2/IframeParamExample.html

Page with Specific Record

http://leapsandbox.hclpnp.com/Sandbox2/IframeParamExample.html?&id=030fdd63-af02-4556-8c2c-44f427a5534b