RSS

Category Archives: SmartForms

Hosting K2 forms in iFrames

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

  1. Add a data label to the form and check the ‘Literal’ button
  2. Add a rule on the form that executes when the form is initialized
  3. In the rule, transfer the following to the data label:
    <script>
    $(document).ready(function() {
    var body = document.body,
    html = document.documentElement,
    height = Math.max(body.scrollHeight, body.offsetHeight,
    html.clientHeight, html.scrollHeight, html.offsetHeight);
    if (parent.postMessage) {
    parent.postMessage(height, "*");
    }
    });
    </script>

Step 2: Add the event handler on the parent page

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

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