Sometimes you want to host a K2 form in another html page. SharePoint is a great example of this. The issue is that you want it to be nice and seamless with no scrollbars. Using JQuery you can resize the frame to fit the contents, but thanks to security requirements the hosting page is not allowed to access the contents of the page it’s hosting. This means your hosting page can’t access the height of the contents, so you don’t know how to resize the frame.

Luckily there’s a very simple way to accomplish this.

Let’s say you have a SharePoint page that needs to host a K2 SmartForm. Your html would contain something like this:

<iframe id="k2iFrame" style="width: 100%;" src="https://k2.smartflow.solutions/Designer/Runtime/Form/Home" width="300" height="150" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

If you run it like this, you’re going to get a frame with the default height and most of the form is cut off. Here’s the solution:

Step 1: Have the K2 form send it’s height to the parent

<script><br />
$(document).ready(function() {<br />
var body = document.body,<br />
html = document.documentElement,<br />
height = Math.max(body.scrollHeight, body.offsetHeight,<br />
html.clientHeight, html.scrollHeight, html.offsetHeight);<br />
if (parent.postMessage) {<br />
parent.postMessage(height, "*");<br />
}<br />
});<br />
</script>

Step 2: Add the event handler on the parent page

<iframe id="k2iFrame" style="width: 100%;" src="https://k2.smartflow.solutions/Designer/Runtime/Form/Home" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<script type="text/javascript"><br />
var k2Resize_resize = function (event) {<br />
var k2iFrame = document.getElementById('k2iFrame');<br />
if (k2iFrame) {<br />
k2iFrame.style.height = event.data + "px";<br />
}<br />
};<br />
if (window.addEventListener) {<br />
window.addEventListener("message", k2Resize_resize, false);<br />
} else if (window.attachEvent) {<br />
window.attachEvent("onmessage", k2Resize_resize);<br />
}<br />
</script>

That’s it. Obviously this won’t handle resizing forms, but this should get you started. Hope that helps.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>