Dynamically Displaying Icons in Apex Reports

on

Problem

You want certain rows of your interactive report to have icons.

Solution

There are tons of examples and suggestion on how to do this. None of them worked for me.
In the end, this approach of creating global variables on page 0, then using the link text of the column worked.

On page 0 create names for each icon.


Create a dynamic action on page 0, page load called "Set Icons"


The first action will be to execute PL/SQL Code

declare
  v_icon_width number  := 32;
  v_icon_height number := 32;
begin
  :app_icon_width  := v_icon_width;
  :app_icon_height := v_icon_height;
  
  :p0_download_icon := '<img src="#APP_IMAGES#download_stylish_64x64.png" class="drop-shadow-image" '||
                       'onmouseover=''this.src="#APP_IMAGES#download_stylish_rollover_64x64.png"; this.className="drop-shadow-image"'' '||
                       'onmouseout=''this.src="#APP_IMAGES#download_stylish_64x64.png"; this.className="drop-shadow-image"'' '||
                       'width="'||v_icon_width||'px" '||
                       'height="'||v_icon_height||'px" '||
                       'class="download-icon" />';
                       
  :p0_upload_icon  := '<img src="#APP_IMAGES#upload_stylish_64x64.png" class="drop-shadow-image" '||
                       'onmouseover=''this.src="#APP_IMAGES#upload_stylish_rollover_64x64.png"; this.className="drop-shadow-image"'' '||
                       'onmouseout=''this.src="#APP_IMAGES#upload_stylish_64x64.png"; this.className="drop-shadow-image"'' '||
                       'width="'||v_icon_width||'px" '||
                       'height="'||v_icon_height||'px" '||
                       'class="upload-icon" />';
                            
  :p0_view_history_icon  := '<img src="#APP_IMAGES#browse_view_stylish_64x64.png" class="drop-shadow-image"'||
                            'onmouseover=''this.src="#APP_IMAGES#browse_view_stylish_rollover_64x64.png"; this.className="drop-shadow-image"'' '||
                            'onmouseout=''this.src="#APP_IMAGES#browse_view_stylish_64x64.png"; this.className="drop-shadow-image"'' '||
                            'width="'||v_icon_width||'px" '||
                            'height="'||v_icon_height||'px" '||
                            'class="view-history-icon" />';

   :p0_cannot_download_icon  := '<img src="#APP_IMAGES#download_stylish_cannot_download_64x64.png" class="drop-shadow-image" '||
                               'onmouseover=''this.src="#APP_IMAGES#download_stylish_cannot_download_rollover_64x64.png"; this.className="drop-shadow-image"'' '||
                               'onmouseout=''this.src="#APP_IMAGES#download_stylish_cannot_download_64x64.png"; this.className="drop-shadow-image"'' '||
                               'width="'||v_icon_width||'px" '||
                               'height="'||v_icon_height||'px" '||
                               'class="cannot-download-icon" />';

   :p0_upload_attachment_icon  := '<img src="#APP_IMAGES#doc.png" class="grayscale-image drop-shadow-image" '||
                                 'onmouseover=''this.src="#APP_IMAGES#doc.png"; this.className="drop-shadow-image"'' '||
                                 'onmouseout=''this.src="#APP_IMAGES#doc.png"; this.className="grayscale-image drop-shadow-image"'' '||
                                 'width="'||v_icon_width||'px" '||
                                 'height="'||v_icon_height||'px" '||
                                 'class="upload-attachment-icon" />';
                                 
end;  


The next action will be to execute Javascript code.

replaceClassContainerHTML('custom_download_link',
                          $v('P0_DOWNLOAD_ICON'));

 replaceClassContainerHTML('custom_upload_link',
                          $v('P0_UPLOAD_ICON'));

 replaceClassContainerHTML('custom_view_history_link',
                          $v('P0_VIEW_HISTORY_ICON'));

 replaceClassContainerHTML('upload-attachment',
                          $v('P0_UPLOAD_ATTACHMENT_ICON'));

Now we have a set of variables the define what our icons look like, and we can use throughout our application.

Now create your interactive report. Example of what your SQL would look like:

select a.RELEASE_RESULT_ID, to_char(datetime,'DD-MON-YYYY HH24:MI:SS') datetime,  LOG, decode(max(b.release_Result_id),null,null,'custom_view_history_link') link2
from ....

Effectively we are sometimes returning a value of null for link2, and sometime we are returning a value of "custom_view_history_link"

Now go to the column attributes of link2.


Fill in your link details. (To another page or a URL, or openmodal...)

Set you link text to <span class="#LINK2#"></span>

Explanation


This will dynamically set the value to the column in your SQL statement. Either
<span class=""></span>
or
<span class="custom_view_history_link"></span>

If the later, then it knows from the code we put on page 0, that we actually mean

 <span class="$v('P0_VIEW_HISTORY_ICON')"></span>

..which really means....

 <span class=" '<img src="#APP_IMAGES#browse_view_stylish_64x64.png" class="drop-shadow-image"'||
                            'onmouse  (etc) etc) "></span>

Result



Acknowledgement

Theo Papadakis

Comments

Post a Comment