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

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.

2 thoughts on “Conditional Image Column in List View”

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