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 8 Feb 2021

    Hi Robert,

    Changes I made to your application works only for Interactive Grid. Because Interactive Grid and Interactive Report column help is available on different APEX views.

    Changes I did to your application should work on APEX 20.1 and Interactive Grid.

    Make sure page process to fetch help information is before or after footer. And check you have placed JavaScript to correct place in page attributes. See that IG region have static ID. Make sure you update that region static ID to JavaScript on page attributes.

    If you run page in debug mode, can you see any errors? Or do you get any JavaScript error on browser console?

    Regards,
    Jari

  • Robert Sibek 8 Feb 2021

    Hi Jari,
    thanks for editing the application.
    While it works great in the apex.oracle.com the same is not working in our application.
    I've tried it for Interactive grid and Interactive report (respecting changes you've done), but withou any success.
    Do you have any suggestion, what could be wrong? Unfortunately I can't share this app because of NDA.

  • Jari Laine 8 Feb 2021

    Hi Robert,

    Code in original post isn't working with IG. You can see code for IG from previous comments.

    I did copy your application to new ID and made changes so it work with IG.
    Check new application page 1

    • Changed code in process that is executed before footer (post rendering)
    • Dynamic action is not needed
      • See JavaScript from page JavaScript Function and Global Variable Declaration
    • IG region must have static ID

    Hope this helps.

    Regards,
    Jari

  • Robert Sibek 8 Feb 2021

    Hi Jari,
    thanks for quick reply.
    You can check the app on apex.oracle.com.
    Workspace: xxx
    User: xxx
    Passwd: xxx
    There's just one app - ideas. You can see both scripts (for dynamic action and process) are there, but help is still not displayed.

  • Jari Laine 8 Feb 2021

    Hi Robert,

    Thank you for feedback.

    Could you please reproduce issue on apex.oracle.com so I can see it?
    My example still seems to working ok on APEX 20.2. 

    Regards,
    Jari

  • Robert Sibek 8 Feb 2021

    Hello,
    looks like it's not working with Apex 20.1.
    I can see in the Chrome developer console, that the function setIgHelp doesn't exists.
    Do you have an idea, how to fix it?
    Thanks,
    Robert

  • 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.