Refresh File Component when Lookup Value is changed...

  • 1
  • Question
  • Updated 4 years ago
I have a File Component that displays an image from a custom field (Lookup).  The image loads fine, but when the user changes the lookup field, the image does not update.  I have tried adding the following code as an in-line snippet, but it isn't working.  Any suggestions?


skuid.component.getById('imgColorRef').Render();

also tried:
skuid.component.getById('imgColorRef').conditionallyRender();
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I'm not sure I understand.  Are there two places where this image is referenced on your page.  In one place the image is shown,  but in another place the lookup field is edited?   Are these connected to the same model?  Please clarify. 

Thanks. 
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
i have an object for colors, which has the color name and a sample image with the color.  this object is used as a lookup in the main object.  one that main page, i have a field editor with a field for color and i have a file component that displays the color image.  it works fine when i refresh the screen, but i need the file component to update when the color field is changed... is this possible?  thanks so much for the help!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Ah yes. That makes sense. 

The file object does not listen for changes at this point and so will not be a very good candidate for what you are trying to do.  I'd reccomend you just post your image using our template component.  Your html code in the template will be somthing like: 

<img  src="/servlet/servlet.FileDownload?file={{{Object.Image__r.skuid__AttachmentId__c}}}">

This will pick up changes on file save, but not on initial change.   Creating a listener on the particular field in question that forced an update on the template so intial row change would be possible in Javascript - but not declaratively. 
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
thanks for the help.  were i to use java, how would i go about coding a snippet that would "refresh" the file component?  I like to add it to the "save" button...
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Java is to Javascript as car is to carpet...
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Snort!  Thanks Moshe. 

Scott - I dont think you need to use Javascript here.  What is the extra function you want your users to be able to do with the file component?  With the template they will be able to see the sample image for thier color - and when the file is saved with a new color,  the new sample image will show (without a page reload). 
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
But if you really want a snippet anyway... try something like this:

var model = skuid.model.getModel('YourModel');var row = model.getFirstRow();
var changeListener = new skuid.ui.Field(row, model, null, {fieldId:'Your_Field__c', register:true});
changeListener.handleChange = function(){
// do logic here
model.updateData();
};
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
i want the user to be able to see the updated color image if they change the color field.  right now, hitting the save button does not update the image.  i'm using the queue/page include feature, so a page reload seems to reset the page include back to start...
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Scott, following up here - have you tried the template component as I reccomended above?