0

Ext.tree.TreePanel – Server Side Search **NEW**

One of the great things about the APEX plugin – Ext.tree.TreePanel – is that you can either load the tree in one AJAX call on page load or in multiple calls when each node is expanded the direct children are returned. In addition to the expand of each node via AJAX, you can also control the number of levels to fetch, whether its 1 (the direct children), 2, 3, 4 or more you have the flexibility to choose. The other great feature is the ability to search the tree and still retain the parent level hierarchy for child nodes which match the search criteria e.g.

However when using both these features in combination, there was a performance problem in the initial plugin release. This was due to the search being performed on the client side. The entire tree would be expanded in order to locate the search results. In cases of large tree’s this could cause significant number of AJAX processes to be fired and place an overhead on the database. In order to combat this problem I have introduced a new server side search feature which will perform the search on the database and return the results in a single AJAX call. The results mimic the client side search by returning the parent level hierarchy for child nodes which match the search criteria.

This serverside search results in optimal performance and means that large tree structures of 10000+ records are now easily searchable without having to load the entire tree structure on the client, which most other Ext implementations are prone to. This new feature is automatically enabled when expanding each node via AJAX is enabled.

Now here’s the really good news… Until the end of May I’m offering a “FREE plugin license” for the Ext tree or Multifile upload plugin when 2+ development services/support are purchased. These 2+ days can be used from anything from training/mentoring on APEX/PLSQL/Javascript/CSS, design advice, troubleshooting, environment setup, security reviews, plugin development, prototype builds, theme design, etc.

The great news is that the days do not have to be used in full, you can decide to schedule it in sessions as little as 30 mins depending upon your requirement. But remember this offer is limited and only until the end of May, so don’t delay.

20

APEX Plugin – Ext.tree.TreePanel (RC1 Release)

I’m very proud to announce the first public release of a new commercial APEX plugin based on the tree widget from the Ext JS library developed by Sencha. It’s jam-packed full of functionality and customisation ability. It’s simple to use with predefined defaults “Out of the Box”, but also allows you to use every config parameter, method, and event documented in the Ext JS API.

APEX Plugin - Ext.tree.TreePanel

APEX Plugin - Ext.tree.TreePanel

Here’s a list of the plugin’s features:

  • AJAX enabled with the choice of loading the entire tree in one call or on node by node or X many levels expanding ability
  • Search: Dynamic filtering of the tree contents
  • Customisable Expand & Collapse & Refresh buttons
  • Tree drill down capability
  • Drag & Drop Reordering Support
  • Tree Label Editing
  • Checkbox Nodes with state saving using an existing APEX item
  • Context Menu with complex object Support (from a single SQL Query)
  • Cookie based state saving for expanded nodes.
  • Order by “Display Sequence” support
  • Fully integrated into dynamic actions. Bind click, drag & drop, edit complete, expand, collapse, context menu selection etc. events
  • In it’s basic form opens URL targets
  • Tree config is fully customizable with application level defaults
  • Support for node by node custom config, e.g. enableDrag = false
  • Full support for replacing substitution strings in both config & data
  • Custom icon support
  • Help Text/Quick Tip support
  • Supports unlimited tree’s on a single page
  • Theme changing support

and here’s where you can find the documentation, demo’s, and download.

I’m hoping to get some feedback and enhancement requests over the next few weeks before releasing the final production version towards the end of May. One point to note: it does require the purchase of a plugin license and that you also hold/purchase a license from Sencha to use the Ext JS library; but before this changes your mind you may want to consider the following:

  • It’s simple to use. All you need to define is a simple flat SQL query, no CONNECT BY needed.
  • It will save you time every single time. You can create an AJAX enabled tree with context menu support in a couple of minutes. It’s arguably the fastest way to create a complex Ext JS tree end to end, thanks to the RAD architecture of APEX.
  • With AJAX node by node expanding capability you can create a tree based on large datasets, it’s been tested on 20,000+ record hierarchical tree’s.
  • It provides feature rich options not available in the standard APEX jsTree. Such as checkboxes, label editing, drag & drop reordering, AJAX fetching by X many levels, searching, the list goes on… all within the one plugin.
  • It’s integrated into Dynamic Actions, which means it’s easy to bind events and actions within the actual APEX framework/IDE. Refreshing standard APEX reports via AJAX on different tree events is simple.
  • It’s fully supported, will stay actively developed, and you can file enhancement requests.
  • Once you choose Ext JS you’re opening up endless of possibilities for developing feature rich applications, whilst safely knowing you can still use standard APEX components and jQuery. It’s the best of both worlds!
  • Ext JS provides cross browser support, it’s built on Web Standards, which translates into reduced maintenance & troubleshooting.
  • This is the first of many plugins in the pipeline. The license revenue will fund future plugin development, so your support is essential. I’m passionate about bringing as much Ext functionality to APEX as possible in a future proof, maintainable approach so “we all” can build amazing web applications, amazingly fast.

Test it out, I’m positive you won’t be disappointed….. and if you are let me know, I want your feedback :) good or bad.

10

APEX Plugin – Ext JS Tree (Coming very soon)

This is a sneak peek at a new Ext JS tree plugin which I’ve developed. I’m in the final stages of packaging it and producing the demo’s and documentation so it will be available for download on apex-plugin.com very soon.

So what features does the plugin offer?

  • AJAX enabled with the choice of loading the entire tree in one call or on node by node expanding
  • Search: Dynamic filtering of the tree contents
  • Expand & Collapse buttons
  • Drag & Drop Reordering Support
  • Tree Label Editing
  • Checkbox Nodes with state saving using an existing APEX item
  • Context Menu Support (from SQL Query)
  • Cookie based state saving for expanded nodes.
  • Order by “Display Sequence” support
  • Fully integrated into dynamic actions. Bind click, drag & drop, edit complete, expand, collapse, context menu selection etc. events
  • In it’s basic form opens URL targets
  • Tree config is fully customizable
  • Support for node by node custom config, e.g. enableDrag = false
  • Full support for replacing substitution strings (label, help text, url, etc)
  • Custom icon support
  • Help text support
  • Supports unlimited tree’s on a single page

The plugin takes the following list of 10 parameters:

With the event support you can create dynamic actions to process tree events. This means that it’s simple to refresh reports, perform AJAX callbacks to process the reordering of nodes, or label edits, or filtering of reports based on check box selections.

The hidden gem is the context menu. The context menu can be generated just like the tree in an object hierarchy from a single SQL statement. This means that you can have multi navigational capabilities, or filtering. Here’s one example of using a date picker within the context menu….

and if you’re using 11g and you need a complex context menu with datepicker, radio items, combo support, you can define your context menu query based on a table/view which has a parameter and value column like this…

SELECT id           menu_id
,      pid          menu_pid
,      display_seq  display_seq
,      LISTAGG('<'||parameter||'>'||parameter_value||'</'||parameter||'>', ' ')
         WITHIN GROUP (ORDER BY parameter) xmlconfig
FROM   af#tree_context_menu
GROUP BY
       id
,      pid
,      display_seq

Your parameter values can be (sub)JSON objects I’ll take care of turning the entire resultset into a JSON object hieararchy with the aid of “dbms_xmlgen.newcontextfromhierarchy” and XSLT.

P.S. This is just the first Ext plugin in the series, with more coming soon.

Pages ... 1 2 3 4 5