Wednesday 29 December 2010

Basic Apex scripting - show/hide & labels

Sometimes the scripting requirements for an Oracle Apex page are fairly simple, yet determining the required modifications can be frustrating, particularly for a beginner in either Apex or HTML behaviours.

Recently I had the requirement of showing or hiding both the label and input item, depending on the selection within a select list.
So with this example, let's say my requirement is to hide the "Other Description" label and input item if "My select list" equals "- Select me -"
Otherwise, display the items and as an added bonus - set the label to the value of the selected list item.

First I need to modify the label so I have the ability to reference it in my JavaScript. So I edit my P1_OTHER_DESCRIPTION field and extend the HTML Table Cell Attributes in the Label section (not the Element section).
Here I added id="label_other"

Now I can define a script to do my work. It's highly likely this script will be used solely on this page so there's no real harm in adding it directly to the page attributes - unless you have a dedicated JavaScript file you add your scripting code.

So this would be added to the page footer text:
<script language="JavaScript" type="text/javascript">
<!--
function toggleOtherDesc(){
  $f_Hide_On_Value_Item('P1_MY_SELECTLIST',['P1_OTHER_DESCRIPTION','LABEL_OTHER'],'hide_desc');

  //I could also change my actual label, for instance to the value of my select list input item
  document.getElementById('LABEL_OTHER').innerText = $v('P1_MY_SELECTLIST'); 
}
toggleOtherDesc();
//-->
</script>
Some points to note here

  • $f_Hide_On_Value_Item is a pre-defined function you can call to hide a list of items based on the value of another. Its behaviour is documented online here. In this case I listed both the label I created an id for plus, the item name - surrounded by square brackets as to define an array.
  • 'hide_desc' is the value I've set in this case when the input description is '- Select me'
  • .innerText allows me to set the descriptive label, as long as I supply the id I defined for the label, not the item name you see in the Apex builder.
  • $v will return the value in the field, as it would be posted. This is also documented in the JavaScript API reference page.
  • The highlighted line 9 means the function will be called when you open the page, in this case after it's rendered. That way the fields will be shown/hidden depending on the set value in the select list.

Lastly, I can modify the P1_MY_SELECTLIST item to call the JavaScript each time the selection changes.
So I add onChange="javascript:toggleOtherDesc();" to the HTML Form Element Attributes in the Element section.

So the final product will change the label to the selected value in the select list, or hide the label and input field if '- Select me -' is chosen.
There you have it!

Thursday 23 December 2010

Holiday season cometh, want to decorate your laptop?

It's almost a long weekend. Awesome!

Firstly, I'd like to offer a brief sentiment: some people around the world use this time to celebrate Christmas. I find it a somewhat uncomfortable time because I am one of few in my country, certainly in my circle of friends and family that do not. For those curious, recently someone else found almost the perfect words that fit my noggin. I guess I find solace in the fact that at least a third of the world's population don't celebrate it either.

However... for those of you that do, I have a great (albeit late) gift idea for you! They are called Laptop wraps, and here is a funky design example:


For those with small to large businesses, you may even consider it a great tax write-off while promoting your business. During this year's conference, we certainly had many people interested in having one designed to suit their brand. As I was going through the airport scanners recently, it even caught the favourable and approving eye of some of the security staff. Here is my laptop -


So if you want one (or many), my sister, Vicki, is in the process of populating her website full of various ideas along the same concept. It doesn't matter where in the world you live, you can order one of these; and/or ask her to help design one to suit your business or taste. So give it a visit: ArtWraps.com.au

They're pretty easy to apply, I used a ruler, some scissors, credit card, and a screen-cloth (which you can see in the photo)

I think you'll agree the final product looks a lot better than advertising for the company who built your chosen laptop. And for those consultants out there, what better way to promote your brand. I'm getting comments everywhere asking about it (and yes, sis, I'm letting them know about you ;-)

Maybe if you're a complete Oracle/Java fanboi, you could borrow a design from here ;-)
As a little extra plug, she has another website promoting her graphic design business, she's been doing all sorts of design activities and sign-writing for years - www.grovewesley.com

Anyway, I hope you all enjoy whatever it is you choose to do this time of year, and make sure you have a relaxing time doing it. Being around 35C here in the southern hemisphere, I won't be far from the beach or a pool.

Happy holidays!

Wednesday 22 December 2010

Modifying Apex Tab behaviour

Today I was having a minor battle with tabs in Oracle Apex (3.2).

Sometimes you don't necessarily want it to submit the page when you click on a tab, so I was having a think about options to override the functionality.

I found an interesting discussion here on OTN, but I came up with something else involving On Demand processes. I'm still deciding whether it's an overkill for my situation, but I thought I'd post it as it may help someone else one day.

The solution involved :
  1. Current tab page template
  2. Script on page zero
  3. On-demand page process
My original "Current Tab" in my page template looked like this:
<td class="t9tabCurrent">
<a href="#TAB_LINK#" class="t9tabCurrent">#TAB_LABEL#</a>
#TAB_INLINE_EDIT#
</td>
I modified it to:
<td class="t9tabCurrent">
<a href=javascript:tabNav("#TAB_LINK#") class="t9tabCurrent">#TAB_LABEL#</a>
#TAB_INLINE_EDIT#
</td>

This calls a script I defined on page zero, passing through the original #TAB_LINK# code.
<script language="JavaScript">
<!--
function tabNav(p_orig)
{
  var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=tab_target',$v('pFlowStepId'));
    get.addParam('x01',p_orig);
    vReturn = get.get();
    window.location = vReturn;
}
-->
</script>
The script will catch any click on the tab set. It takes the #TAB_LINK# substitution value and sends it to the on-demand process for processing. Then it re-directs the page to the resulting vReturn value.

My on demand process just encapsulates the code, so it's a call to a package I have defined. The g_x01 variable is the value I added in the AJAX call :
htp.p(my_pkg.tab_target(apex_application.g_x01));
This function definition simply replicates existing behaviour, but without the page submit.

FUNCTION tab_target
  (p_source  VARCHAR2)
  RETURN VARCHAR2 IS
-- Replicate tab functionality, but not as a submit
  lc_target  VARCHAR2(200);
  lc_delim   VARCHAR2(1) := q'[']';
  ln_session NUMBER := nv('SESSION');
  ln_app_id  NUMBER := nv('APP_ID');
  lc_debug   VARCHAR2(5) := v('DEBUG');
BEGIN
  SELECT 'f?p='||ln_app_id||':'||tab_page||':'||ln_session_id||'::'||lc_debug||':' -- essentially existing behaviour
  INTO  lc_target
  FROM  apex_application_tabs
  WHERE application_id = ln_app_id
  AND   tab_name = SUBSTR(p_source -- obtains T_HOME from -- javascript:doSubmit('T_HOME')
                         ,INSTR(p_source,lc_delim)+1
                         ,INSTR(p_source,lc_delim,1,2)-1-INSTR(p_source,lc_delim));

  RETURN lc_target;
END tab_target;
You could extend this to do whatever you like, depending on which tab has been pressed. I know in the past I've considered wanting to pass parameters on tab press...

Hopefully all the code is displayed ok, I'm having trouble finding an easy way to paste html examples into blogspot. I'm happy for any suggestions on that matter...

So, is anyone still working or reading blogs right now, or am I one of few? ;-)

Thursday 2 December 2010

The bar has been raised

One day, I'd like to see something like this at an Oracle event.



Sure, it might be a little difficult if it's live, but I'm sure the technology will get there. Perhaps we'll see more of this type of thing once our broadband network gets up to scratch.

On a side note, look out for circles that do wild things - Japan in the 40s (medium red dot), China in the 50s (big red dot), Rwanda in the 90s (little blue dot), Middle East in the late 90s (green dots)... sense a trend?

Apparently Hans Rosling has some good TED talks, I might have to look those up.

Spotted at Pharyngula