Displaying an image dynamically based on a selected option

Built with KoboToolbox: User Solutions
,
1

The steps below can be used to display a specific image in a form based on an identifier or a selection.

For example, you may have a list of beneficiaries and want the form to automatically display the selected beneficiary’s photo.

The example works as follows:

  1. Select the person

    The first question is a select_one question where the user selects a person from a list.

  2. Create a second choice list linking each person to an image

    In the choices sheet, there is a second list called image. Each choice uses the same name as the corresponding personand specifies the relevant image file in the image column.

    For example:

    list_name name label image
    person person1 Person 1
    person person2 Person 2
    image person1 person1.png
    image person2 person2.png

    All of the image files referenced here need to be uploaded to the form’s media in KoboToolbox.

  3. Automatically display the corresponding photo

    The second question is another select_one, but it is configured so that the user does not actually make a selection:

    • choice_filter: name = ${person} limits the available choice to the image corresponding to the selected person.

    • calculation: ${person} dynamically sets that choice as the question’s value.

    • read_only: true prevents the user from changing it.

    • relevant: ${person} != '' only displays the photo once a person has been selected.

    • appearance: compact displays the image without taking up unnecessary space.

    The survey sheet looks like this:

    type name label calculation relevant read_only choice_filter appearance
    select_one person person Select person
    select_one image image Photo ${person} ${person} != '' true name = ${person} compact

This provides a relatively simple way to use a bank of images stored with the form and dynamically display the correct image based on another field.

I’ve attached the example XLSForm below.

Display-image.xlsx (11.7 KB)

5 Likes