Skip to Main Content
Posted on

Interactive report column headings tooltip help

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

Comments

  • Jari Laine 27-JAN-22 03.02.37.463118 PM

    Hi Stefan,

    Please change after footer process code as below and test does it work.
    I'm not sure is this best way fetch needed data, but for my quick test it did work correctly.

    declare
  l_json varchar2(32700);
begin
  select json_object(
    'row' value json_arrayagg(
      json_object(
        'column_alias' value t1.column_alias,
        'column_id' value 'C' || t1.column_id,
        'help_text' value coalesce( to_char( t2.to_string ), t1.help_text )
      )
    ) returning varchar2
  ) as d
  into l_json
  from apex_application_page_ir_col t1
  left join apex_application_trans_repos t2 on 1 = 1
    and t2.internal_attribute_name = 'APEX_IR_COLUMNS.HELP_TEXT'
    and t2.language_code = apex_application.g_browser_language
    and t1.application_id = t2.application_id
    and t1.page_id = t2.application_page_id
    and t1.column_id = t2.from_id
  where 1 = 1
  and t1.application_id = :APP_ID
  and t1.page_id = :APP_PAGE_ID
  and t1.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;

    Regards,
    Jari

  • Jari Laine 27-JAN-22 01.56.26.917124 PM

    Hi Stefan,

    I can reproduce issue, but couldn't find quickly fix. Need dig more about this and understand what data is available in APEX views.

    It seems there is also APEX bug, that build in IR column help shows wrong language help text. But that isn't root cause why the tooltip shows primary application help text even you run translated version.

    Regards,
    Jari

  • Stefan 27-JAN-22 11.32.16.675306 AM

    Hi Jari,
    thats the code for After Footer Process:

    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 here the 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});
});
  • Jari Laine 27-JAN-22 11.27.22.508572 AM

    Hi Stefan,

    Thanks for reporting bug that you get HTTP 400 error when try post code.

    Could you please try post code again?

    Regards,
    Jari

  • Stefan 27-JAN-22 09.29.56.669051 AM

    Hi Jari,
    i cant post the code. I always get error 400.
    I used the code for after footer without modifications.
    Oracle Version 19.13 Apex Version 21.1.0
    Regards
    Stefan

  • Jari Laine 27-JAN-22 09.04.08.125203 AM

    Hi Stefan,

    What is your APEX and database version?
    Do you use code as is from this blog post or have you done some modifications?

    Regards,
    Jari 

  • Stefan 27-JAN-22 08.48.52.305117 AM

    Hello Jari,
    i have an application with translation. Is it possible to read the right language on page load? At the moment it only catches the german phrases.
    thanks in advance

  • Jari Laine 08-FEB-21 03.08.35.773798 PM

    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 08-FEB-21 02.57.31.966586 PM

    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 08-FEB-21 01.27.23.718002 PM

    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