APEX

Hi Guys,

I've been deconstructing the Sample Database Application that comes bundled with Apex. I've got a couple of questions about the way that the Media List template works...

Version: Application Express 19.2.0.00.18

Application: Sample Database Application

Page: 1 Sample Database Application

Region; Top Customers

If I look at the Attributes for this region, the Template = Media List

Here's the query:

SELECT

    b.cust_last_name || ', ' || b.cust_first_name as list_title,

    'fa-user' as icon,

    nvl(SUM(a.ORDER_TOTAL),0) order_total,

    count(a.order_id) as order_cnt,

    b.customer_id id,

    b.CUST_STREET_ADDRESS1,

    b.CUST_STREET_ADDRESS2,

    b.CUST_CITY,

    b.CUST_STATE,

    b.CUST_POSTAL_CODE,

    b.CUST_EMAIL,

    apex_page.get_url(p_page => 7,  p_items => 'P7_CUSTOMER_ID,P7_BRANCH', p_values => b.customer_id ||','|| '1') link,

    ' ' link_attr,

    ' ' link_class,

    ' ' list_badge,

    ' ' list_class,

    ' ' list_text,

    b.PHONE_NUMBER1,

    b.PHONE_NUMBER2,

    b.CREDIT_LIMIT,

    b.tags

FROM

    demo_orders a,

    DEMO_CUSTOMERS b

WHERE

    a.customer_id = b.customer_id

GROUP BY

    b.customer_id,

    b.cust_last_name || ', ' || b.cust_first_name,

    b.CUST_STREET_ADDRESS1,

    b.CUST_STREET_ADDRESS2,

    b.CUST_CITY,

    b.CUST_STATE,

    b.CUST_POSTAL_CODE,

    b.CUST_EMAIL,

    b.PHONE_NUMBER1,

    b.PHONE_NUMBER2,

    b.CREDIT_LIMIT,

    b.tags

ORDER BY

    3 DESC

Here's the first couple of rows:

The Row Template is:

<li class="t-MediaList-item #LIST_CLASS#">

    <a href="#LINK#" class="t-MediaList-itemWrap #LINK_CLASS#" #LINK_ATTR#>

        <div class="t-MediaList-iconWrap">

            <span class="t-MediaList-icon u-color #ICON_COLOR_CLASS#"><span class="t-Icon #ICON_CLASS#"></span></span>

        </div>

        <div class="t-MediaList-body">

            <h3 class="t-MediaList-title">#LIST_TITLE#</h3>

            <p class="t-MediaList-desc">#LIST_TEXT#</p>

        </div>

        <div class="t-MediaList-badgeWrap">

            <span class="t-MediaList-badge">#LIST_BADGE#</span>

        </div>

    </a>

</li>

This link explains how the query maps to the template components: https://apex.oracle.com/pls/apex/apex_pm/r/ut/media-list

And here's part of the report screenshot.

And this is a HTML fragment from this page:

<a href="javascript:apex.navigation.dialog('f?p=106:7:13111422202164::NO::P7_CUSTOMER_ID,P7_BRANCH:7,1\u0026cs=3UD4c9O9_p7AC6xB9lReGjdG6kndfA1BrR35SAp3LrCnAi5xqgyrEGFMCbP4bHFlTOsiWeaAGDcxdGw_DNOnLEQ\u0026p_dialog_cs=r2zKEQAi0yLZFG3v1jIOgc1zl_WXrzBGKS2nnhZK8FUynbTi4Qq93qQeSl5SpsWX8823t_cbLttfQQnu5Vzg9g',{title:' - Customer Details',height:'auto',width:'720',maxWidth:'960',modal:true,dialog:null},'t-Dialog-page--standard '+'',apex.jQuery('#R1415528202941969491'));" class="t-MediaList-itemWrap  ">
        <div class="t-MediaList-iconWrap">
            <span class="t-MediaList-icon u-color #ICON_COLOR_CLASS#"><span class="t-Icon #ICON_CLASS#"></span></span>
        </div>
        <div class="t-MediaList-body">
            <h3 class="t-MediaList-title">Bradley, Eugene</h3>
            <p class="t-MediaList-desc">Windsor Locks, CT · 1,000</p>
        </div>
        <div class="t-MediaList-badgeWrap">
            <span class="t-MediaList-badge">2,760</span>
        </div>
    </a>

1 Mapping

What looks like the LIST_TEXT output seems to be a concatenation of the query columns; cust_city, cust_state, and credit_limit. I can't see anything in that page to suggest where the concatenation is done and then how it is mapped to the LIST_TEXT element. Can anyone help?

Similarly, the LIST_BADGE. It's sourced from the order_total query column but how is it mapped to the template? The query doesn't have a LIST_BADGE column and the template column / mapping positions don't seem to align.

2 Link

The query link column raw output is 'f?p=:7:::NO::P7_CUSTOMER_ID,P7_BRANCH:7,1', but the HTML a tag looks like this:

href="javascript:apex.navigation.dialog('f?p=106:7:13111422202164::NO::P7_CUSTOMER_ID,P7_BRANCH:7,1\u0026cs=3UD4c9O9_p7AC6xB9lReGjdG6kndfA1BrR35SAp3LrCnAi5xqgyrEGFMCbP4bHFlTOsiWeaAGDcxdGw_DNOnLEQ\u0026p_dialog_cs=r2zKEQAi0yLZFG3v1jIOgc1zl_WXrzBGKS2nnhZK8FUynbTi4Qq93qQeSl5SpsWX8823t_cbLttfQQnu5Vzg9g',{title:' - Customer Details',height:'auto',width:'720',maxWidth:'960',modal:true,dialog:null},'t-Dialog-page--standard '+'',apex.jQuery('#R1415528202941969491'));"

Is this just something that the template does - or, maybe that's Apex maintaining sessions - or is there a piece of mapping that the developer needs to include? Where does that javascript:apex.navigation.dialog part come from?

Thanks in advance...