Introduction

The latest How To topics are available in the K2 Five User Guide or the K2 Cloud User Guide’s How to section.

This Knowledge Base article describes how to add conditional images to rows in a List View

Audience
  • Developers
  • Form Designers
Required Knowledge
  • Expression Builder
  • Views
  • Controls

Example Scenario

In the scenario below we have a list of debtors and the liability of each debtor (account) determines the color circle to be displayed indicating the severity of the liability. We are using an Editable List View with a Data Label for this purpose and conditional expressions are used on the Data Label to determine the specific image to be displayed. Any images can be used. We used red, green and orange circles of 16px by 16px dimensions.

Follow the steps below to set up the scenario:

  1. Create a SmartObject (named Accounts) to be used in a View
    Image
  2. Auto generate an Editable List View from the Accounts SmartObject
  3. Edit the View, add a column to the View and drag a Data Label into the new column
  4. Rename the Data Label to Severity Indicator
    Image
  5. Select the Body tab in the Properties section and click on Expression
  6. Add an expression called Severity Image Template
  7. Copy the following HTML into the drop zone as shown below. The location of your images and the image names should be added in the HTML as shown below. The {0} token will be replaced by the result of the If condition used later in the scenario
    <img style="width:16px; height:16px;" src="[Add the location of your images]"></img>

    For example:

    <img style="width:16px; height:16px;" src="http://dlx:81/Designer/Styles/Platinum/Images/Icons/Circle_{0}.png"></img>


    Check that the location of the images is displayed correctly in the Preview of the expression.

    Image


    In the example red, orange and green circle images are used as shown below. The images are copied to C:\Program Files (x86)\K2 blackpearl\K2 smartforms Designer\Styles\Platinum\Images\Icons. The location and image names should be applied in the code as shown above.

    Image

  8. Click OK to save the expression
  9. Add another expression that will evaluate your condition and return a file name accordingly, called Severity Images File Name
  10. Open the Operators tab and expand the Logical node. Drag the If function into the drop zone   
    Image
  11. Click on the Context tab and drag the Liability field of the Accounts SmartObject into the drop zone as shown below
    Image
  12. Click on the Operators tab and drag the Greater Than function into the drop zone as shown below. Type 500 and red as shown below 
    Image
  13. Use the same method to add the following statement in red shown below
    Image
  14. Click OK to save the expression
  15. Add another expression called Severity Images Add which will replace the {0} token mentioned earlier
  16. Click on the Operators tab, expand the Text node and drag the Replace function into the drop zone as shown below  
    Image
  17. Click on the Context tab, expand the Expressions node under the Accounts Editable List and drag the two expressions into the drop zones as shown below. Type {0} into the drop zone in the middle 
    Image
  18. Click OK to save the expression
  19. Select this expression to be applied on the Body of the Severity Indicator column
  20. Finish the View then Run the View
  21. Add a few records and note the color circles applied to indicate the severity of the liabilities
    Image