Look up Image Dynamically

Dear Jennifer,
Once again, there is something wrong with the quote marks. Instead of this:
fd.field(‘Site’).$el.innerText
Please, use this (straight quotes):
fd.field('Site').$el.innerText;
Or maybe this:
fd.field("Site").$el.innerText;

Nikita,
Thank you so much for the help the script does not load the images even if I change the "" but I do get something in the console now
from the looks of it there appears to be a return on the line but I have deleted them and recreated them and still get the space as seen below.

Dear Jennifer,
Thank you for your feedback! Now, please use the following code, tested it myself, it should definitely work!
var value = fd.field("Site").$el.innerText.trim();
It removes all the extra after the string, so now it should return true when compared to “PRS” or “PRI”.
Just make sure that the quote marks are correct!

Thank you for all your help with this. I was able to get this and the cascading look up working
Thanks
Jennifer

1 Like

I have a form set for this project that I do want the picture to load on form load.
This is the script I am using but it does not seem to work.
fd.spRendered(function() {
//first select picture when the form opens
var value = fd.field("Site").$el.innerText.trim();
pictureChange(value);

//change picture on change
fd.field('Site').$on('change', function(value) {
pictureChange(value);
});
});

function pictureChange(value){
if(value == 'PRS'){
fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PRS.PNG';
} else if(value == 'PRI'){
fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PRI.PNG';

} else if(value == 'PTG'){
fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PTG.PNG';

} else if(value == 'PEC'){
fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PEC.PNG';

} else if(value == 'Parts'){
fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/Parts.PNG';

}
}

Dear Jennifer,
Please, run the following script instead and tell me what you see when you open the form:

fd.spRendered(function() {
    //first select picture when the form opens
    pictureChange();

    //change picture on change
    fd.field('Site').$on('change', function(value) {
        pictureChange();
    });
});

function pictureChange(){
    if(fd.field('Site').value){
        var value = fd.field('Site').$el.innerText.trim();
        alert('Field Site value: ' + value);
        if(value == 'PRS'){
            alert('Image: PRS');
            fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PRS.PNG';
        } 
        else if(value == 'PRI'){
            alert('Image: PRI');
            fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PRI.PNG';
        } 
        else if(value == 'PTG'){
            alert('Image: PTG');
            fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PTG.PNG';
        } 
        else if(value == 'PEC'){
            alert('Image: PEC');
            fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PEC.PNG';
        } 
        else if(value == 'Parts'){
            alert('Image: Parts');
            fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/Parts.PNG';
        }
    }
}

When I run this the alert runs but it is blank

Dear Jennifer,
What do you mean by blank? Completely blank or simply no value? Please, provide a screenshot if possible.

image

Any update on why the information is not loading on form load?

Dear Jennifer,
Sure, sorry about the delay! Are you sure you have a field with internal name Site? Maybe the internal name is different this time, or it’s a different type of field. Could you send me a screenshot of the form in the designer, with the field selected where I can see its properties, like InternalName, Type, etc?

Also, is the event triggered when you change the field or only on form load?

Dear Jennifer,
Here’s modified code which should definitely work, please, try it out:

fd.spRendered(function() {
    //run after lookup is ready
    fd.field('Site').ready().then(function(field) {
        //first select picture when the form opens
        pictureChange();

        //change picture on change
        fd.field('Site').$on('change', function(value) {
            pictureChange();
        });
    }); 
});

function pictureChange(){
    if(fd.field('Site').value){
        var value = fd.field('Site').value.LookupValue.trim();
        alert('Field Site value: ' + value);
        if(value == 'PRS'){
            alert('Image: PRS');
            fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PRS.PNG';
        } 
        else if(value == 'PRI'){
            alert('Image: PRI');
            fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PRI.PNG';
        } 
        else if(value == 'PTG'){
            alert('Image: PTG');
            fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PTG.PNG';
        } 
        else if(value == 'PEC'){
            alert('Image: PEC');
            fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/PEC.PNG';
        } 
        else if(value == 'Parts'){
            alert('Image: Parts');
            fd.control('Image0').source = 'https://site.sharepoint.com/devPlay/DoorsMaps/Parts.PNG';
        }
    }
}

Still does not load the item

Dear Jennifer,
There seems to be some error connected to Lookup filtering, and there is no filtering here. Are you using custom JS for that as well? If so, can you, please, remove/comment out all the other code for now, and only leave the one for pictures?

I am positive that it should work, and once we are sure that it does, or discover why it doesn’t, we can take a look at the other parts of code that produce errors.

I don’t do a filter on this particular form, I do however do it on the Default form. Currently there is only this code and a Save function in the Java script for this form.

Dear Jennifer,
That is strange, are you sure about this? Can you copy and paste all the code from this particular Form?

Please, make sure to separate the code from the rest of the text and indent it by selecting it and pressing Ctrl + Shift + C, this will make it all wrapped in a nice Preformatted text container and will allow to avoid any format issues during testing.

localStorage.clear();
fd.spRendered(function() {
//first select picture when the form opens
pictureChange();

//change picture on change
fd.field('Site').$on('change', function(value) {
    pictureChange();
});

});

function pictureChange(){
if(fd.field(‘Site’).value){
var value = fd.field(‘Site’).$el.innerText.trim();
alert('Field Site value: ’ + value);
if(value == ‘PRS’){
alert(‘Image: PRS’);
fd.control(‘Image0’).source = ‘https://xxx.sharepoint.com/devPlay/DoorsMaps/PRS.PNG’;
}
else if(value == ‘PRI’){
alert(‘Image: PRI’);
fd.control(‘Image0’).source = ‘https://xxx.sharepoint.com/devPlay/DoorsMaps/PRI.PNG’;
}
else if(value == ‘PTG’){
alert(‘Image: PTG’);
fd.control(‘Image0’).source = ‘https://xxx.sharepoint.com/devPlay/DoorsMaps/PTG.PNG’;
}
else if(value == ‘PEC’){
alert(‘Image: PEC’);
fd.control(‘Image0’).source = ‘https://penskeracing.sharepoint.com/devPlay/DoorsMaps/PEC.PNG’;
}
else if(value == ‘Parts’){
alert(‘Image: Parts’);
fd.control(‘Image0’).source = ‘https://xxx.sharepoint.com/devPlay/DoorsMaps/Parts.PNG’;
}
}
}

Dear Jennifer,
What about the save function you mentioned? It’s not in here. But yes, running this script does not produce this error, it couldn’t.

Please, try a few things:

  1. Try to clean the cache, I don’t think it will change anything, but just in case.
  2. Try to delete and add the field back in the designer. Resave the form.
  3. Try to select a different value in the Site field on the form. See if it also produces a blank line.
  4. Try to save lookup field with a different value, and try to re-open the form after saving.

If you see anything change - please, let me know, if not, we might need to have a screenshare in order to fix the issue. I do not see a reason for it to appear right now, but since it does, there must be something that causes it.

Nikita,
1.I always clear the cache when testing that has no effect
2. Deleting the filed and re saving had no effect
3.When I select a different field it loads the photo properly.
4. When I select a different field I have the same result.
I thought about it and it appears to be the lookup. If I save the same value into the Title field and change the script the photo loads. I should be able to work with that result. It would be helpful to have the lookup do the same but I have a workaround.