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

1.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

1.SubmitView

View 2: ApprovalView

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.

3.Form

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

4.SmartObject

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

6.WorkflowSetting1

Create a data field RequestID

7.WorkflowSetting2

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.

8.WorkflowSetting3

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

9.ManagerApproval.jpg

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.

5.Workflow.jpg

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

10.RulesStates.jpg

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

11.BaseState.jpg

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.

12.ManagerApproval

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.

13.FormInitializing.jpg

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.

16.FinalApprovalState.jpg

 

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 😊

17.UserAcceptanceState.jpg

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.

Advertisements

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

Using HighCharts in K2 Smartforms

Example_ChartThemes.png

 

High Charts are the customizable Out of the Box charts that we can integrate with Smartforms and are useful to improve the Visual Experience of data. These are available in K2 Market and doesn’t need any license to use. Below is the link from where we can download these controls

http://community.k2.com/t5/K2-blackpearl/HighCharts/bc-p/101072#M865

A zip file gets downloaded which needs to be extracted. Once you extract the file you will get 2 folders, an installer folder (V2.1 K2Field.K2Forms.Controls.Charting Installer) and the other one is the VisualStudio Solution folder(K2Field.K2Forms.Controls.Charting) with all the project files. Along with folders you will get some images and a document explaining about the usage of various HighCharts and its available customizations.

Now copy the folder V2.1 K2Field.K2Forms.Controls.Charting Installer to the K2 Server and run the RegisterCustomControl.bat bat file as administrator which will register the controls in K2 Smartforms. Once the bat file running completes restart K2 Blackpearl Service Instance. Now open Smart forms desinger and see the controls section and scroll down to see these Custom Controls available for use in SmartForms.

1Designer.jpg

 

Now let’s see how we can use these charts to show the data.

I have a Student’s SMO which gives list of student details. Now I will use these details to create a BarChart.

Create a new view and drag and drop Bar/Column/Line Chart control to the canvas. In Properties Section give chart Control a name and select the chart type that you wish to create. Now scroll down to DataSource Section and click the elliptical button to write an ADO Query using the Smartobject which gives the data.

2DesignerCharts.jpg

Write the Query similar to SQL Query but instead of table name use the smartobject name that gives you the data.

** You may not have all the Query options similar to SQL but most of them will work.

Here in my case SMO name is Students_SMO and the columns that I need to use are Name & Percentage so my query will be “SELECT Name, Percentage FROM Students_SMO”.

Once you write the query just click test Query to see the Chart preview on left and if everything looks good then click ok.

3ADOQuery.jpg

Now go to the Rules section and from Events tab select When the view Executes a method and select initialize and then from actions tab select transfer data rule and transfer text GO to bar chart control.

4Rules

Now we are done Just save the view add it in a form and run the form to see the result.

Final.jpg

That’s it this is how we can install and use the Custom Chart controls.

Thanks for Watching!!

 

Conditional Image Column in List View

Have you ever tried showing images based on conditions in smart forms List view column, if not then you need to have a look at this post to know how we do it.

Pictorial Representation of data always improves the look and feel of any UI. Let’s see how a list view which shows students results shows an image indicator for Pass or Fail as shown in below screen shot.

FinalList

To achieve this add a new column to list view and pull data label control on to this column. Now in columns properties set Literal to True and then add an expression as shown below.

Expression

Preview

If ( Result = True, <img class=”picture-control-inline” title=”Passed” tabindex=”0″ src=”/Runtime/Image.ashx?ImID=15″ style=” width: 25px;”>, <img class=”picture-control-inline” title=”Failed” tabindex=”0″ src=”/Runtime/Image.ashx?ImID=14″ style=” width: 25px;”> )

In above screen, first we need to pull an if condition from logical operators, then select the column from Smart Object which gives you True or False Result in to the first text box and then select equals operator from logical operators and then drag Boolean true to second text box. Now the 3rd text box should have the html text of Image for the True option (in my case Green Button), and the 4th text box should have the HTML text of image for the False option (in my case Red Button).

Green Image HTML Code:

<img class=”picture-control-inline” title=”Passed” tabindex=”0″ src=”/Runtime/Image.ashx?ImID=15″ style=” width: 25px;”>

 

Red Image HTML Code:

<img class=”picture-control-inline” title=”Failed” tabindex=”0″ src=”/Runtime/Image.ashx?ImID=14″ style=” width: 25px;”>

 

Now just save the expression and then run the form. You should see the images appearing based on the condition that we have set.

Here I have used the default images that are available in my K2 image options, but we have the flexibility to add the images that we like and use them as above. To add images K2 have provided you an option to upload the image that you like, to do this follow below options

How to Add a New image?

Take a picture control on the view and go to its properties, there you see a field called data source, one you click on it you will see a window with the default images as shown below. There you can use the options to add the image.

AddNewImage.jpg

Now once you got your image uploaded, you need to get the id of that image created in K2, so that you can use it in HTML as shown above.

 How to get the Image Id of a picture?

It’s so simple, once the image is shown on Smart form, select the developer tools of browser and select the picture element to find the image id as shown below. (Here it is 39)

IMGID.jpg

That’s it.

This is how we can use image columns and give better UI experience to people..

Debugging Smart Forms

K2 Have provided an option for us to debug the smart forms, which we can do by just adding a query string ?_Debug=1 to the smartform URL

1 is the value which indicates debugging level which ranges between 1 – 5

Below are the values which indicates the level of debugging
1 – Debug
2 – Message
3 – Info
4 -Warning
5 = Error

Please refer the K2 Url below which provides more information on this
https://help.k2.com/onlinehelp/k2smartforms/userguide/4.7/default.htm#manually_debugging_forms.html

Basic jQuery/Javascript samples in smart forms

This article explains you below things

  1. How to create a button using data label with JavaScript.
  2. Trigger a Button Click event to run smart form rules from JavaScript.
  3. Update a Data label value from JavaScript.

Create a simple button using data label and java script and show a sample alert on its click.

Step 1: Drag and Drop a data label on smart form.

Step 2: Now in Properties Set Literal property to true

Step 3: Navigate to Expression property click on ellipse button to add a new expression, copy below js script and click ok

 

<button onclick="javascript:alert('You Clicked a DataLabel Button!!!');">This is a Data Label Button</button>

 

That’s it, Now Run the form and you see a button created from a data label and JavaScript. Screen shot below.

JQueryDataLabel

Now let’s see How to Trigger a Button Click event to run smart form rules from JavaScript.

Step 1: Drag and Drop a new Button Control.

Step 2: Add click event to the button added in Step 1, and add a rule to show message “Hello from Button Control

Step 3: Now run the form and open developer mode (hit F12) and inspect the button element, copy the id of button that you have added in Step 1

Step 4: once you have the id, you need to modify the script of data label button as below.

<button onclick="javascript:document.getElementById('00000000-0000-0000-0000-000000000000_79af447e-1e21-9933-8152-588f18d59d72').click()">This is a Data Label Button </button>

 

**00000000-0000-0000-0000-000000000000_79af447e-1e21-9933-8152-588f18d59d72 has to be replaced with id you copied from step 3

That’s it, now when you click Data Label Button, you’ll see Button Control’s rules getting executed.

 

Now Update a Data label value from JavaScript.

This is pretty much similar as above

Drag and drop a new dataLabel find its id using developer mode and replace the datalabel button script as below.

<button onclick="javascript:document.getElementById('00000000-0000-0000-0000-000000000000_f62b3928-a6e5-e16d-794a-9e9f4588bb2b').innerHTML=’Dynamically Set Text’” ()">This is a Data Label Button </button>

 

That’s it when you click data label button, you see the text of data label getting changed to “’Dynamically Set Text”.

 

This is how we can play around with jQuery/javascript in smartforms.

 

How to restrict right click on an image control in K2 Smart form

This article describes how to restrict right click on an image control in K2 Smart form at run time.

To achieve this we can use jQuery/JavaScript, to bind ‘contextmenu’ event handler which will return false on Image right click in smart form.

Let’s walk through a small example where I have disabled right click on image. Here I have used both image tag and image id as selector to disable the right click.

Image tag will allow us to disable right click on all the images, while Image id will disable right click on a particular image.

Step1: In Your SmartForm Drag and Drop Data Label and Set Literal property as checked.

Step2: Set visible property to False.

Screen2

 

Step3: Now Under Expression property add below Script

  1. To disable right click on All Images on smart form. 
    
    $('img').bind('contextmenu', function(e) {
        return false;
    });
    
    
  2. To disable right click of a particular image on smart form
    Use below sample query to disable right click for particular image.

    
    
    $(“Image css selector path”).bind('contextmenu', function(e) 
       {
        return false;
       });
    

     

     

    To get “Image CSS selector path” refer below steps.

     Access Your Smart form in web page at runtime mode.

    Now access developer options in browser (hit F12), select inspect button and then click on image. Which will show you id as below highlighted.

    FormWithF12

  3.  

    Copy that id and replace in the above script text “Image css selector path”.

    < script >
    $('#00000000-0000-0000-0000-000000000000_eaba1ae9-6753-a2fb-dadf-1a0450e38262_Picture').bind('contextmenu', function(e) 
       { 
           return false; 
        });
    < /script >
    

     

    Now copy this script and add it to expressions property.

    Screen3

Step 4: Once you are done with Changes Save you smart form and access in run time mode.