Loading Forms While Embedded.

larsonchst · September 24, 2015

So I have a page that has a form embedded into it. The form works like this: it opens with a T&S page they have to agree to, then after they agree it goes to a second datapage that is the form. The problem is that I have it embedded into my sharepoint site, and when they submit the first page the second form refreshes the entire page and instead of being embedded in the site it is now just the datapage by itself.

Is there any way to make this work so it stays embedded?

LWSChad · September 24, 2015

Use iframes

IFRAME:

<iframe name="ifrPerson" class="licIframe" id="ifrPerson"></iframe>

HTML...

<!doctype html>
<html>
<head>
</head>
<body onload="resizeFrame('ifrPerson')">
	<div id="ifr" class="ifrContent killHeader">

<!-- caspio snippet -->
		<script type="application/javascript" src="xxx"></script>
                <script type="application/javascript">try{f_cbload("xxxxxxxxxxxxx","http:");}catch(v_e){;}</script>
<!-- caspio snippet -->

	</div>
</body>
</html>

I use a script to set iframe source...

document.getElementById('ifrPerson').src = 'lic-person.html?LeadID='+varLeadID;

and this one to resize the container... (must be called from the iframe)

//resize LIC iframe on iframe load
function resizeFrame(ifrName) {
    // Find the height of the iframe
	var ifrContentH = document.getElementById('ifr').scrollHeight;
    // is it too tall to be empty?
	if (ifrContentH > 32)	{
    // yup, then tell the parent to give it some room 
		window.frameElement.ownerDocument.getElementById(ifrName).style.height = ifrContentH+'px';
	} else	{
    // no, keep it 0px tall,,, or make it 0px after deleting a record.
		window.frameElement.ownerDocument.getElementById(ifrName).style.height = '0px';
	}
}

Hope it helps

larsonchst · September 24, 2015

I guess I should have mentioned I wanted a non iframe solution, sorry. While the iframes work, they get to be way too messy. One main issue is the frame size not being able to automatically adapt to the size of the form (which becomes an ugly issue when you have a lot of rules adding or removing fields).

It looks like your code has some resizing script. I'm guessing the src="XXX" should be the caspio form deploy link and the "xxxxxxxxxx" should be the initial height of the iframe? Is the http: after that supposed to be left like that or replaced with something?

LWSChad · September 24, 2015

iframes are a super challenge, but they were worth it to me.

check out my edit

Xiang · October 1, 2015

Hi Larson,

How are you?

Do you need a some kind of an Authentication, don't you?

Only if a user enters "Agree" or checks a checkbox, she can see the next form. Is it correct? If yes, I think, I have a solution.

Login

Loading Forms While Embedded.

Question

larsonchst

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

LWSChad

Link to comment

Share on other sites

larsonchst

Link to comment

Share on other sites

LWSChad

Link to comment

Share on other sites

Xiang

Link to comment

Share on other sites

Join the conversation

Browse