Is there no way to use a variable in the \Image URL\" field of an Image Control?"


Badge +5

I'm trying to use the image control in a dynamic fashion.  For example, if the user selects an item in a drop down box (which is contained within a repeating section), the image displays in an image control on the form.

FormDesignMode.jpg

I should explain that in the above form, the list that it is associated doesn't contain the fields indicated in the repeating section.  The "item", "cost" and the image fields are in a separate list that is being used to display data in the repeating section.

Right now, the image URL that is associated with the selected item gets stored in a variable.  I want to add that variable to the "Image URL" field in Image control settings.

ControlSettings.jpg

There doesn't seem to be any option to use a variable in this field.  I've even tried assigning the value of the variable to a calculated field but that isn't accessible, either.  Is there a solution to this particular problem?  Please let me know.  Thank you!


11 replies

Userlevel 5
Badge +14

have you seen this topic Populate a Calculated Value Field with HTML/Picture?

I think it's exactly what you ask for.

Badge +5

I actually have tried the calculated field/lookup but all I get is the link itself rather than the picture.  My lookup formula looks like this:

lookup.jpg

Any idea why the hyperlink doesn't render as a picture?

Userlevel 5
Badge +14

I would say your image link is not correctly formatted.

it has to be link formatted similarly as one on referenced document, ie. including html tags.

I've tried to put a link formatted that way  to a field of type 'Hyperlink or Picture' but was given error that such a link doesn't have correct format - html tags are not accepted.

so I put the link to simple single line text column, in lookup() referenced that text column and it perfectly worked for me.

Badge +5

I was able to get the image to show up by creating a new field that contained the href and src information for the image.  However, I still can't get the picture to refresh with every newly added item in the repeating section.  The image has been placed outside of the repeating section and I know that it would work better inside the repeating section but that isn't the appearance I'm aiming for (the page is going to be printed after it is filled out).  Is there any way of making this work?  How can I get the lookup to use the new item number?  Right now, it just keeps the item number for the first item selected.  Thank you!

Userlevel 5
Badge +14

yes, it's possible but you will have to make image field outside of the repeating section dependent on current repeating section row (see currentRowNumber() runtime function).

I'm not sure whether repeating section current row number will be sufficient for you to identify different images, you will the most probably write piece of javascript code.

how would i do that

- I would biuld/calculate/store image link on single repeating section row level

- I would write a javascript function eg. "CurrentImageLink" that would take as an input parameter current row number and that would read and return above mentioned link from (parametrized) current row

- finally I would set 'the image out of repeating section' control  formula to something like: CurrentImageLink( currentRowNumber( SomeControlInRepeatingSection ) )

Badge +5

Do you happen to have a sample of javascript that can do this?  I have been trying to iterate through the repeating rows and then using those collected item ID's (contained within an array) from the "Item" dropdown to make changes to the Image URL.  However, I can't seem to collect the ID's from the item dropdowns (particularly from subsequent rows). 

I tried to figure out the currentRowNumber could be used in the collection of the appropriate row information but I'm afraid I'm just too new at this.  Any help would be much appreciated!

Userlevel 5
Badge +14

ok, so I have built working proof of concept example.

just I have to little correct my previous post - currentRowNumber() has to be called within repeating section, not outside of it. typed faster then thought of it happy.png

I have placed a calculated control out of the repeating section (to pretend your picture).

then I added a repeating section and placed a dropdown (item selector) and calculated value control (image link builder) into it

for calculated control out of the RS I defined formula that calls javascript function and made it dependent on item_image_path control within RS

for dropdown control there is not any specific configuration, I just configured a lookup control to a list I had available on the site and named it item_selector.

just to have some variable value to place it into image path

for the calculated value control within RS I have defined a formula that puts together some static text, selected dropdown value and current RS row identifier.

in addition, I defined class item_image_path so that I can reference the control from javascript.

that's my image link

then I have written short javascript function CurrentImageLink being referenced by calculated value control out of the RS.

the function looks for active control in RS and gets value from item_image_path control on the same row.

function CurrentImageLink(param) {

  if (NWF$(":focus").parents(".nf-repeater-row").first().length){

    return NWF$(":focus").parents(".nf-repeater-row").first().find(".item_image_path")[0].getElementsByTagName("LABEL")[0].textContent;

  }else {

    return "";

  }

}

when I run the form, calculated value control at the top updates it's value by the last changed dropdown

hope, it's clear now

Badge +5

Thank you so much for the time you spent on this, Marian!  I was able to make my images appear and to change with every selection using your code!  I didn't know that a JavaScript function could be called from a formula.  This was definitely a good learning experience.  Thanks again!

Badge +5

Marian's suggestions were of great help and a solution has now been found.

Badge +3

Hi I am not really understanding the method of implementing this. Has there been an update to this where I can just put an image into the form and where it has the image url, put an IF statement and depending on what another dropdown has - just return the url based on that? (i.e.


If({Control:blahblah}=="something","https://blah.blah.co","")

Badge +5

As far as I can see, there isn't a way to reference a control using an IF statement within the Image URL control setting.  I used a lookup and a reference to a JavaScript function in order to call up the ID from the dropdown in my repeating section.  And, the image is loaded using a calculated value control, instead.  The URL path to the image is stored in a column called "PictureLink".

Formula:  lookup("ListName", "ID", CurrentImageLink(item_image_path) , "PictureLink")

 

Reply