List View – Radio Button Control

Introduction

Have you ever ponder can you create a radio button on a list view? The standard answer given will be no, list view does not support any type of default controls. But by playing around with the HTML and Javascript, i will turn the answer from NO to YES!

One of my clients requires to come out a survey form to get the users’ response. This seems to be a simple list view but if you are using the standard the K2 SmartForm behaviour, the user will have to click/double click into each row then to select the answer. Can we make it better? The answer is yes!

How it works

This solution is done by integrating HTML, jquery and some configuration on the SmartForm rules and controls. Basically, the radio button execute the rule(s) using jquery to initiate SmartForm Button control.

Before you begin, you will need to have a good understanding on these technologies/skill set.

Quick Setup

  1. Create a table SMO that has a unique number column (preferably a Primary Key).
  2. Create a list view with the SMO
  3. Set it as a editable list view and click OK
    rb1

Steps

  1. Create two data label. One is for javascript and another one is to store the radio button value temporary.
  2. Create a button and set the button name as ‘btnSetAns’
    rb1
  3. Add the rule for the button as below:
    rb1
    For transfer data configuration
    rb1
  4. Disable List Item Change Rule
  5. Go to your data label which you have created for the input the javascript. Copy the text from here and paste it as an expression for the data label. (Take note to check on the Literal option.)rb1
  6. Drag and drop a data label control as one of your list view column and check it as Literal
  7. Open the expression configuration and configure with the IF operator as such:
    rb1
    (A) This is your SMO – Selected column
    (B) This is the True operator
    (C) This is the control (as html) to display when Selected = True:
    <input type=”radio” name=”resultID” value=”1” onchange=”SetRadioBtnResults(this);” checked>Ok</input><input type=”radio” name=”resultID” value=”0” onchange=”SetRadioBtnResults(this);”>Not Ok</input>

    Replace the ID in RED to your ID SMO column value.
    Replace the ID in ORANGE to your prefer display.

    (D) This is the control (as html) to display when Selected = False:
    <input type=”radio” name=”resultID” value=”1” onchange=”SetRadioBtnResults(this);”>Ok</input><input type=”radio” name=”resultID” value=”0” onchange=”SetRadioBtnResults(this);” checked>Not Ok</input>

    Replace the ID in RED to your ID SMO column value.
    Replace the ID in ORANGE to your prefer display.

  8. Once you have completed the above steps, save the form and you are done! Lets go and test your list view.

First Load

rb1

After selecting all the answers

rb1

PS: You may hide the Selected column as it is just use to show you the outcome.

 

Advertisements

3 comments

  1. We are trying to follow the above instructions but seem to be missing some major steps. Like – where is the button coming into play? How does the view look like after setting up all the rules (not the runtime screen) but the designer screen.

    We are in need of using a check box instead of a radio button and wanted to try and work backwards but can’t get the above instructions to work. We are now using K2 5 (so 2 years after this post)

    Like

    • Hi Angela,

      You will need to have both jquery and K2 smartforms knowledge to begin with. No controls will be shown in the designer screen as those are Jquery based on the output.

      As this is a jquery input, i believe there will not be a difference with the K2 versions.

      There are several ways to show as checkbox. You can do it just using out of box tying with SmartObject column and use a picture with expression based on the column value or to do some jquery inputs (similar to this particular blog).

      Like

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