Uncategorized

Animated dropdown checkboxes and creating custom on-hover events

| cognospaul

For those who missed it, PerformanceG2 is sponsoring my trip to the IOD this year. In return, I’ve written a couple of articles for their blog.

The first is a fancy way of converting
needing-to-scroll-for-prompts-make-users-angry

To
sliders-are-awesome

This is a very easy technique to use, simply copy in the main script into an HTML item at the top of the page, and add another script at the bottom to call the functions. Since it doesn’t use the 10.2 Prompt API, you can implement it in every version since 8.4. To learn more about that technique, read the post here.

The next technique is a bit more interesting (at least for me). There have been many times where clients have asked for a way to add more insights to the tooltips in charts. For example, users may want to hover over a micro chart and see a magnified version:
Magnifying Microcharts

In that image each chart had the country ID hidden right next to it. Hovering over the chart would then unhide a div with the same ID and position it directly over the cursor. Moving away from the chart would then hide it.

The same fading functions were used for this next technique:
filtering a list

Each area in the map has an onhover event attached. There are some internal Cognos JS functions that will pull the contextual data of that area. So if you’re hovering over a dot, the functions would return the series, category, and measure of the dot. Hovering over a legend would return that specific series. Since this is referencing internal Cognos JS functions I can’t guarantee that it will work in previous (or future) versions.

Read up on that technique here.

It looks like the post is down. The popups report XML can be found here: Popups on Hover Report XML (1694 downloads)

updated animated checkbox prompt: updated-animated-checkbox.txt (1009 downloads)

34 thoughts on “Animated dropdown checkboxes and creating custom on-hover events”

  1. Hi Paul,
    Hi Paul,

    Can you please either explain this hovering on micro chart technique in more detail or provide me with a sample report xml.

    Thanks,
    Raj

    Reply

    1. Hmm, it looks like the post disappeared from their site. I’ll ask them what’s going on. In the meantime I’ve uploaded the report xml here.

      Reply

      1. Hi Paul,

        It worked great! But after clicking page down and then again clicking page up then the chart does not zoom on mouse hover. I just changed the below line:
        var list = window[‘oCV’+’_THIS_’].getRV().getCV().getLayoutElementFromLid(‘Countries List’+’_THIS_’)”
        to: var list = document.getElementById(‘MainList’)

        and it worked fine after that.

        Nice feature and thanks for the post.

        Thanks,
        Raj

        Reply

        1. Hi Raj, I tried your approach changing it to var list = document.getElementById(‘Countries List’) but it didn’t work. It displayed the country code on the first run of the page. Any ideas?

          Reply

    1. Active Reports will be difficult. The way that the reports work make working with JavaScript extremely difficult. For example, take an HTML item with <script>alert(‘hello world’);</script>. Running it in a regular report will result in a modal “hello world” window. In Active Reports it doesn’t trigger at all. Writing a function in an HTML item and referencing that in a button will also not work.

      You could in theory write a button that will create the functions and assign the actions. It’s an interesting problem.

      Reply

  3. Hi all,
    I am currently using this animated prompt and it is working great. I have been asked to apply cascading ability. Has anyone done this yet & Is there an easy way to get that in this script?

    Thank you in advance
    M

    Reply

    1. Hi Mary,

      The standard Cognos cascading functionality should work with this. When the page refresh, the prompts will only show the correct values.

      Reply

  4. Hi Paul. great stuff 🙂 only that it’s too much for me:(…. i am new to xml and js and cannot figure out what i need to change in my report to take advantage of this… i want to hover over a cell containg a picture ( that i built using some html items ) and to show the picture bigger when i hover over it. For these dumb guys like myself , would be possible to do a short recorded demo or a more detailed pres? Many thanks and thanks for the work you’re doing 🙂 sooner or later i will get the hang of it.

    Reply

    1. Never fear! I am eventually planning on doing some videos. It’s more a matter of finding an uninterruptible span of time. Hover over events is one of the things I’m planning to do a video on.

      Reply

  5. Hello Paul, Thank you so much for sharing this excellent stuff. I’m using the Animated dropdown prompts on my dashboard and it’s working great. Just stuck when I have to reset/uncheck all the selections coz I have about 9 such prompts! Do you have any code for this? Thanks!

    Reply

    1. You’re getting ahead of me here. The next blog article I’m sending to PG2 deals exactly with this.

      Reply

  7. Hello Paul,

    I used your blog article on “Resetting prompts to default values” at PG2. Works excellent with regular prompts. But when I used with animated dropdown (again your article) , the dropdown list with checkboxes thing disappeared. Wondering y this happened. Any thoughts?

    Reply

  8. Sorry my bad! I was just excited to use the resetting functionality and did not place the html item in the right place.Works great now! Thank you so much ! 🙂

    Reply

  9. Hello Paul,

    I couldn’t get the “Resetting Prompts To Default Values In Cognos” (your blog article at PG2) along with animated dropdown prompts. My animated dropdown prompts are optional (using prompt macro). and other single select prompts are mandatory .So I wrote

    What am I missing here?

    Reply

  10. {‘Dem_Gender’:’multiValue’,’defaults’:false}
    ,{‘Dem_Ethnicity’:’multiValue’,’defaults’:false}
    ,{‘Dem_Atrribute’:’singleValue’,’defaults’:’Gender’}
    ,{‘Data Format’:’singleValue’,’defaults’:’Number’}

    Reply

  11. I kid you not I have spent 8.5 hours today trying to solve why something wasn;t working. If you put a prompt for, let’s say, Region on top of the page it breaks the JS once selected. Can you help??

    Reply

  12. Hi Paul,

    I have a checkbox prompt that cascades from another prompt when using a ‘Next’ Prompt button. When using your functionality above (which is great by the way!) , it works great if there is more than one cascaded value coming from the parent prompt. If there is only a single value, however, the child prompt disappears completely. Any idea why this may be happening and what could be done to fix? Not sure if it’s a JS issue or a Cognos. I did notice that without the JS in play I do get the child prompt, however the border around the prompt disappears.

    Thanks!

    Reply

    1. Yeah, there’s a structural change when a checkbox prompt has only one or zero options. I’ll see if I can figure out how to account for those cases.

      Reply

  13. Hi Paul. your animated drop-downs work great in IE but not in FF. I am unable to figure out what to change in the script to make it work in FF. Any help is appreciated. Thanks!

    Reply

  14. Hey Paul,

    Great Feature! I was looking for something exactly similar to the chart hover over evets. Can you confirm this works for 10.1.1? and I also tried copying the xml somehow it doesnt seem to open. any suggestions?

    Again, Great Work. Very impressive

    Reply

    1. Hi Zak,

      Unfortunately this is for 10.2 and up. There were some significant changes made to the underlying objects and JS functionality that would make it hard for me to make it backwards compatible. Just think of this as another reason to upgrade!

      Reply

  15. Hi Paul ,
    Good stuff. I tried your resetting / Clear all prompts version in Performance G2. The issue I am facing is reset or clear prompts is not working for Multiselect checkbox prompt. Its clearing the selection but not the values in the textbox of those multiselect.

    Reply

  16. Hi Paul,
    Just added to my previous question. Can you please provide a sample with the animated dropdown checkboxes enabled multiselect in script and reset/clear them. If possible with Cascading option too.

    Reply

  17. Your js code is awesome. I am pretty new to js and appreciate all hat you sharre. It is a great help to us newbies. Question…the original version of the animated drop downs, which shows either “All Products” if nothing is selected or the user’s selections, in the text box is awesome but doesn’t work in FF. In the updated file you provided, that functionality is missing. Curious if an oversight or just will not work in FF?

    Reply

  19. Hi Paul,

    we implemented Animated dropdown checkboxes in cognos 10.2.2, which is working great till now. We recently upgraded to Cognos 11.1.2 and it stopped working now. We need to support both IE and chrome browser. Please do the needful.

    Reply

    1. Hi Vijay,

      If you can hold off for a few more months, IBM will soon be releasing a new version with better prompting. Every prompt object will support searching.

      I’ve also written an interactive mode version of this whichcan be found here: https://pmsquare.com/analytics-blog/2019/1/4/custom-javascript-in-cognos-searchable-checkbox-list

      It looks like the download isn’t working right now for some reason, but I’ve raised the issue with the guy who runs the website.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *