Media List Template / Classic Report mapping

Steve Roach

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:

                   

LIST_TITLE

ICON

ORDER_TOTAL

ORDER_CNT

ID

CUST_STREET_ADDRESS1

CUST_STREET_ADDRESS2

CUST_CITY

CUST_STATE

CUST_POSTAL_CODE

CUST_EMAIL

LINK

LINK_ATTR

LINK_CLASS

LIST_BADGE

LIST_CLASS

LIST_TEXT

PHONE_NUMBER1

PHONE_NUMBER2

CREDIT_LIMIT

TAGS

Bradley, Eugene

fa-user

2760

2

7

Schoephoester Road

Windsor Locks

CT

06096

f?p=:7:::NO::P7_CUSTOMER_ID,P7_BRANCH:7,1

860-555-1835

1000

REPEAT CUSTOMER

Logan, Edward

fa-user

2420

2

3

1 Harborside Drive

East Boston

MA

02128

f?p=:7:::NO::P7_CUSTOMER_ID,P7_BRANCH:3,1

617-555-3295

1000

REPEAT CUSTOMER

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>

A couple of questions:

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

fac586

Steve Roach wrote:A couple of questions:1 MappingWhat 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.

The LIST_TEXT and LIST_BADGE content is sourced from other column values and constructed in the column HTML Expression property.

This is quite a common technique in complex reports, and enforces good practice in the form of separation of concerns. All of the required data can be retrieved through simple references to individual columns without having to resort to concatenation or additional function calls. The LIST_TITLE column could also be handled in this way, by selecting CUST_FIRST_NAME and CUST_LAST_NAME as separate columns, with LIST_TITLE as an empty column, then adding an HTML Expression on LIST_TITLE:

#CUST_LAST_NAME#, #CUST_FIRST_NAME#

We can use this technique to take things to another level, by marking up the relevant data using hCard microformat semantics for the benefit of specialist search engines and microformat-aware APEX and browser extensions:

<div class="vcard">    <span class="fn n"><span class="family-name">#CUST_LAST_NAME#</span>, <span class="given-name">#CUST_FIRST_NAME#</span></span>  </div>  

2 LinkThe 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? 

The link URL is generated using the apex_page.get_url API method. Look at the documentation and notice how most of the parameters describe default behaviour. When these parameters are omitted from the function call—as the application and session IDs are in this report—they are replaced by the corresponding values from the current application or session.

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

If the report query is executed outside of the context of a valid APEX application session, no suitable default values exist and consequently the parameter values are missing from the URL.

Where does that javascript:apex.navigation.dialog part come from?

APEX scans all link and button targets and URLs for references to dialog pages. Where these occur they are automatically transformed into a JavaScript call that will display the relevant page as a dialog, with a generated checksum and parameters based on the target page attributes.

fac586

Steve Roach wrote:A couple of questions:1 MappingWhat 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.

The LIST_TEXT and LIST_BADGE content is sourced from other column values and constructed in the column HTML Expression property.

This is quite a common technique in complex reports, and enforces good practice in the form of separation of concerns. All of the required data can be retrieved through simple references to individual columns without having to resort to concatenation or additional function calls. The LIST_TITLE column could also be handled in this way, by selecting CUST_FIRST_NAME and CUST_LAST_NAME as separate columns, with LIST_TITLE as an empty column, then adding an HTML Expression on LIST_TITLE:

#CUST_LAST_NAME#, #CUST_FIRST_NAME#

We can use this technique to take things to another level, by marking up the relevant data using hCard microformat semantics for the benefit of specialist search engines and microformat-aware APEX and browser extensions:

<div class="vcard">    <span class="fn n"><span class="family-name">#CUST_LAST_NAME#</span>, <span class="given-name">#CUST_FIRST_NAME#</span></span>  </div>  

2 LinkThe 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? 

The link URL is generated using the apex_page.get_url API method. Look at the documentation and notice how most of the parameters describe default behaviour. When these parameters are omitted from the function call—as the application and session IDs are in this report—they are replaced by the corresponding values from the current application or session.

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

If the report query is executed outside of the context of a valid APEX application session, no suitable default values exist and consequently the parameter values are missing from the URL.

Where does that javascript:apex.navigation.dialog part come from?

APEX scans all link and button targets and URLs for references to dialog pages. Where these occur they are automatically transformed into a JavaScript call that will display the relevant page as a dialog, with a generated checksum and parameters based on the target page attributes.

Steve Roach

Hi,

Thank you very much for the clear, comprehensive answer. That couldn't have been a better reply.