Conditionally show image

[Roo]

Can I conditionally show an image based on the field on the Form (drop down or checkbox). There will be a number of images 6+. I would like these images on one row of a table, but I would like to Collapse the left most image if the corresponding image is not present. The images would come from a image library on the same site.

ex: if the third image is chosen and image one and two are not chosen there are no blank spaces where image 1 and 2 would have been.


Thanks

[Nikita Kurguzov]

Dear Roo,
Yes, it is possible, you can have multiple Image controls in the Table container, give them all a CSS class and then use it to hide or show images based on conditions like this:

Code: Select all

$('.img1').hide();
$('.img2').show();

You can also look for changes and retrieve value of the choice field, see how to do it here - https://spform.com/javascript-framework ... eld-values

[Roo]

Thanks Nikita

I've got all of that and it works fine on the checkbox. It also works on the Text box if I have a "change function' in place.

I cant seem to get it working if there is no change on a textbox

[Roo]

Also, sorry about this!!, What we're looking at now is to have the image conditional on a Multichoice field. The choice select has about 40 or so possibilities. So What I need to do is if 1,2,3 or 4 is choosen then show img1 if 5 6 7 8 then show img 2 if 2 3 7 8 then show img1 and img 2

[Nikita Kurguzov]

I cant seem to get it working if there is no change on a textbox

Dear Roo,
Easiest option would be to place the main code that shows picture inside a function and run this function on change AND when the page opens, so it automatically shows pictures from the beginning:

Code: Select all

function showPictures(){
//Your code here ...
}

//run on change
fd.field('MultiChoice').change(function(){
  showPictures();
});

//run at the beginning
showPictures();

[Roo]

Hi

I still dont see how I can conditionally hide or show on opening.

My code on change (of a boolan object) is


fd.field('_x0048_200').change(function(){

if(fd.field('_x0048_200').value()){
$('.img1').show();

}
else{
$('.img1').hide();
}

});

and this works fine.

However I'm unsure on how to set the hide/show based on the above on opening the page.
I've tried the get boolean get statement on the blog but that didn't work.

[Nikita Kurguzov]

Dear Roo,
Try to replace this:

Code: Select all

fd.field('_x0048_200').change(function(){
    if(fd.field('_x0048_200').value()){
        $('.img1').show();
    }
    else{
        $('.img1').hide();
    }
});

With this:

Code: Select all

//all the actual code goes inside the function:
function showHideFields(){
    if(fd.field('_x0048_200').value()){
        $('.img1').show();
    }
    else{
        $('.img1').hide();
    }
}

//call the function on change
fd.field('_x0048_200').change(function(){
    showHideFields();
});

//call the function on opening
showHideFields();

[Roo]

That is almost perfect.

The only thing is there is a slight issue: on my form the field '_x0048_200' is updated from other fields and the change function does not register - if you save and return to the form it is fine, but the image does not change when the '_x0048_200' value is automatically changed

[Nikita Kurguzov]

on my form the field '_x0048_200' is updated from other fields

I assume that this is done with JS correct? If it's inside the JS editor, you can simply call the showHideFields(); function after the change takes place.

[Roo]

Awesome