Skip to Main Content

Monday, March 5, 2012

Interactive report column headings tooltip help

APEX Tips and Tricks

Here is how you can add tooltip help to interactive report column headings.

First go add help text to your interactive report columns. See Editing Interactive Report Column Attributes.

Next create page process to Process Point "On Load -After Header".

DECLARE
  l_sql VARCHAR2(32700);
BEGIN
  l_sql := '
  SELECT COLUMN_ALIAS,
    HELP_TEXT
   FROM APEX_APPLICATION_PAGE_IR_COL
  WHERE APPLICATION_ID = :APP_ID
    AND PAGE_ID = :APP_PAGE_ID
    AND HELP_TEXT IS NOT NULL
  ';

  HTP.p ('<script type="text/javascript">');
  -- Create JSON object.
  HTP.prn ('var gIrColHelp = $u_eval(''(');
  APEX_UTIL.JSON_FROM_SQL(l_sql);
  HTP.prn (')'');');
 
  HTP.p ('</script>');
END;

Create dynamic Action. Select Advanced

  • Name: Set Column Headings Title
  • Event: After Refresh
  • Selection Type: Region
  • Region: {select your report region}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: True
  • Code:
    $.each(gIrColHelp.row,function(i,jd){
     $($x(jd.COLUMN_ALIAS)).attr({"title":jd.HELP_TEXT});
    });
    
  • Selection Type: None

Now when you run page and hover mouse over interactive report column heading you can see help on tooltip.

See working example.

Pagination

Comments

  • Jari Laine 29 Apr 2020

    Hi Igor,

    Markus, wouldn't get any notification about your message from here.

    If you are on 12c or later database version and APEX 19 or later, create After Foorter page process 

    declare
      l_json varchar2(32700);
    begin
      select json_object(
        'row' value json_arrayagg(
          json_object(
            'static_id' value static_id || '_HDR',
            'column_id' value 'C' || column_id || '_HDR',
            'help_text' value help_text
          )
        ) returning varchar2
      ) as d
      into l_json
      from apex_appl_page_ig_columns
      where application_id = :APP_ID
      and page_id = :APP_PAGE_ID
      and help_text is not null
      ;
      htp.p ('<script type="text/javascript">');
      -- Create JSON object. Note need to use htp.prn so line feed isn't sent
      htp.prn ('var gIrColHelp = ' || l_json || ';');
      htp.p ('
      function setIgHelp($Region){
        $.each(gIrColHelp.row, function(i,jd){
          $Region.find([$x(jd.column_id),$x(jd.static_id)]).parent("th").attr({"title":jd.help_text});
        });       
      }
      ');
      htp.p ('</script>');
    end;
    

    Then create dynamic action that fires on page load and set affected elements to your IG region

    var $region = this.affectedElements;
    $region.on("interactivegridviewchange interactivegridreportsettingschange", function(event, ui) {
      setIgHelp($region);
    });
    setIgHelp($region);

    Hope this helps

    Regards,
    Jari

  • Igor 29 Apr 2020

    @Markus

    Hey, I got it to work with interactive reports, however my grids don't seems to work, even when I replace the parts that you mentioned. Is there anything else that you changed for it to work?

  • Jari Laine 24 Apr 2020

    Hi Anu,

    Thanks for update.

    I have changed page process point to After Footer and used this code in 18c database

    declare
      l_json varchar2(32700);
    begin
      select json_object(
        'row' value json_arrayagg(
          json_object(
            'column_alias' value column_alias,
            'column_id' value 'C' || column_id,
            'help_text' value help_text
          )
        ) returning varchar2
      ) as d
      into l_json
      from apex_application_page_ir_col
      where application_id = :APP_ID
      and page_id = :APP_PAGE_ID
      and help_text is not null
      ;
      htp.p ('<script type="text/javascript">');
      -- Create JSON object. Note need to use htp.prn so line feed isn't sent
      htp.prn ('var gIrColHelp = ' || l_json || ';');
      htp.p ('</script>');
    end;

    And this code in Dynamic Action

    var $Region=$(this.triggeringElement);
    $.each(gIrColHelp.row, function(i,jd){
      $Region.find([$x(jd.column_id),$x(jd.column_alias)]).attr({"title":jd.help_text});
    });
    
  • anu 24 Apr 2020

    Hello there,

    I found a post of https://community.oracle.com/thread/4265966 by someone who followed this article but he didn't succeed on Apex18.2

    I'm working on apex 19.2 and I found that I cannot call any jQuery functions before page loaded like as $parseJSON() in this article, so that I had to modify it to native javascript as JSON.parse() instead, it worked then.

  • Markus 18 Apr 2019

    Hi, if anybody is interested in how to to this for the Interactive Grid:

    1. replace apex_application_page_ir_col with apex_appl_page_ig_columns

    2. replace $($x(jd.COLUMN_ALIAS)).attr({“title”:jd.HELP_TEXT}); with $($($x(jd.COLUMN_ALIAS + "_HDR")).parent()).attr({"title":jd.HELP_TEXT});

    That's ist, now you can also have the help text on hover for Interactive Grid column headers.

  • Jari Laine 1 Dec 2018

    Hi Rakesh,

    You need check e.g. some jQuery tooltip plugins that allow HTML tags.

    Regards,
    Jari

  • Rakesh 12 Nov 2018

    Hi Jari,

    Your code works perfectly fine.

    Please advise how to implement a formatted tooltip that includes HTML tags.

    Regards,

    Rakesh

  • Jari Laine 25 Jul 2015

    Hi Sergiu,

    Could you please create example about this to apex.oracle.com, and share developer login details to workspace?

    Regards,
    Jari

  • Sergiu 24 Jul 2015

    Hi Jari,

    Yes, in some cases it's interfering with Apex 4.2 IR standard functions(like filter). Only in some environments I got this problem. In console appear some errors at the js function.

    But I managed to replicate this error every time, no matter if it's the primary application or the shadow one, just with this scenario:

    -submit the page forcing to show an error (with apex add error, inline with notification)

    -observe that the URL is changed ending with wwv_flow.accept

    -click Action->Filter

    -now the loading gif appears and the application remained stuck

    -check the console to see the error.

    After changing the js dynamic action to never, it works just fine.

    Hope this info helps.

  • Jari Laine 22 Jul 2015

    Hi Sergiu,

    You mean it's interfering IR on APEX 4.2 or APEX 5?
    I have not faced any problems on APEX 4.2.

    Regards,
    Jari