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.

Wednesday, December 8, 2010

Dynamic Action on Button-Item

Reading the post How to Trigger Dynamic Action From Button by Martin Giffy D'Souza, I decided to give the dynamic action on buttons another try.
The action on the 'normal' button (in a region position) can be added as described and works perfectly, but if I want to do the same with the button-item, I get an unwanted effect - despite of disabling/rewriting the click event, the site will redirect: the apex.submit does the job.
The only trick that works is to remove the attribute 'onclick' explicitly attr('onclick','') and then to add the new event.

Create Dynamic Action -> Advanced -> Event: Page Load -> Action: Excecute JS Code

$(this.affectedElements) //when you choose Selection Type: Item(s) (by HTML button)
or
$('#custom') //with known id
  .attr('onclick','')
  .click(function(){alert('my event')})



This can, of course, be splitted into OnLoad action (disable the click first) and then another one to add a custom event.
All roads lead to Rome.