9 Replies Latest reply: Mar 19, 2013 12:05 PM by AshPatel2 RSS

    Mouseover popup on comment bubble report

    AshPatel2
      Application Express 4.2.1.00.08
      Internet Explorer - 8
      Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - 64bit Production
      Theme - Productivity - 26

      Hi I have a report based on the comment bubble template, what I need is to show a popup on mouseover to show more information. I looked at the packaged applications that come with Apex 4.2 and the Artwork Cataloge application seems to have a region based on plsql and on mouseover a really nice popup appears showing more information. I am wondering how I could do the same for my comment bubble report using this method. I'm not sure how to do it as my report/region is not based on plsql. Can anyone help me, I'm new to Apex so still finding my feet.

      Regards
      Ash
        • 1. Re: Mouseover popup on comment bubble report
          AshPatel2
          Anyone got any ideas on this please.

          Regards
          Ash
          • 2. Re: Mouseover popup on comment bubble report
            Dennis DS
            Hi Ash,

            What kind of popup are you talking about?
            I know you can use "tooltip" as seen in the application builder when you hover over your items and you see its conditions? Something like that?

            You might want to use jQuery for hover functions. Use the "hover" function on your selector and create a function for it.
              $(this).hover(function(){},function(){});
            Oh, you might also want to use the javascript function "popupFieldHelp". This is used in most templates when you click on labels for help on items.

            Check the label templates for that.

            I hope this makes you wiser!

            Dennis
            • 3. Re: Mouseover popup on comment bubble report
              AshPatel2
              Hi thanks for the reply,

              I guess what I mean by popup is something like the tooltip when hovering over the report item. I'm not sure how to implement this.

              Also I guess I called it a popup but in the sample application Artwork Catalogue you can hover over the report items an the hover tooltip is really nice looking, that's what I was trying to achieve but not sure how with my comment bubble report.

              Regards
              Ash
              • 4. Re: Mouseover popup on comment bubble report
                swesley_perth
                Have you tried looking at the sample application's code to see how it's been implemented?
                • 5. Re: Mouseover popup on comment bubble report
                  AshPatel2
                  Hi I did look at the sample application code but I am just new to all this so don't know how to implement it as the sample application is based on a plsql region

                  Regards
                  Ash
                  • 6. Re: Mouseover popup on comment bubble report
                    swesley_perth
                    After looking at the implementations in both the bug tracker & artwork packaged applications, it seems it uses js/css belonging to the newer themes but are driven from UL lists, utilising classes detailedStatusList and detailedListTooltip

                    I'm not sure if this could be retrofitted into a classic report, but I'm about to have a play myself.

                    I don't think it would need to be implemented as a pl/sql region - no doubt it could be refactored as a list template.

                    Scott
                    • 7. Re: Mouseover popup on comment bubble report
                      AshPatel2
                      Hi Scott if you manage to work something out please let me know.

                      Thanks
                      Ash
                      • 8. Re: Mouseover popup on comment bubble report
                        swesley_perth
                        Here is a the code from the "Recent bugs" region, but stripped of their complexity - and stripped of identifying objects from my code, so you pretty much just need to fill in the sql, and clean it up... it was very quick and dirty
                        declare 
                          d                     date;
                          l_status              varchar2(30);
                        
                        begin
                        
                          d := sysdate;
                        
                          sys.htp.p('<ul class="detailedStatusList">');
                        
                          for c1 in (
                            SELECT ...
                            FROM ...
                          ) loop
                          
                          
                            sys.htp.p('<li>');
                            sys.htp.p(' <a h...ref="'||apex_util.prepare_url('f?p='||:app_id||':61:'||:app_session||'::NO:61,RP:Pn_item_ID:'||sys.htf.escape_sc(c1.id))||'">');
                            --sys.htp.p('     <img src="'||sys.htf.escape_sc(replace('#IMAGE_PREFIX#e2.gif','#IMAGE_PREFIX#',:image_prefix))||'" alt="" />');    
                            sys.htp.p('     <span>'||sys.htf.escape_sc(substr(c1.description,1,150))||'</span>');
                            sys.htp.p('<em>Groups:'||c1.grp_count||'</em>');
                        
                            sys.htp.prn('</a>');
                         
                            sys.htp.p(' <section class="detailedListTooltip">');
                            sys.htp.p('   <h4>Callup List: '||sys.htf.escape_sc(c1.description)||'</h4>');
                            sys.htp.p('       <ul>');
                            sys.htp.p('     <li>');
                            sys.htp.p('       <label>Created by</label>');
                            sys.htp.p('       <span>'||sys.htf.escape_sc(c1.created_by)||'</span>');
                            sys.htp.p('     </li>');
                            sys.htp.p('     <li>');
                            sys.htp.p('       <label>Created</label>');
                            sys.htp.p('       <span>'||sys.htf.escape_sc(apex_util.get_since(c1.created_date))||'</span>');
                            sys.htp.p('     </li>');
                            sys.htp.p('     <li>');
                            sys.htp.p('       <label>Created date</label>');
                            sys.htp.p('       <span>'||sys.htf.escape_sc(c1.created_date)||'</span>');
                            sys.htp.p('     </li>');
                        
                            sys.htp.p('<hr>');
                            sys.htp.p('     <li>');
                            sys.htp.p('       <label>(Group)</label>');
                            sys.htp.p('       <span>(distribution)</span>');
                            sys.htp.p('     </li>');
                        
                            for r_rec in  (
                        select cg.group_name
                              ,listagg((select  from )||' ('||cnt||')','<br>') within group (order by cnt desc) la
                        from  cg
                            ,(select count(*) cnt, 
                              from  ci
                              group by ) ci
                        where 
                        group by cg.
                        order by cg.order_seq
                            ) loop
                              
                              sys.htp.p('<li>');
                        
                              sys.htp.p('<label>'||r_rec.group_name||'</label>');
                              sys.htp.p('<span>'||r_rec.la||'</span>');
                        
                              sys.htp.p('</li>');
                              
                            end loop;
                        
                            sys.htp.p('       </ul>');
                        
                            sys.htp.p(' </section>');
                            sys.htp.p('</li>');
                          
                        
                          end loop;
                        
                          sys.htp.p('</ul>');
                        
                        end;
                        I've worked out how to translate it into a list template, so all you need to do is feed a query and you get the standard layout - I'll blog the instructions when I get a chance.

                        Scott
                        • 9. Re: Mouseover popup on comment bubble report
                          AshPatel2
                          Thanks Scott really appreciate it

                          Regards
                          Ash