Combining ASP.Net form with K2 Smartform using IFrame

This POC is about how we can integrate K2 smartform into an ASP.Net form which is using Iframe and pass data from ASP controls to the K2 smartform controls.

Let’s see how we can do it.

First create a simple K2 Smartform (POC.SMF.ASPSmartForm) with 2 parameters Value1 & Value2 and 2 Textbox Controls. In form initialize rule add transfer data rule to transfer parameter values to textbox values.

K2SMF1

Next create an ASP.Net form with name ASPSmartForm.aspx in which we have to take 2 textboxes Textbox1, TextBox2 and an Iframe control (Name: myK2IFrame) for which the URL we have to set the URL of smartform which we created above.

i.e. http://k2-runtime/Runtime/Runtime/Form/POC.SMF.ASPSmartForm/

http://k2-runtime/Runtime/Runtime/Form/POC.SMF.ASPSmartForm/

 

Now in aspx page head section add below Javascript  code (Method Name : SendData) which gets the data from textboxes and passes to k2 smartform

<head runat="server">
    <title></title>
    
        function SendData() {
            var tb1 = document.getElementById("TextBox1");
            var tb2 = document.getElementById("TextBox2");
            var myK2IFrame = document.getElementsByName('myK2IFrame')[0];
            if (tb1 != null && tb2 != null)
                var URL = "http://K2-Runtime2/Runtime/Runtime/Form/POC.SMF.ASPSmartForm/?Value1=" + tb1.value + "&Value2=" + tb2.value;
            if (myK2IFrame != null)
                myK2IFrame.src = URL;
        }
       
</head>

 

Now in textbox controls add onChange Event and call the SendData JavaScript method

<asp:TextBox ID="TextBox1" runat="server" onchange="SendData()"></asp:TextBox>        
<asp:TextBox ID="TextBox2" runat="server" onchange="SendData()"></asp:TextBox>

 

Now if we observe the code whenever value is changed in any of the ASP text boxes then the same value will get populated in the K2 Smartform TextBoxes. We are using URL Parameters of K2Smartform to pass the values from ASP to K2 Smartform.  Now save the aspx and the final form should look like below.

ASPForm2

Run the form in browser and enter the values in asp textbox controls  to see the values getting passed in to K2 textboxes. see the gif below.

POCIFrame

That’s it, this is how we can integrate ASP.Net forms with K2 Smartforms and can extend their possibilities and features to a wider prospects.

We can extend this POC to get the data in reverse from K2 controls to ASP Controls.

Thanks for watching!!

Advertisements

Author: Vijay

I'm a K2 Certified Developer, helping teams to automate, design, develop & maintain business process applications connecting across multiple platforms with multiple technologies.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s