This discussion is archived
9 Replies Latest reply: Mar 19, 2013 10:05 AM by AshPatel2 RSS

Mouseover popup on comment bubble report

AshPatel2 Newbie
Currently Being Moderated
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 Newbie
    Currently Being Moderated
    Anyone got any ideas on this please.

    Regards
    Ash
  • 2. Re: Mouseover popup on comment bubble report
    Dennis DS Newbie
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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
    scott.wesley Guru
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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
    scott.wesley Guru
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    Hi Scott if you manage to work something out please let me know.

    Thanks
    Ash
  • 8. Re: Mouseover popup on comment bubble report
    scott.wesley Guru
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    Thanks Scott really appreciate it

    Regards
    Ash

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points