RSS

Category Archives: K2 for SharePoint 2013

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.

 

Dynamically Assigning Tasks to SharePoint 2013 Users

If you’re using the web designer for a K2 for SharePoint 2013 workflow and you assign a task to a user that someone selects from a people picker then you’ll notice it works pretty seamlessly. However, try do the same thing in K2 Studio and it fails miserably. This is because the value that’s stored for the selected task owner is the SharePoint ID, so if you do assign a task to that user it will be assigned to K2:MyDomain\167

Luckily there’s a way past this, but it’s not obvious. Thanks to Igor from K2 for helping me find this…

Step 1: Create a new SmartObject.

There’s a VERY useful service object which K2 include with the product but by default there’s no SmartObject available over it. We’re going to fix that by creating a new SmartObject for it. Run the SmartObject Testing Tool (in the bin folder) and look for this Service Object:

1 - Service Object

Once you’ve clicked “Create SmartObject” you can change the category (I’ll leave it as Default for now) and publish it:

2 - Published

Step 2: Test the new SmartObject

Open the category you published the SmartObject to and execute it. You’ll see pages of new methods available to you. Look for the one called “Get K2 FQN for SharePoint users” and fill in the details you want. The Site URL will be your SharePoint site, the K2 Label will always be “K2”, and in the User ids field you can enter in a semicolon-delimited list of SharePoint IDs. Run the method and AD users pop out the other end:

3 - Execute

That’s it. Hope that helps someone!