Wednesday, May 25, 2016

My two favorite APEX 5 features: Regional Display Selector and Cards

We (the over-sized development team for the PL/SQL Challenge - myself and my son, Eli) have been busy creating a new website on top of the PLCH platform (tables and packages):

The Oracle Dev Gym!



In a few short months (and just a part time involvement by yours truly), we have leveraged Oracle Application Express 5 to create what I think is an elegant, easy-to-use site that our users will absolutely love. 

We plan to initially make the Dev Gym available only for current users of PL/SQL Challenge, so we can get feedback from our loyal user base. We will make the necessary adjustments and then offer it for general availability later this year.

Anyway, more on that as the date approaches (the date being June 27, the APEX Open Mic Night at Kscope16, where I will present it to a packed room of APEX experts).

What I want to talk about today are two features of APEX that are making me so happy these days: Regional Display Selector and Cards.

Regional Display Selector (RDS)

This is not a new feature to 5, but it sure works nicely and looks great! RDS gives you a way to easily create tabbed "sub-pages" on your page. You move oh-so-quickly between the content on each tab, because the page is not being refreshed. 


And they are so easy to set up! You define the "tab" region with a type of Region Display Selector:


Then if you want a region to be appear as a tab, simply change the RDS setting in Properties for that region to Yes.


This sort of high-level declarative approach to designing sites makes me happy. Sure, the RDS feature could be more configurable, and I am sure it will be in future releases. In the meantime, it offers a great combination of super productivity and nice UI with minimal coding.

Cards

So in our redesign of PL/SQL Challenge, we wanted to accomplish, hmmm, well, actually many things, but here was a big one: make the site responsive. Allow users to easily take a quiz on their tablet, maybe even their phone. 

You can do it with the current set, as players have told me so, but it isn't the most pleasant experience. We simply didn't design the site with that in mind five years ago.

But now? It's a necessity and fortunately APEX 5 generally and the Universal Theme in particular makes that much easier to accomplish. 

One key element is our shift to using cards. The first image in this post shows the Dev Gym home page, featuring big, attractive "buttons" a user can click or press to make their selection. These are actually "cards".

What this means is that I create a region of type Classic Report. I then drill down to the Attributes for the region, and set the template to Cards:


I can then set all sorts of options. For example, I can choose to Display Icons and then simply specify a FontAwesome icon by name, associating in the query with a card_icon column. 


That's it. From there APEX 5 takes over and does its beautiful job. Of course, if you want to tweak the built-in behavior and so some really "fancy" stuff, then you can use JavaScript.

You can. I can't, because I have not learned JavaScript. Fortunately, that's been one of Eli's main foci in his APEX work, so I have him work that magic.

There is one particular usage of Cards we are exploring that replaces a LOV selector against a tree. I think the approach is very intuitive and way better suited to mobile device usage. We will soon see what our users think of it.

So bottom line: if you are using Oracle Application Express 5 you really owe it to yourself to explore and make best use of these two great features: the Region Display Selector and Cards.

7 comments:

  1. How can I get these card to show icons?

    ReplyDelete
  2. Click on Region Attributes.
    Click on Template Options
    Set Icons to "Display Icons".

    ReplyDelete
  3. Thanks very much for this, I came across the site and did a few searches for the card display before hitting on your blog. Thanks a million.

    ReplyDelete
  4. If one page contains two RDSes, how to allocate different regions to separate RDS?

    ReplyDelete
    Replies
    1. Ming, I am not an expert in this so I am going to answer, but also post a note on Twitter and see what we get. I checked in with my lead APEX developer on the Dev Gym and we concluded as follows: As you imply, there is no way, when saying that a region is part of an RDS, to say *which* RDS. Maybe you could figure out how to get something like this to work, but you would be better off not trying. Instead, break them up into two pages.

      Delete
  5. You can change the RDS regions to Static regions w/Tab Container template. This will give you a new area on the regions, labeled Tabs, that accepts other regions like the Subregion area does. Those Tab subregions will then appear as tabs for their parent regions just the way you specified. This may also work with other region types as the parent, but the Static region is what I usually use.

    ReplyDelete
  6. Hi Steven and Art,

    You are both right. There is no "default" way to get this. And I tried changing the region type and template. They both worked but "Show All" tab would missed.

    In order to learn more about APEX and plugin logic, I got the RDS customizable plugin from the link: http://apex.oracle.com/pls/apex/f?p=TER:RDS_CUSTOMIZABLE for APEX 4.0. And this week I modified slightly to match what I wanted. Now I released a demo online here: https://apex.oracle.com/pls/apex/f?p=RDS_CUSTOMIZABLE:DEMO.

    From 4.0 to 5.1, the front end logic for RDS changed a lot and there are still a couple of small bugs for this plugin with new widget.apexTabs.js. But it's really worth to try.

    ReplyDelete