Oracle APEX: User friendly exceptions and logging

One of the bug-bears of Oracle Apex has been intercepting unplanned exceptions and displaying a user-friendly message.


I've decided to tackle the issue using a little AJAX to capture the error and retrieve a "nice" user-friendly message.

It also gives me the opportunity to log the error, as well as relevant session information.

Check out Friendly Exception Messages with source code.

The code uses Apex built-in javascript, so can be used on any application (no need for ExtJS).

Another Oracle Apex ExtJS demo site

Tobias Arnhold has just released a Apex-ExtJS demo site APEX at Work as well as his blog.

It's well worth a look as Tobias is using a different ExtJS theme and is using more of the standard Apex builtins.

I look forward to seeing what he comes up with in the future.

Hopefully this may encourage a few others to demo their Apex-ExtJS solutions - I've seen screenshots from a number of other sites using ExtJS with Apex with really nice functionality.

ExtJS customized Viewport for Oracle APEX

One of the issues you may experience with ExtJS, is that it moves html DOM elements around when it renders the page. For example if your using tab panels or the Viewport.

This can result in your form elements ending up outside of the form.
You can solve this by using allowDomMove:false as discussed in this Apex Forum thread or solve the problem once and for all by using a customized version of the Ext.Viewport.

I like the second option better, so here is the solution.

1. Replace references to Ext.Viewport with Ext.ux.FormViewport (see below) in your javascript.
2. Add the following style to your css #wwvFlowForm {width:100%; height:100%;}

See also Building a complete Oracle Apex page template using ExtJS

Enjoy

Mark

/*
* Mark Lancaster Wednesday, 16 January 2008 12:00 PM
*

/**
* @class Ext.ux.FormViewport
* @extends Ext.Container
* A specialized container representing the viewable application area (the browser viewport).
* 
 The Viewport renders itself to the wwvFlowForm element, and automatically sizes itself to the size of
* the browser viewport and manages window resizing. There may only be one Viewport created
* in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s
* added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
* method of any of its child Panels may themselves have a layout.
* 
The Viewport does not provide scrolling, so child Panels within the Viewport should provide
* for scrolling if needed using the {@link #autoScroll} config.
* By default, when applyTo is not specified, the Viewport renders itself to the document body.
*/
Ext.ux.FormViewport = Ext.extend(Ext.Container, {
/**
* @cfg {Mixed} applyTo
* The id of the node, a DOM node or an existing Element that is already present in
* the document that specifies some panel-specific structural markup.By default, when applyTo is not
* specified, the Viewport renders itself to the document body.
*/
initComponent : function() {
   Ext.ux.FormViewport.superclass.initComponent.call(this);
   document.getElementsByTagName('html')[0].className += ' x-viewport';

   // applyTo specified element
   this.el = Ext.get('wwvFlowForm');
   if (!this.el) {
       this.el = Ext.getBody();
   } else {
       // disable scroll on body
       Ext.getBody().dom.scroll = 'no';
   }

   this.el.setHeight = Ext.emptyFn;
   this.el.setWidth = Ext.emptyFn;
   this.el.setSize = Ext.emptyFn;
   this.el.dom.scroll = 'no';
   this.allowDomMove = false;
   this.autoWidth = true;
   this.autoHeight = true;
   Ext.EventManager.onWindowResize(this.fireResize, this);
   this.renderTo = this.el;
},

fireResize : function(w, h){
   this.fireEvent('resize', this, w, h, w, h);
}
});
Ext.reg('FormViewport', Ext.ux.FormViewport);

Book Review: Learning Ext JS

I recently took the opportunity when approaced by Packt Publishing to review "Learning Ext JS" by Shea Frederick, Colin Ramsay, and Steve Blades.
The book is produced as an "eBook", delivered in a PDF format with the book examples available in a zip file.

For readers not familiar with Ext JS, it is a cross-browser JavaScript library for building rich internet applications.
It features highly attractive customizable UI widgets supported by a well designed, documented and extensible Component model.

The book is written with the experienced developer in mind. It's all about getting productive as quickly as possible.
We've all been there, thrown into an unfamiliar technology and expected to perform miracles overnight.
In these situations you can find yourself floundering, looking for some starting guidence while you try to find your feet.

The book is focused very specifically on Ext JS, so if you've never dealt with HTML or javascript before, I'd suggest a second reference to cover that as well.
Having said that, if your just working with Ext JS for your presentation interface, the book is complete enough to get you up and running.

After an obligitory introduction chapter, and some foundation concepts, your quickly working with Ext widgets.
Very soon your creating Ext JS forms, applying textfields, datefields, combos, toolbars and validations.
The very popular Grid an Tree components are also well covered, with Layouts appearing surprising late in the book.

I enjoyed the flow of the book, which is written in an easy reading light hearted style.
The examples clearly explained the concepts, and raised a few chuckles at the same time.

Examples that included server-side code assume a PHP backend, a fairly typical implementation for Ext JS.
I work with Oracle Application Express and PL/SQL, never the less the examples were easy to follow if you focused on the format of the server output rather than the implementation language.

Overall, if your starting out with Ext JS, or struggling understanding the Ext JS examples and scattered forum posts, this book is a good reference.

Chapter 7: Layouts is available as a sample chapter.

APEX Global AJAX variables - gotta love them

I've just added a fully AJAX enabled editable tree on my demo site.

All modifications to the tree are transmitted to the database via an application process using AJAX.
Values are submitted using wwv_flow package variables:
g_widget_name
g_widget_mod
g_widget_action
g_widget_action_mod
g_widget_num_return
g_x01 .. g_x10

The application process simply calls a database package, which references the wwv_flow package variables and updates the data.

The key to AJAX functionality in Oracle Apex is based around these "Global input variables for AJAX utilities".

Using these variables, a little javascript to call a simple application process and then we handover to PL/SQL - back in every Oracle developers comfort zone.




This example has a fair bit going on, to see a simpler example check out:

• My demo using extJS
  
• Tyler Muths demo which uses jQuery
• Carl Backstroms demo using native Apex javascript.

Oracle Apex templates - not just for HTML

Have you ever considered using templates for generating something else besides HTML?

You can use Apex templates to generate all sorts of things - XML, javascript and JSON to name a few.

The tree panel shown gets all its data from a list template.

See it in action, and the template details on my demo.

ExtJS Grid in Apex (with pagination)

Check out the ExtJS Grid with Pagination on my demo site

So how does it work?

This is brief, because it's after midnight.

• Use a Named Column (row template) for the Report to build the grid array data - see page source code for output.
  
• The query needs to return the data in a JSON escaped format, so use a "SQL Query (PL/SQL  function returning a SQL query)" with generic column names
  The function call looks like:

begin
return json_api.grid_query
  (p_region_id => 4367612871540792
  ,p_query =>'select * from geo_domains'
  );
end;

• The query returned limits the rows and JSON escapes the data, much the same way as Apex does internally (hint: dbms_sql). Also - I set pagination to none, as its handled by my code.
  
• Pressing next data set on the displayed page fires off a AJAX request (application process) which passes the region_id as well as start, limit and callback function values.
  
• This executes a database package to re-run the query and return a paginated rowset.
  You can see the returned data format using Firebug.
• The grid updates the data using builtin ExtJS functionality.
  

Next example will be an updatable grid - also near completion.

Nighty night - Mark