Skip to main content
Participant
March 26, 2017
Question

Conditional formatting - image

  • March 26, 2017
  • 1 reply
  • 594 views

Hello,

How can I populate an image based on conditional formatting?

I am making an patient results form and based on each questions score I want to populate an answer that is both copy and an image. Right now I have the following code that is providing the copy answer:

var Deepsquat = this.getField("Deepsquat").value;

var Pain = this.getField("Pain").value;

var Red = this.getField("Red").value;

var Yellow = this.getField("Yellow").value;

var Green = this.getField("Green").value;

if (Deepsquat == "0") event.value = Pain;

if (Deepsquat == "1") event.value = Red;

if (Deepsquat == "2") event.value = Yellow;

if (Deepsquat == "3") event.value = Green;

How do create a corresponding image to populate along with their answer? Can I do this in a text box with the custom calculation script or is there another place to input the appropriate code?

Thank you.

This topic has been closed for replies.

1 reply

try67
Community Expert
Community Expert
March 26, 2017

You can create a set of button fields with the images as their icons and then show/hide those buttons based on the value entered by the user. By the way, if you only want the user to enter specific values (0-3, for example) you should use a drop-down field instead of a text field. You can still use the same validation script, though.

Participant
March 26, 2017

Thank you for the quick response and as such I am wondering if you can point me in a direction on how to use the button fields correctly. I know how to add the images to the button fields, but how and where do I enter the show/hide commands based on value. Do I need to enter this into the actions tab and show/hide field or run a javascript? And what's the right code needed? I see a lot of options on different forms and nothing seems to be working for me.

try67
Community Expert
Community Expert
March 26, 2017

You need to use JS, because it's conditional on the value of the other fields.

You can integrate the code into your existing code. Let's say you have a button field called "PainImage" and you want to show it when the Deepsquat field equals zero. You can add this code to your existing code:

this.getField("PainImage").display = (Deepsquat == "0") ? display.visible : display.hidden;

Repeat the same for the other image fields, and it should work as you've described.