Wednesday, November 11, 2009

Setup BI dashboard in APEX

I have been looking around for some good Business Intelligence Dashboard templates to be used together with APEX. What our customer wanted was a dashboard which was easy to navigate and functional to use.

We wanted to put in some web 2.0 functionality such as drag and drop for placing portles in the position the user wanted and and lots more Jquery stuff such as tabs, modal popup windows, nice help window, date picker, resize of menu navigator, hide/show portlets. The layout is automaticly saved in the database.

The web 2.0 features is made by using Jquery to get a slick and fast refresh of the page.

What we ended up with was a APEX theme which you can have a look at

Thanks to Stephen Blair at apex-themes which made a very good job putting this together.

Together with Oracle Warehousebuilder, BI Publisher, APEX Interactive reporting, and Anycharting it should be possible to make functional and good solutions without high starting cost.



Mark Lancaster said...

Hi Jon

Very nice demo, and welcome to the Oracle Apex blogging community.

I especially like the back-end integration with your drag-and-drop regions.

Looking forward to more posts from you in the future.


Roel said...

Cool demo guys. Looks really neat!
And I even noticed a link to one of my demo's in your Technical Samples Index...
Keep up the good work,

Louis-Guillaume Carrier-Bédard said...

Nice demo!
Keep up the good work.

Martin Giffy D'Souza said...

Hi Jon,

Very nice demo! What did you use for the show/hide menu?


Jon Trøstheim said...

The accordion menu is made by Jquery UI,show/hide is setup by using CSS setup together with

jquery.layout.min.js and CSS
setup fore example CSS
.ui-layout-resizer {background:#dee5e3;}
.ui-layout-resizer:hover {background:#d5f0e5;}

Jon Trøstheim said...

More example CSS for menu

.ui-layout-toggler-north-open {background:url('north-toggler-hide.png') left top no-repeat;}
.ui-layout-toggler-north-open:hover {background:url('north-toggler-hide.png') left bottom no-repeat;}
.ui-layout-toggler-north-closed {background:url('north-toggler-show.png') left top no-repeat;}
.ui-layout-toggler-north-closed:hover {background:url('north-toggler-show.png') left bottom no-repeat;}

webghost said...

the link is not working

HTTP 404 - File not found