Look up Image Dynamically


#1

I would like to Pull and display a picture dynamically. So when I person selects a item from the drop down it would pull the associated image from a share point image library and display it in the form.

Thanks for the Help
Jennifer


#2

Dear Jennifer,
Add Image control to your SharePoint Form and then use code similar to this:

fd.spRendered(function() {
  //first select picture when the form opens
  pictureChange(fd.field('ChoiceDropdown').value);
  
  //change picture on change
  fd.field('ChoiceDropdown').$on('change', function(value) {
       pictureChange(value);
  });
}); 

function pictureChange(value){
  if(value == 'Choice #1'){
       fd.control('Image0').source = 'https://yourdomain.sharepoint.com/sites/dev/Shared%20Documents/picture1.jpg';
     }
  else if(value == 'Choice #2'){
       fd.control('Image0').source = 'https://yourdomain.sharepoint.com/sites/dev/Shared%20Documents/picture2.png';
     }
}

#3

Hi Nikita,
is there any way to make the image control able to render a PDF document?
Regards
Maurizio


#4

Dear Maurizio,
You can try to transform PDF into an Image using MS Flow + Azure function, there are options you can buy as well as some free options for this. Then simply add this image as the Source for the image control on the form.
That’s an only option there is right now.


#5

Dear Maurizio,
Another option that you can use to display PDF on the Form is to add iframe tag with HTML control:

<iframe name="preview_frame" id="preview_frame" src="PATH TO FILE" frameborder="1" scrolling="yes" height="1000" width="800"></iframe>

#6

Nikita,
I changed this because my control is a lookup to the below

fd.spRendered(function() {
  //first select picture when the form opens
 // pictureChange(fd.field('Site').$el.innerText);
  
  //change picture on change
  fd.field('Site').$on('change', function(value) {
       pictureChange();
	   value=fd.field('Site').$el.innerText;
  });
}); 

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

I don’t need to render an image on form load just when the person makes a choice but the image does not load can you point me in the direction of what I am doing incorrect?


#7

Dear Jennifer,
For one, I can see that the variable value is not defined anywhere inside of pictureChange function, and it’s not defined globally. Previously, I’ve passed it as a parameter, but you can retrieve it as well. Something like this should work:

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

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

#8

I could not get a PNG to load at all but I was able to get a JPG to. However when I would change the control the image would not change


#9

Dear Jennifer,
Do you get the alert message? First, try to make sure that the function is activated, then that the if condition returns true correctly, and finally that the path is correct - you can try to open URL in another tab, and if it opens the image directly, you should be good!

It shouldn’t really matter if file is PNG or JPG, both should work fine, so, please, make sure that you use the correct path.


#10

When I run alerts
if I alert Vaule=fd.field(‘Site’).$el.innerText; I get PRS or PRI on change as expected
However it does not go into the if statement. I think the issue is that the column site is a lookup so what I really need to do is get the value of the Lookup and then do the if statement.


#11

Dear Jennifer,
Do you get any errors in browser’s console on change? If so, can you show me a screenshot?


#12

Nikita,
I do not get any errors in console when chaninging the control I just don’t get anything inside of the If statesments.
Respectfully
Jennifer


#13

Dear Jennifer,
Alright, let’s do some testing. Try to temporarily replace your previous code with:

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

function pictureChange(){
  var value = fd.field('Site').$el.innerText;
  alert(value);
  if(value == 'PRS'){
       alert('value == PRS');
  }
  else if(value == 'PRI'){
       alert('value == PRI');
  }
  else {
      alert('value is not equal PRS nor PRI, value == ' + value);
  }
}

Show me a screenshot of the alert message you’ll get, please.


#14

Here is a screen Shot of what I get this is why it makes no sense

image


#15

Dear Jennifer,
Most likely there is an extra character in value, for example, a space after PRI_ or something along these lines (maybe a different language character that looks identical). Please, run the following code in browser’s console on the form, then copy and post here the result (the exact string):
fd.field('Site').$el.innerText;


#16

I can not run that in the console I would be happy to do a screen share with you
below is what I get in the console
VM8137:1 Uncaught ReferenceError: fd is not defined
at :1:100:


#17

Dear Jennifer,
Not sure if the screenshare would really help here, we might as well get stuck here. Please, add the following line in JS editor on the form, this will allow you to run the script in the console:
window.fd = fd;


#18

VM9117:1 Uncaught SyntaxError: Invalid or unexpected token


#19

Dear Jennifer,
Can you send us a screenshot, please? Is this the same form that you run the change event on? If so, it should return at least something, not give an error.


#20

Same form it does all the same alerts as before and I get the below