Access to Reference Icon code

[josevalente]

Hello everyone

I've been trying to find out if I can access the code that defines the reference icon preview button. I have a requirement to develop something to display some caller info, without actually leaving the incident record. Now because of some limitations I can't add it to the popup_view, so I decided to do a new UI Macro.

The UI Macro onclick works fine, I used GlideDialogWindow and I can load the info. The thing is GlideDialogWindow loads a new window and kind of fuzzes out the rest of the page in the background. I was looking to do something more similar to the behaviour the reference icon preview has (loading the info on small window, on mouse over, without fuzzing out the rest of the page, and closing the window when the mouse leaves the button).

Is this achievable? Is there a way to see the code that is doing this for reference fields?

Thank you,
Jose Valente

[josevalente]

But if you hold down Shift on the reference Icon button, even with the window sticky, you can still right click the incident top form. So something it's glitchy. It's like it's "forgetting" to do something, so messes up the div's.

I've took a look again at the javascript code, and I think we are meant to use the functions they provide later on the file, because if you take a look those functions end up calling 'enqueue'. And my assumption is each function should be used depending on what you want to show on the popup, something like:

popForm -> shows a form
popListDiv -> shows a list

popRecordDiv -> shows a record

I've updated the code you provided but replaced 'enqueue' with 'popListDiv' (my end goal is to show a list of records), and replaced destroypopDiv() with exitPopup(event), and now that weird glitch is not happening anymore. However now if I hold shift on the window, it opens a new form somehow? (incident form, I've tried using the incident table). Here is the code:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

  <script>

  <a id="test_id" onmousemove="g_popup_manager.popListDiv(event,'incident','','default','600')" onmouseout="g_popup_manager.exitPopup(event)">Test</a>

</j:jelly>

[Joe McCarty1]

Those functions I believe are designed to support specific platform functionality rather than a general API.   So in terms of what we are meant to do, I don't believe that we can just trust that they can be repurposed for your use case.   Notice in those API calls that the target of the url is actually popup.do which is a processor 'PopupProcessor' that disappears into the underlying Java framework rather than any specific form, list or ui page.

I've tried your example, but even before I hit shift it doesn't bring up the incident list so while the context menu may be working its not bringing up a list.   In attempting to tweak it, I'm not able to get a list at all.   And I'm not certain what a sys_id parameter would be in the context of a list.   I actually think it may be what shows the hover over on a list vs. showing a list in the hover over.

So unfortunately, I don't have a suggested solution short of building it from the ground up by showing and hiding your own div or working within the confines of the other solution.

[josevalente]

Yes, I think you're right. I was actually able to get a list displayed with this code, but then the same thing happens again, right-clicking is disabled. And doesn't work the 2nd time.

var url = "incident_list.do"

var parms = "sysparm_query=active%3Dtrue%5Ecaller_id=0a826bf03710200044e0bfc8bcbe5d7a";

g_popup_manager.enqueue(event,'',url,parms,'600');

That would display a list of active incidents that belong to a specific caller sys_id.

At this point I'm actually wonder if it's worth doing it this way... Seems like a lot of trouble, and I'm also thinking supporting this functionality might not be easy in the long run...

[josevalente]

Hello again,

Small update, and in case someone finds this in the future: I did make it work. It's not the best solution, the code itself is not very elegant, and as Joe said since it's an unpublished API future updates might mess it up.

As you can see, hovering on top opens up this dynamic Popup , and in this case it shows up a list on active incidents for the current caller. Give me a shout if you're interested in the solution, but overall as I've said before, maybe it's not worth all the trouble.

Again thank you for the help.
Best regards,
Jose Valente

[Joe McCarty1]

Hi Jose

Finally got a chance to take another pass.   Here is another option using GlideOverlay.   It's still not a well documented API, but it is more generic and so I suspect less prone to changes that will make upgrades troublesome.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
   <a id="test_id" onmouseout="closeHover()" >Test</a>
   <div id='modal' style='position:absolute;background-color: #000; opacity:0.4; filter:alpha(opacity=40);z-index: 1000; display:none; left: 0px; float: left;'></div>
   <div id='modalContent' style='position:absolute; padding: 20px; background-color: #FFF; border: 4px solid #333; z-index: 1001; display:none; left: 0px; overflow: scroll;'> </div> 

     <script>
               var gb;
               document.getElementById("test_id").addEventListener("mousemove", function(event) {
             if (gb $[AND] gb.isVisible())
                       return;

         gb = new GlideBox({'form': 'incident_list', 'height': 500, 'width': 900, 'autoPositionOnLoad': false, top: 20, 'title': 'Incidents from User - Press Shift key to keep window open', 'showClose':false });
         gb.setPreference('sysparm_query','caller_id=' + g_form.getValue('caller_id'));
         gb.render();
         gb.positionTop(event.pageY + 20);
     });

         document.addEventListener("keydown", keyDownTextField, false);

         function keyDownTextField(e) {
                       var keyCode = e.keyCode;
                         if(keyCode==16 $[AND] gb) {
                                   gb.addToolbarCloseButton();
                                   gb.options.showClose = true;
                         }
             }

             function closeHover() {
                         if (gb $[AND] gb.options.showClose)
                                   return;
                         gb.close();
             }
   </script>   
</j:jelly>