Clickable DIV in ORACLE APEX report template not working

Question

I am using a custom named column template for a report, which generates divs. I need to make the entire DIV a hyperlink, which I believe HTML5 supports.

My Row Template is as below:

<div class="kpi_section_header">    
    <div>        
        <span>#PROC_NAME#</span>
    </div>
    <div>
        <i class="fa fa-dashboard fa-lg" aria-hidden="true"></i>    
    </div>
</div>

<a style="display:block" href="f?p=&APP_ID.:2:&APP_SESSION.::NO:RP,2:P2_KPI_ID,P2_KPI_NUM:#KPI_ID#,#KPI_NUM#"> 
<div class="#UI_ON_TARGET_CARD_CLASS#">
<div class="kpi_card_title">#KPI_NAME#

    </div>


<div class="kpi_card_detail">
    <table class="kpi_card_table">
                <tr>
                        <td>Target:</td>
        <td><span>#UI_TARGET_DESC#</span></td>
                </tr>
                <tr>
                        <td>Month:</td>
        <td><span>#UI_LATEST_MONTH#</span></td>
                </tr>                   
        </table>

</div>
    <div class="kpi_card_status_container">
        <table class="kpi_card_status_table">           
                <tr>
                    <td colspan="2" rowspan="2" class="kpi_card_value_cell">
            <span class="card_metric_value" style="color:#UI_ON_TARGET_COLOUR#;">#METRIC_VALUE#</span><br/>
                    <span class="card_metric_unit"  style="color:#UI_ON_TARGET_COLOUR#;">#UI_VALUE_UNIT#</span>

                </td>
                <td class="kpi_card_trend_cell">
            <span class="#KPI_TREND_ICON#"></span>
        </td>
            </tr>
            <tr>
                    <td class="kpi_card_trend_cell">
            <span class="kpi_metric_badge">#UI_TREND#</span>
        </td>
        </tr>

        </table>

    </div>
</div>
</a>

But when I view the source being generated, the anchor tag is being closed prematurely.

Start by removing everything between `
` and `
`. Test it. Does it work? Now add one piece back in, `
#KPI_NAME#
`. Test it. Does it work? You get the idea... Find out when it breaks and then drill into that. — Dan McGhan, Feb 21 '20 at 00:42
Okay. My guess is that you had some characters from the substitution strings that were not being escaped and were breaking the HTML. At any rate, at this point, you might want to either delete this question or provide your own answer (the details of your JavaScript-based solution) for others that find this question in the future. — Dan McGhan, Feb 21 '20 at 16:40

smackenzie · Answer 1 · 2020-02-24T17:12:54.423

0

While I couldnt solve the problem within the APEX templates, I was able to use this article to solve the problem using javascript.

javascript clickable div article.

Basically I put this in the "Function and Global Declaration" section of the Page:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

And in my row_template:

 <div class="#UI_ON_TARGET_CARD_CLASS#" data-link="f?p=&APP_ID.:2:&APP_SESSION.::NO:RP,2:P2_KPI_ID,P2_KPI_NUM:#KPI_ID#,#KPI_NUM#">

So the URL is added to the data-link attribute of the div, and the jquery selector only operates on dom elements with a data-link attribute.

edited Feb 24 '20 at 17:12

answered Feb 24 '20 at 16:56

smackenzie

2,880
7
46
99

Nice! Just a heads up... Just below the Function and Global Variable Declaration" field, there's an "Execute When Page Loads". You could move your code there to eliminate the `document.ready` portion (you'd only need the body of the anonymous function/callback). – Dan McGhan Feb 24 '20 at 19:10
Question for you, does the report refresh at all (filter, sort, etc.)? If so, you may need to adjust the event binding to use event delegation (sounds harder than it is). Let me know if you need help with that. – Dan McGhan Feb 24 '20 at 19:12
Hi, thanks. It doesn't use typical report filters, its a card view which spits out dives. I do allow filtering through a Select List, but this submits the page so I am assuming it all gets reassigned then. Event delegation....I am an Oracle guy, not a javascript guy... ;-) – smackenzie Feb 25 '20 at 11:49
I hear you. I'm an Oracle guy that eventually became a JavaScript guy too. Here's a hands-on lab you could work through if you're interested in learning: https://oracle.github.io/learning-library/developer-library/apex/intro-to-javascript/ There's a link to slides at the top of each module (probably best to download the PDFs). Slides 53-57 in Module 3 deal with event delegation. I hope to have presentation recordings on YouTube soon which I'll link to in the lab instead of the slides. – Dan McGhan Feb 25 '20 at 14:44
Cheers Dan, much appreciated...best I have managed is to add a javascript button to an interactive grid to write the selected value into session – smackenzie Feb 25 '20 at 14:46

Clickable DIV in ORACLE APEX report template not working

1 Answers1