Service Portal Widget - grabbing variable value on change in Client Script and passing to Server Script

[Daniel Shock]

Good Morning! I have started developing an app for one of our departments to track some very specific types of inventory.  It's not too complicated.  Each row of data in the table contains a photo of the item being stored.  I am creating a record producer for them to use in the portal to select the items to request they be sent from warehouse to some other location.  When selecting each item, I can use client scripts on the record producer to retrieve quantity and location information.  To retrieve and display the item's photo, I am using a Service Portal Widget.  This is the part I am having trouble making work.  I can display a photo from an item if I hard code a sys_id for the item into the Server Script portion of the widget.  But I am having trouble watching the 'item' variable on the record producer for change and then passing the sys_id to the server script for lookup.  

I will take some screenshots.

Here is my HTML in the Widget:

Here is my Client and Server script section:

the name of the field I am looking for changes on is 'item'.  I can't even get the alert statements to work... I'm pretty new to working with Widgets like this.  Any help would be appreciated!

[Daniel Shock]

ah... I did add 

c.server.update to the client script and that helped a bit.  What I'm trying to do is to make the photo change everytime the item is changed.  See this screenshot:

I'll try to digest your post and see if I can figure it out.  Thank you!

[Michael Jones -]

I assume that image is part of your widget?

Did you bind the value for it to c.data.picture in your HTML? Something like: 

 <img src="{{c.data.picture}}">

Based on a few quick tests, you can indeed just use c.server.update() [just passes the whole c.data object to the server and replaces it] so as long as you are bound to your data model, the image should update, provided there are no errors and you're pulling the correct values, etc. 

I hope this helps!

If this was helpful, or correct, please be kind and mark the answer appropriately.

Michael Jones - Proud member of the GlideFast Consulting Team

[Daniel Shock]

Yes, I think so... here is the html code:

<div>
<img class="img-responsive catalog-item-image" alt="{{::data.name}}" style="display: inline" ng-src="{{::data.picture}}" />
</div>

right now, as it is, with c.server.update(); at the end of the if statement in the client script - it will display the first image for the first time I change 'item'.  After, that, it does nothing.

[Michael Jones - · Accepted solution]

Try changing it to this - seems to work for me: 

  <div>
    <img class="img-responsive catalog-item-image" alt="{{data.name}}" style="display: inline" ng-src="{{data.picture}}" />
  </div>

I hope this helps!

If this was helpful, or correct, please be kind and mark the answer appropriately.

Michael Jones - Proud member of the GlideFast Consulting Team

[Daniel Shock]

Thank you so MUCH!!!  That worked like a charm.  I would never have guessed it was the HTML that needed to be adjusted in that scenario.  Thank  you!!!

I will note for anyone looking through this thread for help, the response that I marked as the correct answer is just the last in a whole line of correct answers.  So, it's not just the last response, it's all of them collectively that solved my problem.

Thanks again!