Discussions
Categories
- 197K All Categories
- 2.5K Data
- 546 Big Data Appliance
- 1.9K Data Science
- 450.8K Databases
- 221.9K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 552 MySQL Community Space
- 479 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3.1K ORDS, SODA & JSON in the Database
- 556 SQLcl
- 4K SQL Developer Data Modeler
- 187.2K SQL & PL/SQL
- 21.4K SQL Developer
- 296.4K Development
- 17 Developer Projects
- 139 Programming Languages
- 293K Development Tools
- 110 DevOps
- 3.1K QA/Testing
- 646.1K Java
- 28 Java Learning Subscription
- 37K Database Connectivity
- 159 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.2K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 19 Java Essentials
- 162 Java 8 Questions
- 86K Java Programming
- 81 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.3K Java SE
- 13.8K Java Security
- 205 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 468 LiveLabs
- 39 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.7K Other Languages
- 2.3K Chinese
- 175 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 233 Portuguese
Media List Template / Classic Report mapping

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>
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...
Best 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.
Answers
-
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.
-
Hi,
Thank you very much for the clear, comprehensive answer. That couldn't have been a better reply.