Create Mobile Accordion with APEX 4.2

It's been a while since I posted some developer content, and I've been playing with APEX 4.2 a fair bit recently - preparing for my conference presentation.

I thought I'd share how I implemented a mobile (smartphone/gadget) accordion sourced from SQL.

I say the because you can do it out of the box using region templates, but only compressing multiple regions together, not rows from a query

APEX 4.2 Mobile Region templates

There seems to be many ways to skin the cat in APEX 4.2, and this is one way to do it - I'm happy to learn easier ways - I'm sure I will do that for a few things along the mobile journey!

Samsung 3 Screenshot

Consider the following SQL as my list, where column am_info_vw.header shows the accordion heading, and am_info_vw.my_html is the content.

select 
  null lvl
 ,header label
 ,my_html target
 ,decode(rn,1,'YES') is_current
 ,header image
 ,my_html image_attrib
 ,null img_alt
FROM am_info_vw
order by rn

The List Template image shows me commandeering the image attributes, but the same result can be made with the #TEXT# & #LINK# substitution strings.

List Template

List Template Current:

<div data-collapsed="false" data-role="collapsible" data-collapsed="false">
<h3>
<code>#TEXT#</code></h3>
<code>#LINK#</code></div>

List template non-current (just excludes the data-collapsed):

<div data-collapsed="false" data-role="collapsible">
<h3>
<code>#TEXT#</code></h3>
<code>#LINK#</code></div>

Before List Entry:

<div data-role="collapsible-set">

After List Entry closes the </div>

Then I just had to define the region on my mobile page utilising that template for the list with a plain region template, job done.

I'm still learning various options in the 4.2 environment, but this may seem like an easier method to create dynamic content lists instead of using the Advanced Attributes option in the List View built-in plug-in.

To help me out with the required syntax, I used the jQuery Mobile Docs.