Archive

Archive for the ‘Javascript’ Category

Controlling Hide/Show Apex Regions Using Javascript

April 19, 2013 2 comments

Hide/Show regions are very useful in that they allow users to hide certain on-screen content when it’s not relevant for them (and show it again just as easily) simply by clicking the small arrow icon in the top left of the region.

Image

 

But how can you programmatically do the equivalent of clicking the arrow icons? Perhaps, for example, when a user clicks a particular button on your page, you want all Show/Hide regions to be expanded. How can you do this?

One answer is the snippet of code below. In this code, “MY_REGION” is the static ID of the region for which we wish to programatically click the show/hide arrow icon.

// How to programatically click a Hide/Show region hide/show button
$('#MY_REGION .uRegionControl').click();

We can use the snippet below to work out the current status of a Hide/Show region i.e. whether it is currently expanded or collapsed. The below snippet will return a value or “none” if the region is collapsed.

// How to find out whether a hide/show region is currently shown or not
$('#MY_REGION div.uRegionHeading').next().css('display');

We can build on the above to create a function which expands, collapses or toggles the state of a Hide/Show Region.


// ********************************************************
// ** Function setStateOfHideShowRegion(pRegionStaticId,pDoWhat)(type,id)  
// ** Collapses, Expands of toggles any Hide Show region which has a static id
// ** defined by the string pRegionStaticId.
// ** Returns either "collapsed" or "expanded" to indicate the status of the
// ** region once this function has run.
// ** pDoWhat: either "expand", "collapse" or "toggle"
// ********************************************************
function setStateOfHideShowRegion(pRegionStaticId,pDoWhat) {
    
    var returnState;
    var currentState = 'expanded';
    doWhat = pDoWhat.toLowerCase();
    
    if ($('#'+pRegionStaticId+' div.uRegionHeading').next().css('display') == 'none') {
        
        currentState = 'collapsed';
        
    };
    
    if (doWhat == 'toggle') {
        
        $('#'+pRegionStaticId+' .uRegionControl').click();
        returnState = (currentState=='expanded'?'collapsed':'expanded');
        
    }
    else if (doWhat == 'expand') {
        
        if (currentState !== 'expanded') {
            $('#'+pRegionStaticId+' .uRegionControl').click();
        };
        returnState = 'expanded';
        
    }
    else if (doWhat == 'collapse') {
        
        if (currentState !== 'collapsed') {
            $('#'+pRegionStaticId+' .uRegionControl').click();
        };
        returnState = 'collapsed';
        
    };
    
    return returnState;
    
}
Advertisements
Categories: ApEx, Javascript, jQuery

Implementing session timeout in your ApEx app – Part 2

April 3, 2008 14 comments

This entry builds on the session timeout functionality described in part 1. Be sure to check that out first. In this one I describe how to get your application to popup a warning window just before a user’s session is about to timeout due to inactivity (and give them the option to remain logged in).

STEP 1 – Configure Page Zero

If you do not already have one, create a Page 0 in your application.

Add an HTML region to page 0, calling it “Session Timeout JS”.

Be sure to set its “Template” to “No Template”.

Set its conditions to be “Current Page is NOT in Expression 1” and set “Expression 1” to be the id of your user-friendly “Your session has timed out” page (Please see the previous blog entry in this series for details about this page):

Paste all of the text found in the file here into this region’s source.

When you have pasted the code, you will notice that one of the lines reads:

$x(‘pFlowId’).value+’&p_next_flow_page_sess=’+$x(‘pFlowId’).value+’:3′;

You should change the value of 3 in this line to be whatever the number of your user-friendly “Your session has timed out” page is. (Please see the previous post in this series for details about this page.)

STEP 2 – Setup the Application Process

Select Shared Components > Logic > Application Processes

And click create. Give your Application Process a name of “SET_LAST_ACTIVITY_DATE”. You must not give it a different name as this is referenced from within the javascript you pasted into the region on page zero in the previous step. Set its “Point” to “On Demand: Run this application when requested by a page process”.

Specify the “Process Text” as:

BEGIN

   APP_USERS.set_last_activity_date;

   htp.prn(‘1’);

EXCEPTION

   WHEN OTHERS THEN

      htp.p(‘0’);

END;

Step 3 – Finished. Have another cup of tea.

That’s it. Done.

If you want to test it to make sure it works (but don’t want to have to wait 18 minutes!) you could temporarily alter the timeout values in the javascript on page zero (notice below I have changed them to 1000*20 [i.e. 20 seconds] and 1000*40 [i.e. 40 seconds]).

Now log in to the application and wait.

After 20 seconds you will see a warning:

If you do nothing, after a further 20 seconds the popup will close and you will be logged out of the application.

If you click the link, the popup will close and you will remain logged in.

Categories: Ajax, ApEx, Javascript

ApEx: Client-side date auto-formatting

September 16, 2007 8 comments

Firstly, all credit to a chap called Matt Kruse who created the superb Javascript functions referenced in this blog entry. His site can be found here.

THE EFFECT

To see the effect, go here and type some dates into the datepicker field (type as opposed to select from the date picker itself). You can type them in pretty much any format you like (e.g. mm/dd/yyyy, mm/dd/yy, mm-dd-yyyy, mm-mon-yy). Then click out of the field (or cause it to lose focus via some other means). You will notice that the date is automatically reformatted to be of the form dd-mon-yyyy. If you enter a date in a format that is not recognised, an alert appears telling you so.

NOTE: The example deals with dates in the US format. See the note later in this entry for details on dealing with other formats.

STEP 1

You will need to get yourself a copy of Matt Kruse’s very useful date functions. These are available from this page of his website.

You will need to include these functions in your ApEx application via some means or other so that they can be called from any page, e.g.

* Paste them into a region on page zero.
OR
* Upload them as a .js file and reference the file in your page headers (or include reference to the .js file in your page template).

STEP 2

Create an Application Item called APP_FORMAT_DATE_HTML

STEP 3

Create an Application Computation of type “On New Instance” for the application item APP_FORMAT_DATE_HTML, setting its value to the text below:

onBlur="var d=parseDate(this.value);if(d==null&&this.value!=''){alert('This is not a valid date.');} else if(this.value=='') {} else {this.value=formatDate(d,'dd-NNN-yyyy').toUpperCase();}"

STEP 4

For every item in your application (normally Date Picker items but will work with plain text items) that you want to Auto Format, enter the following into the HTML Form Element Attributes:

&APP_FORMAT_DATE_HTML.

And that’s it.

EXTENSIONS

* You might want to have the date be autoformatted to some other format than dd-mon-yyyy. This can be achieved by changing the line in the APP_FORMAT_DATE_HTML computation which reads:

this.value=formatDate(d,’dd-NNN-yyyy’);

to something else such as:

this.value=formatDate(d,’MMM d, y’);

For a complete list of the valid date formats you can use, please look at Matt Kruse’s source comments here.

* To have the script check for British format dates before US format dates (i.e. dd/mm/yyyy as opposed to mm/dd/yyyy) simply amend the line in the APP_FORMAT_DATE_HTML computation which reads:

parseDate(this.value);

to

parseDate(this.value,'EURO');

Categories: ApEx, Javascript

ApEx: Built-in javascript functions documentation

August 17, 2007 3 comments

Apex Javascript documentation

I came across a very handy web-site the other day. It lists all of the built-in Javascript functions in ApEx complete with a description and example. These are the functions which are held in the htmldb_html_elements.js file and are available to use on every ApEx page. The URL is: http://apex.oracle.com/pls/otn/f?p=38704

Categories: ApEx, Javascript

Automatically converting text to uppercase

June 12, 2007 4 comments

ABCSometimes you want to force users to enter text into one of your ApEx page items in upper case. You can achieve this quite easily by adding the following bit of code to the HTML Form Element Attributes of your item:

onChange="this.value=this.value.toUpperCase();"

Or, if you want to force the text to lower case:

onChange="this.value=this.value.toLowerCase();"

Categories: ApEx, Javascript