How to pass a data from a selected image using Image Picker and fill the value into other fields?

  • Profile Image
    Asked on December 08, 2017 at 05:08 PM

    I am using the Image Picker widget and passing the data into a Text box.

    The Image Picker widget is set to have the user select 4 images, but I can only pass the data from this widget to one area. I need each of the 4 images selected to appear in different areas of the Text widget. 

    Is there a way to assign more {codes} to the Image Picker widget>

  • Profile Image
    Answered on December 08, 2017 at 06:37 PM

    You can use the conditional logic and place a hidden fields with a pre-filled value in it.


    Here's the workflow and requirement:

    1. Add Image Picker Widget

    2. Add a Short Text Entry > set this field as hidden and use a pre-filled value.

    3. Add your Text field that will be filled when you click on any of the Image

    4. Add a conditional rule to update and calculate fields.


    Conditional statement: If "Image Picker" is equal to a value which is in my case the value is "Image 2" it will then insert the hidden field value into the target text field.

    You can follow my screencast below for your reference on how I achieve this workflow.

     Screencast link:


    Let me know if you have any questions.

  • Profile Image
    Answered on December 08, 2017 at 09:11 PM

    There's a workaround that you can try since you won't be able to get a separate unique id for each image in the widget unless you create another image picker widget which you won't have control of the max selection.

    The workaround is to create a separate Image element and use a condition to show and hide the images. Please check this sample form and see if this helps.

    Looking forward for your response.

  • Profile Image
    Answered on December 08, 2017 at 09:38 PM

    This is really close but just missing the second part of those images being aligned to different labels (I could try some CSS maybe).

    Before your response I was just working with 4 different Image Pickers like you suggested above. I am now having trouble with hiding/showing the submit button and error message, should two of the Image Picker selections be the same. The equals to condition doesn't appear to work well with the Image Picker unless I am doing something wrong.

    I appreciate your help.

  • Profile Image
    Answered on December 09, 2017 at 02:58 AM

    According to what I checked in your form, the conditions are correct and working:

    1512806225Screen Shot 2017-12-09 at 9.01

    I added this one as well:

    1512806245Screen Shot 2017-12-09 at 9.01

    And that is working just fine:


    Are you having any other problems with conditional logic and image pickers?

  • Profile Image
    Answered on December 09, 2017 at 05:33 AM

    Im not working on that form.


    I have an 4 separate Image Picker widgets:

    If 2 have same selection, I want show error text and hide submit button.


    EDIT -

    Figured it out.


    Now I am having problems with "sticky" positioning in the form. 

    div.container {

        position: -webkit-sticky;

        position: sticky;

        top: 10;   



    Does sticky not work with the forms?

    It looks like there is overflow-x: hidden; in the form body that could be preventing it from working.

  • Profile Image
    Answered on December 09, 2017 at 02:28 PM

    I think you are working on  this form if I'm not mistaken? I was testing it out and all "Sectors" including "Fastest Lap" are properly placed when clicked.

    Are you trying to add position: sticky; for media queries so that when viewport changes the images would stick on top: 10px;? Would mind providing me your desired outcome for that form so at least I have an idea how it should suppose to work?


  • Profile Image
    Answered on December 09, 2017 at 02:41 PM

    Thanks but I switched things around and am now having problems here:

  • Profile Image
    Answered on December 09, 2017 at 03:24 PM

    Sure! We will be responding to your other thread.