Forum Discussion

Kai_Kircher's avatar
Kai_Kircher
Creator I
4 years ago
Solved

Show part thumbnail onmouseover in search or relationship grid

So let's say I have a list of parts in a view. Whether that's the BOM view of a specific assembly, or the default search for parts, filtered by some criteria such as "engines," either way this is a relevant question.

My users want to be able to hover over (mouse over) these rows and display in a small popup the thumbnail for each part as they move.

Here is a screenshot from the legacy system we migrated from, where the user has moused-over one of the image icons shown, to display the thumbnail for the part in a larger temporary popup window (that disappears when they mouse away from the image icon):

Replicating similar behavior would be ideal, but there are any number of possible alternatives to this that would theoretically work as well. 

The end goal is that the user doesn't have to open each part to see the thumbnail for that part and get an idea for what the part might actually be (there are a lot of poorly-named parts in our system due to years and years of inconsistently-applied naming policies, so this isn't something we can simply ignore or fix easily).

Reducing clicks would also be a key factor to a successful implementation of this.

Thanks in advance!

  • AngelaIp's avatar
    AngelaIp
    4 years ago

    Hi Kai!

    I assume you are looking for something like this?

    This image is from Innovator 11, so don´t be confused by the styling. 

    The shown image was the result of the experimental approach discussed in this post:
    https://community.aras.com/f/development/3987/using-dijit-tooltip-in-relationship-grid-how-to-get-connectid

    Main obstacle till today is the Method call itself. I never found a reliable way to call the function on Form load.

    But don´t be to focused on the hovering. There is maybe still a far bigger obstacle to solve.

    Images in the grid are one of the best improvements you can make in your Innovator. People just LOVE them and they are such a huge help!
    But you will notice that hardly any customer use them. Isn´t that strange? 

    Reason: In the past images in the grid caused performance issues. If you are a subscriber, maybe you can ask Aras if this one was improved in any of the newer version. I am not up-to-date regarding this topic, cause I use a very custom workaround.

    Nevertheless, I am still interested in finding a solution for the hovering and improved images handling at all. So I am happy about anyone that joins this topic.

  • Riaan_H's avatar
    Riaan_H
    3 years ago

    Hi Kai and Angela,

    There is a no code solution, but it is Chrome based, and needs to be installed by the user.

    It is a Chrome extension called "Imagus". When installed and activated in your Chrome it will display the full size image upon hover over any image like a thumbnail in a grid.

    Obviously a pain to roll-out, but it just works.

    Kind regards

8 Replies

  • Riaan_H's avatar
    Riaan_H
    Creator II
    3 years ago

    Hi Kai and Angela,

    There is a no code solution, but it is Chrome based, and needs to be installed by the user.

    It is a Chrome extension called "Imagus". When installed and activated in your Chrome it will display the full size image upon hover over any image like a thumbnail in a grid.

    Obviously a pain to roll-out, but it just works.

    Kind regards

    • Kai_Kircher's avatar
      Kai_Kircher
      Creator I
      3 years ago

      Riaan,

      Huh, you're right, this worked, thanks Riaan! Had to fiddle with the settings a bit, but it did the trick. AngelaIp, this doesn't fix the performance problems of course, but it's a nifty (and fast) way to on-hover image display.

      • AngelaIp's avatar
        AngelaIp
        Catalyst II
        3 years ago

        Haha, I worked 4-5 years on this just to be now outsmarted by a Chrome extension [emoticon:d6dd260102fd406884fc96b8bc59760b]

        This is indeed an elegant solution! Not everybody needs the images, but some users really benefit from getting a detailed view of something quick&easy. 

        I right now use the variant, to make the images as big as possible in the grid by modifying the stylesheets. Works well for generic stuff, but of course you still cannot see a lot of details. A variant for full size view of something really bring a lot of benefits.

        Regarding performance: Either have a powerful machine or use codetree images whenever possible. Just keep an eye on it. I really don´t know the situation in recent Innovator versions. But if suddenly loading the Parts grid (or other) gets strongly delayed for everybody at the same time, the images are high-likely your root cause. 

  • AngelaIp's avatar
    AngelaIp
    Catalyst II
    4 years ago

    Hi Kai!

    I assume you are looking for something like this?

    This image is from Innovator 11, so don´t be confused by the styling. 

    The shown image was the result of the experimental approach discussed in this post:
    https://community.aras.com/f/development/3987/using-dijit-tooltip-in-relationship-grid-how-to-get-connectid

    Main obstacle till today is the Method call itself. I never found a reliable way to call the function on Form load.

    But don´t be to focused on the hovering. There is maybe still a far bigger obstacle to solve.

    Images in the grid are one of the best improvements you can make in your Innovator. People just LOVE them and they are such a huge help!
    But you will notice that hardly any customer use them. Isn´t that strange? 

    Reason: In the past images in the grid caused performance issues. If you are a subscriber, maybe you can ask Aras if this one was improved in any of the newer version. I am not up-to-date regarding this topic, cause I use a very custom workaround.

    Nevertheless, I am still interested in finding a solution for the hovering and improved images handling at all. So I am happy about anyone that joins this topic.

    • Kai_Kircher's avatar
      Kai_Kircher
      Creator I
      4 years ago

      A response from the legend herself! That's exactly what I'm looking for, Angela, thank you! I'll play around with it and see what I can get working (the on hover isn't too important, a cell or row select to display the tooltip would work just as well).

      And yeah, I'm a subscriber, so once I get some testing done, I'll try to reach out to Aras support about performance if what I end up with isn't acceptable.

      Thanks again!

      • AngelaIp's avatar
        AngelaIp
        Catalyst II
        4 years ago

        Thanks for the credits! :D Not sure if I am really a legend. I just had spend too much time to solve tasks like the one shown here out of the pure reason of "I want to have that feature, NOW".

        Have you seen the "Properties pane" preview pane? This at least allows some basic preview of the images in the grid.

        But images directly inside the grids are of course offer more benefits.

        In Innovator 12 the stylesheet is not perfect for the images (length/height ratio wrong). But this one can be fixed in the codetree. I also changed the stylesheet to make the images as big as possible in the grid. Just play around with the browser debugger until you get the perfect look&feel. 

        That´s still the easy part. But performance will be the hard one. You will not notice any problems while your are testing this. But performance suddenly becomes a huge problem as soon you have many "vaulted" images and many users display them. Reason: In the past each single displayed image opens a vault connection. To many connections -> Innovator is not usable anymore. Not sure how the situation is today.

        Additional hovering still would be cool, but it´s not a must have. I think it´s better to achieve with the latest Innovator versions, cause CUI und the editable grid added more functions to directly interact with the grid.

        Good luck! ;-)

  • AngelaIp's avatar
    AngelaIp
    Catalyst II
    4 years ago

    Hi Kai,

    short update: From time to time I search for additional solutions regarding thumbnails in Aras. It´s a topic I am working on since years. So far I weren´t successful with the reliable image hovering and don´t use the shown approach from the image in practice.

    But today I found another variant which might work: Pure CSS! We can add an additional :hover class to the class Aras use for the image. Still not the best variant, but at least a reason to keep the discussion active :).

    Angela