Veer Jawan Amar Rahe!! Revenge Will be Taken !! Jai Hind!!

Pulwama Attack on our Brave India Soldiers!!! Revenge Will be Taken!!

How to Show Checkboxes in a Readonly ListView and Select the row on click of Checkbox


Hello Friends,

It’s been quite a while since I have created a new post as I was not getting time to do so.

Recently one of my friend approached me for a typical requirement in which he need to show a checkbox in a Read-only List view and then user check’s those check boxes to select rows which could be multiple at a time, Generally K2 smartforms doesn’t show checkboxes in read-only mode of  a list view. We know that we can select multiple rows using control + Mouse click on the row, but client was not happy with that approach and he insisted to use checkbox option in the grid.

Let’s see how we can do that.

Step 1: In the list view create a new column and drag a datalabel control into it. Check the Literal property and in Expression click on ellipse button, click add and then give expression a name and paste below script in it and click ok.

<input type="checkbox" />


Step 2: Create a new data label with name dlHighlightRow and drag on the layout and set visible to false. Now in layout click expression Symbol   click add and create new expression with name Highlight and paste below code in it and save.

 $('input[type="checkbox"]').each(function(index, item) {       
 if ($(this)[0].checked) {           
   $(this).closest('tr').addClass('highlighted selected');       
  } else {           
   $(this).closest('tr').removeClass('highlighted selected');       

Similarly add one more expression with below script and name it as NoScript


** Don’t forget to add script tags in starting and ending of jquery code, Here in post they are getting removed by default.  script

Step 3: Now in list view item click rule add below rules to set the expression value to data label dlHighlightRow first with Highlight Expression and second with NoScript Expression. Also set literal property to . This way we are dynamically injecting the script into the form also for each item click we are making it run.


Now you can use the rule For all Selected rows of the lisView to get the selected rows. That’s it, now save the view and run it see the Jquery Magic 😊 Note: The Highlight Expression that we created above has the main logic of looping through the checkboxes and see if it is selected and make the row selected. This script may not function properly if your view has more checkboxes other than that of in first column. If you have so, then we need to add a class in checkbox expression as below

<input type="checkbox" class="gridCities-CheckBox"/>

And Highlight expression we need to modify the code as

 $('.gridCities-CheckBox').each(function(index, item) {       
  if ($(this)[0].checked) {           
   $(this).closest('tr').addClass('highlighted selected');  
  } else {           
   $(this).closest('tr').removeClass('highlighted selected'); 

Also, there is another approach to achieve this which can be found at below article.

Note : In the approach explained in above article, list item click event & list item double click events will be disabled.


What are K2 Composite Smart Objects and how to create them.

K2 have provided a great feature to join data from multiple data sources into single dataset. If your application has data coming from multiple lob’s like SQL, Sharepoint, WCF Services, REST Services etc and you need to combine the data and show them as single dataset then composite smart objects are perfect pick for you. They are like Joins in SQL, but the data sources can be different.
Let’s see how we can create with an example.
**Before moving further, I would like to mention you that Composite SmartObjects can be created either in VisualStudio or K2 Studio. (In K2 Designer we can’t, not until K2 Version 4.7 as I know).
Coming to example, I have Departments data (Department ID, DepartmentName) in K2 SmartBox
and Employees data in SQL Server


Now we shall join the above data by creating a composite smartobject and execute it to see the result.
Step 1: Open Visualstudio, Create New K2 Empty project give it a name and in solution explorer right click add new smartobject and give it a name here it is (Employees) and click ok. Now at the top of window click AdvancedMode, under SmartObjectMethods click remove all and click ok


Step 2: Under SmartObject Methods, click on Add, Select AdvancedMode Checkbox and click next, provide a name and select list in Type Dropdown and click Next, Now in method parameters window click next as we can add parameters later while configuring,
Step 3: Now in ServiceObjectMethods window click Add and select the dbo.Employees table List method from the context browser under the SQL Server Service Instance

Now Map the properties or simply click Create All to auto map the properties. Once done you should see below window

Click Ok and you should see the ServiceObjectMethod Window
Step 4: Again, Click Add and repeat the same steps for Departments.List which will be under K2 Smartbox Service instance once done click Ok

Step 5: Now we are at Service Method Link Window which is the main step of this SmartObject Creation. Here in first Dropdown select the Employees SQL Service Instance Method and in Link Type Dropdown select Matching Values in both objects and in 3rd dropdown select the Departments Smartbox Service method and in properties below, select DepartmentId and click assign and from the dropdown select DepartmentId and click ok.
Now we have joined SQL Server Employees Data with Smartbox Departments data using DepartmentId which is the common column in both data.
Link Type is kind of Join type as in SQL server. Here we have 4 different options of link types

1. Matching Values in both objects (similar to SQL Inner Join)
2. All Values for first object (Left Join)
3. All Values for Second object (Right Join)
4. All values for both objects (Outer Join)

Step 6: Just click ok and you are good to deploy and run the smartobject to see the results.

Using States in Smartforms to manage approval Views at different stages of workflow

Let’s see how we can use Smartform’s states to show different views at different approval stages of a workflow using a sample process as shown below

Process Flowchart


Now above flowchart has 3 approval activities Manager Review, Final Review & User Acceptance. In general approach, we need 3 forms for above activities and 1 for submitting the request so total 4 forms. Now using these states, we just need one form to handle all these. Let’s see how we can do.

Step 1: Creating Views and Forms

We need one view to submit the request & one for approval activities. Design 2 views as below

View 1: SubmitView


View 2: ApprovalView


Now create one smartform and add these views in that. Note that ApprovalView needs to be dragged twice which we are going to use one for ManagerApproval & one for FinalApproval. Please see below screenshot.

Here in form I have took 3 tables which has 3 buttons in each of them. These tables will be shown according to approval activity.


Step 2: Creating a Smartobject

Create a smartobject to store the data of the all form fields. Here I have created a smartbox smartobject as below


Step 3: Create Workflow

In designer, create a new workflow give it a name, in forms section select the form that we have created above, and select Use an existing state and select Base State


Create a data field RequestID


Now in configure start rule of workflow, form rules will be automatically populated. if it doesn’t show up here, we need to write the submit rule in form and come back here to configure this step.

Here I have already written those rules in submit button click rule of form.

Now finish.


Creating Manager Approval Task

  • Now drag a new User Task on to canvas.
  • Give Manager Approval as name.
  • Add Approve & Reject as actions & Check 2 checkboxes that are shown there and Click
  • It will show outcome settings just leave the options as it is and click Next.
  • In Participants section drag the Manager to the task group.
  • In UserForm Section select Create a new State option give ManagerApproval as name & click Action Settings button select I will configure the action later option and click Finish and click
  • In next form let the default options as it is and click Finish.

Check the screen shot below


Now similarly configure the other 2 approval activities Final Approval & User Acceptance. Both activities should have the same form that we selected above and in every case we need select create a new state option and give FinalApproval & UserAcceptance as state names

And in all reject cases send a mail using email event and also in accept case too.

Below is the workflow screen shot after changes.


Step 4: Configure Smartform rules

Now when you open the smartform and navigate to rules section you should see 4 states, (Base State), ManagerApproval, FinalApproval, UserAcceptance. See screenshot below


State are similar to views in SQL, they are used to show the data according to the user or approval activity.

Here in this case (Base State) is considered as a form to Submit Request.  In this state, we will hide the other 2 views and show buttons that are used to submit the request . Rest all controls are made hidden. This will be considered as the default state of this form. It will look as below screen once the rules are configured


Please note that all the base state rules will be automatically derived into other states.

  • Now let’s configure the next State ManagerApproval.

Click on state ManagerApproval and see the rules that are in base state are already appearing here. Here I’ve created an unbound rule LoadManagerApproval in which I have wrote the rules for hiding the controls of submit state, make the second view visible and make the controls in first view as non-editable.


Now in form initializing rule you should see a rule which got automatically added from workflow.

Here in open Manager Approval Worklist item rule configure options get the RequestID from output mappings of the workflow Datafields. Use this RequestID to load the data from smartobject and populate in first view.


Same way we need to configure the other states by showing and hiding controls/views based on the approval activities. Once all the rules are configured the forms should look as below

SubmitRequestView (BaseState)

Once the request is submitted. 14.submitState

Manager Approval (ManagerApproval State)

Once the request is submitted approval task will be assigned to his manager and below is the screen shot of the how this view would look like. Now Manager reviews and provides his feedback and approves the request.

15.ManagerApprovalState.jpgFinal Approval (FinalApproval State)

Below is the screenshot of how the approval form will look like. Final Approver will review the ratings and provide his feedback and sets the final rating and approves the request.



Now the requestor gets the task to review his rating and accept it.

User Acceptance (UserAcceptance State)

User gets the task to review his rating and he can either accept or adjust/Resign 😊


Once he accepts, the workflow will end and task will be completed.

That’s it!! This is how we can use smart form states to show a single form to show different views at different approval activity levels.

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.


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/



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">
        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;


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.


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.


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!!