Skip to main content

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.

Comments

  1. AnonymousDecember 1, 2016 at 11:12 AM

    How can I get these card to show icons?

    ReplyDelete
  2. Steven FeuersteinDecember 2, 2016 at 2:50 PM

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

    ReplyDelete
  3. Wakey7March 1, 2017 at 12:35 PM

    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. Ming (Tim) LeiMarch 29, 2017 at 11:46 AM

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

    ReplyDelete
    Replies
    1. Steven FeuersteinMarch 29, 2017 at 12:12 PM

      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. Art RinbergerMarch 29, 2017 at 3:06 PM

    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. Ming (Tim) LeiApril 22, 2017 at 10:32 PM

    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
  7. UnknownDecember 1, 2017 at 5:23 AM

    Hi,

    I am trying to give different icon to each card but i couldnt. What I do is just work for giving one icon for all the cards so all the cards have same icon at same page so it is not useful. Do you have any idea how to give each card different icon?

    ReplyDelete
  8. rando lazaJanuary 23, 2019 at 9:34 PM

    why is it card template is missing or not showing in the template options..

    ReplyDelete

Post a Comment

Popular posts from this blog

Running out of PGA memory with MULTISET ops? Watch out for DISTINCT!

A PL/SQL team inside Oracle made excellent use of nested tables and MULTISET operators in SQL, blending data in tables with procedurally-generated datasets (nested tables).  All was going well when they hit the dreaded: ORA-04030: out of process memory when trying to allocate 2032 bytes  They asked for my help.  The error occurred on this SELECT: SELECT  *    FROM header_tab trx    WHERE (generated_ntab1 SUBMULTISET OF trx.column_ntab)       AND ((trx.column_ntab MULTISET             EXCEPT DISTINCT generated_ntab2) IS EMPTY) The problem is clearly related to the use of those nested tables. Now, there was clearly sufficient PGA for the nested tables themselves. So the problem was in executing the MULTISET-related functionality. We talked for a bit about dropping the use of nested tables and instead doing everything in SQL, to avoid the PGA error. That would, however require lots of work, revamping algorithms, ensuring correctness, you know the score. Then my eyes snagge
4 comments
Read more

How to Pick the Limit for BULK COLLECT

This question rolled into my In Box today: In the case of using the LIMIT clause of BULK COLLECT, how do we decide what value to use for the limit? First I give the quick answer, then I provide support for that answer Quick Answer Start with 100. That's the default (and only) setting for cursor FOR loop optimizations. It offers a sweet spot of improved performance over row-by-row and not-too-much PGA memory consumption. Test to see if that's fast enough (likely will be for many cases). If not, try higher values until you reach the performance level you need - and you are not consuming too much PGA memory.  Don't hard-code the limit value: make it a parameter to your subprogram or a constant in a package specification. Don't put anything in the collection you don't need. [from Giulio Dottorini] Remember: each session that runs this code will use that amount of memory. Background When you use BULK COLLECT, you retrieve more than row with each fetch,
4 comments
Read more

Quick Guide to User-Defined Types in Oracle PL/SQL

A Twitter follower recently asked for more information on user-defined types in the PL/SQL language, and I figured the best way to answer is to offer up this blog post. PL/SQL is a strongly-typed language . Before you can work with a variable or constant, it must be declared with a type (yes, PL/SQL also supports lots of implicit conversions from one type to another, but still, everything must be declared with a type). PL/SQL offers a wide array of pre-defined data types , both in the language natively (such as VARCHAR2, PLS_INTEGER, BOOLEAN, etc.) and in a variety of supplied packages (e.g., the NUMBER_TABLE collection type in the DBMS_SQL package). Data types in PL/SQL can be scalars, such as strings and numbers, or composite (consisting of one or more scalars), such as record types, collection types and object types. You can't really declare your own "user-defined" scalars, though you can define subtypes  from those scalars, which can be very helpful from the p
24 comments
Read more