Thursday, December 9, 2010

Region Display Selector - How I (Would) Like It

In APEX4 I welcomed very much the new region type - the Region Display Selector. The only thing I don't like is how it displays the regions. When I see all, I see nothing. So I decided to customize the RDS a bit - on page load, not all the regions should be shown, only the first one.

Approach: Find the second tab and simulate the click on it when the page loads.
With firefox and firebug this is done fast: rds tabs is the list with the class 'apex-rds'.
Here is the jQuery for my purpose:
$('ul.apex-rds > li:eq(1) > a').trigger('click');

Explanation:
Find the <a>, which is in the second <li>, which is in the <ul> with the class 'apex-rds' and simulate a click.
And I'm done.
The code can be put into a dynamic action or in a js-file - depending on one's needs.

Done. Almost, because somehow I am confused that the second and not first tab is selected.
Just changing the position of the 'Show all' would make me happy:


$('ul.apex-rds')                        // find the <ul> with the tabs
  .each(function(){                     // in case we have more than one RDS region
    $(this)
      .children('li.apex-rds-first')    // find the tab 'Show all'
      .remove()                         // remove it-the function returns the removed element itself
      .removeClass('apex-rds-first')    // switch the classes
      .addClass('apex-rds-last')
      .appendTo($(this))                // append to the ul again
      .prev('li.apex-rds-last')         // go to the one that was last before
      .removeClass('apex-rds-last')     // remove class
      .siblings('li:first')             // find the new first
      .addClass('apex-rds-first')       // add the class
      .children('a:first')              // find the href in it
      .trigger('click');                // and symulate a click
});

The last thing. I really like the new RDS region... but I am not able to choose which region (with the RDS flag) goes into this particular container. When you create a second RDS on the page, the result is quite confusing.

For an update please see the part two.

7 comments:

  1. Hi Teresku,

    I would suggest to build your own region type plug-in for your customized Region Display Selector instead of tweaking the existing one with a lot of JavaScript which you have to include on each page. A region type plug-in will also allow you to have an attribute where you can pick which region should be displayed first. And if you put your new region type as master region for your other regions, you can also build a page with multiple RDS.

    Regards
    Patrick

    ReplyDelete
  2. "Almost, because somehow I am confused that the second and not first tab is selected."

    The index starts with "0", i guess.

    ReplyDelete
  3. @Patrick - Yes, this is a good idea. You are right, I'm just lazy. It was the quickest way to achieve what I needed. And putting the code on the 0 page as a Dynamic Action or including it to the js (static file) seems to meet the modularity or rather - 'reusability' - of the code (don't need to include it on each page). But Plugin of a custom RDS is definitely worth a try. And still - I think, the current RDS needs some improvement - either allow the developer only one RDS on the page or allow to choose the regions included in it. Or maybe I'm missing something?
    @Christian - thank you for the note. I probably need to explain my ideas a bit more clearly. What I meant was that usually when we open a document/page with a group of tabs, we expect the fist tab to be selected (which is the case by default). But the fist tab is the 'Show All' - unfortunately. Because I changed this, the selection is on the second tab and that's what may look confusing when you are on the page for the first time. Thats' why I changed the order of the tabs. I hope it was clear this time :)

    ReplyDelete
  4. I love your solution Teresku :) Thank you
    I have put the dynamic action in page zero and all is working as expected, so far I'm not using multiple RDS in one page.

    I have put the Selection Type in the Affected Elements as triggering element. but I assume if I have multiple RDS I would use jQuery selector..

    I am right on this ?

    ReplyDelete
  5. Jasem,

    I'm glad it serves your purpose :)
    I'm not quite sure if I understand what you mean and therefore probably cannot really answer your question properly but I will give it a try anyway :)

    I'm using the above code when the page loads, where Action is the 'Execute JavaScript Code', Affected Elements is the 'jQuery Selector' - 'ul.apex-rds', and Code starts with $(this.affectedElements) instead of $('ul.apex-rds').
    The code works for one or more of the RDS regions because of the each() function - so no need to change anything.

    Another story is with the multiple RDS on one page.
    Let's assume you have two RDS regions on one page and you "put" 3 regions there: "one", "two" and "three". You cannot choose which region will go to which RDS, so all three are in both RDS.
    Then, when you click on the first RDS, let's say, the tab "two", the region "two" will be shown, the tab "two" on the first RDS will get selected, but not on the second RDS, here the current tab remains unchanged. When you then click on the second RDS e.g. the tab "three", tab "three" will be shown, "two" hides but on the first RDS the selected tab remains "two". This is quite confusing for the user and we don't want that, right? :)
    So if you have more than one RDS, you need to take care of that.

    Does this answer your question?

    ReplyDelete
  6. I totally agree, thank you again for your help :)

    ReplyDelete