Forum Stats

  • 3,782,325 Users
  • 2,254,637 Discussions
  • 7,880,045 Comments

Discussions

Media List Template / Classic Report mapping

Steve Roach
Steve Roach Member Posts: 17 Blue Ribbon
edited Apr 26, 2020 8:59AM in APEX Discussions

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_TITLEICONORDER_TOTALORDER_CNTIDCUST_STREET_ADDRESS1CUST_STREET_ADDRESS2CUST_CITYCUST_STATECUST_POSTAL_CODECUST_EMAILLINKLINK_ATTRLINK_CLASSLIST_BADGELIST_CLASSLIST_TEXTPHONE_NUMBER1PHONE_NUMBER2CREDIT_LIMITTAGS
Bradley, Eugenefa-user276027Schoephoester RoadWindsor LocksCT06096f?p=:7:::NO::P7_CUSTOMER_ID,P7_BRANCH:7,1860-555-18351000REPEAT CUSTOMER
Logan, Edwardfa-user2420231 Harborside DriveEast BostonMA02128f?p=:7:::NO::P7_CUSTOMER_ID,P7_BRANCH:3,1617-555-32951000REPEAT 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...

Tagged:
Steve Roach

Best Answer

  • fac586
    fac586 Senior Technical Architect Member Posts: 20,344 Red Diamond
    edited Apr 25, 2020 6:17AM Accepted Answer
    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 RoachSteve Roach

Answers

  • fac586
    fac586 Senior Technical Architect Member Posts: 20,344 Red Diamond
    edited Apr 25, 2020 6:17AM Accepted Answer
    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 RoachSteve Roach
  • Steve Roach
    Steve Roach Member Posts: 17 Blue Ribbon
    edited Apr 26, 2020 8:59AM

    Hi,

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