SP custom widget mouse hover -> new image behavior

[woodyfairley]

Happy Valentines Day colleagues! My challenge today is the syntax in a SP custom widget that displays a new image in a list view when the user hovers over the existing image. The list view is built using a simple AngularJS server script that delivers the field values to the HTML code to construct the table, including the selection of an image based on the record's stage. The behavior I want is that when a user hovers the pointer over the stage image, a new expanded image appears during the hover action, then goes away when the pointer moves away. I would like to animate the image swap if it is easy but in my world that is advanced-level code. Any suggestions? I've attached a couple of sample images along with a screen shot of the SP widget, with the complete code embedded in this message. Bless you for reading this!

Kind Regards,

Woody

Custom widget code, Server script:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	data.request = [];
	
	var gr = new GlideRecord('x_197547_ocio_purc_x_197547_task_ocio_purchase_requests');
	gr.addQuery('pmel_purchase_requester', gs.getUserID());
	gr.query();
	while (gr.next())
		{
			var request_data = {};
			request_data.number = gr.getValue('number');
			request_data.stage = gr.getValue('pmel_stage');
			request_data.label = gr.getDisplayValue('pmel_stage');
			request_data.description = gr.getDisplayValue('u_short_description');
			request_data.imageSM = gr.getValue('pmel_stage') + "_collapsed.gif";
			request_data.imageEX = gr.getValue('pmel_stage') + "_expanded.gif";
			request_data.total = gr.getDisplayValue('u_purchase_request_total');
			data.request.push(request_data);
		}

})();

Custom widget code, HTML:

<div>
<!-- your widget template -->
  <!--
PSEUDO-CODE:
0. (Studio)Add image files to the application scope, filenames: <stage> + _collapsed.gif or _expanded.gif = DONE
1. (Server)Assign the image of the PMEL Stage based on the value of stage in each row = DONE
2. (Server)Set the image name variables for collapsed and expanded for each record DONE
3. (HTML)Use the <img> tag to apply src and alt variables, plus define a hard width=200 - 400
4. (HTML)Use onmouseover or ng-mouseover to flip the image in the third cell of each row
5. (HTML)Make the record number a URL, a clickable link = DONE
<img src=”URL of your first image” onmouseover=”this.src=’URL of second image'” onmouseout=”this.src=’URL OF first image again'” />
-->
  
  <table border="1.5px">
    <tr> <th> Number </th><th> PMEL stage </th>
      <th> Purchase description </th>
  <th> Purchase Request total </th></tr>
    <tr ng-repeat = "request_data in data.request">
      <td> <a href> {{request_data.number}} </a></td>
<!--      <td> <img src={{request_data.imageSM}} ng-mouseover="this.src='{{request_data.imageEX}}'" ng-mouseout="this.src='{{request_data.imageSM}}'" alt={{request_data.label}} width="200" /></td> -->
<!--      <td> <img src={{request_data.imageSM}} onmouseover=request_data.imageSM onmouseout={{request_data.imageSM}} alt={{request_data.label}} width="400" /></td> -->
          <td> <img src={{request_data.imageSM}} onmouseover={{request_data.imageEX}} ng-mouseout={{request_data.imageSM}} title={{request_data.label}} alt={{request_data.label}} width="400" /></td>
      <td> {{request_data.description}} </td>
      <td> {{request_data.total}} </td>
    </tr>
    
  </table>

</div>

[Allen Andreas]

Hi,

Thank you for all the information.

As far as attachments, I personally don't download them (which is the only way to view them on the forums) due to me helping hundreds of people and it taking up space, etc.

With that said, I'm unsure if I saw where you've said what is happening with the code you have now...was it partially working? Anyways, please try to search online for this functionality, here's a website with a small bit of example code: http://blog.sodhanalibrary.com/2015/01/change-image-source-on-mouseover-using.html#.YgpmDN_MIoM

Please mark reply as Helpful/Correct, if applicable. Thanks!

[woodyfairley · Accepted solution]

Here is the solution to my original question regarding syntax for changing the image with a pointer hover: I was trying to use onmouseover but realized a few days ago I needed to somehow use the AngularJS equivalent but I have no experience with the syntax. AngularJS enables us to incorporate repeating variables quite nicely, but my requirements were such that I wanted to values on the fly in order to match fields with images, including the pointer hover image. This confusing entanglement of variable values was not addressed in any of the search results the past few days, until today. When I clicked the link shared by Allen (see his replies below), I continued my search again, this time looking for repeating patterns. Finally, I decided to testing multiple changes in the syntax manually by adding or removing syntax components individually until I began to see desired outcomes, inching toward the vision of success. Here is the html code that worked in this widget, which now uses ng-mouseover instead of onmouseover to swap the images which provide users with a visual indication of the stage of their request records in the service portal. Note that I have removed the double-curly brackets that indicate the AngularJS variable in the ng-directives, except for ng-init which keeps the brackets. Hope this helps someone. Thank you Allen, while your reply did not provide a solution, the link was helpful.

Kind Regards,

woody

<div>
<!-- your widget template -->
  <!--
PSEUDO-CODE:
0. (Studio)Add image files to the application scope, filenames: <stage> + _collapsed.gif or _expanded.gif = DONE
1. (Server)Assign the image of the PMEL Stage based on the value of stage in each row = DONE
2. (Server)Set the image name variables for collapsed and expanded for each record DONE
3. (HTML)Use the <img> tag to apply src and alt variables, plus define a hard width=400 = DONE
4. (HTML)Use onmouseover or ng-mouseover to flip the image in the third cell of each row = DONE
5. (HTML)Make the record number a URL, a clickable link = DONE
-->
  
  <table border="1.5px">
    <tr> <th> Number </th><th> PMEL stage </th>
      <th> Purchase description </th>
  <th> Purchase Request total </th></tr>
    <tr ng-repeat = "request_data in data.request">
      <td> <a href> {{request_data.number}} </a></td>
<!--  <td> <img id="flippingImageID" ng-src={{imgsrc}} ng-init="imgsrc='draft_collapsed.gif'" ng-mouseover="imgsrc='draft_expanded.gif'" ng-mouseout="imgsrc='draft_collapsed.gif'" title={{request_data.label}} alt={{request_data.label}} height="400" width="400" /></td> -->
      <td> <img id="flippingImageID" ng-src={{imgsrc}} ng-init="imgsrc=request_data.imageSM" ng-mouseover="imgsrc=request_data.imageEX" ng-mouseout="imgsrc=request_data.imageSM" title={{request_data.label}} alt={{request_data.label}} width="400" /></td>
      <td> {{request_data.description}} </td>
      <td> {{request_data.total}} </td>
    </tr>
    
  </table>

</div>

[Allen Andreas]

Hello,

Great, glad you figured it out.

My link was meant to help guide you and show you the correct syntax and was not meant to be THE exact solution for your literal issue.

Although not only did it describe, in detail, each element you're now using: i.e., ng-init, ng-mouseover, ng-src, etc. ...I'd say it was successful in guiding you correctly.

So the answer to your question, regarding syntax, was what I pointed you to.

Take care!