I’ve never really used the built in APEX trees, but I had a need to display some hierarchical data and wanted some added functionality over what the built in apex trees provide. I went out looking for interesting JQuery plugins. The one I settled upon was JSTree . I like that it has a customizable context menu among other things. Well this is just an example and can be made more generic…I’ve hard-coded a couple of things for the purposes of this demo but this should get you started. Here’s the demo: http://tryapexnow.com/apex/f?p=9155:2

For this example I am organizing different types of samples in a case. Here are the tables.

SQL> desc sample_types;
  ID                                        NOT NULL NUMBER(38)
 DESCRIPTION                                        VARCHAR2(50)
 ...
 TREE_IMAGE                                         VARCHAR2(250)

SQL> desc samples;

ID                                        NOT NULL NUMBER(38)
CASE_ID                                   NOT NULL NUMBER(38)
SAMPLE_TYPE_ID                            NOT NULL NUMBER(38)
...
PARENT_ID                                          NUMBER(38)

SQL> SELECT s.id, s.parent_id, level
      FROM samples s
      WHERE case_id = :CASE_ID
      START WITH parent_id = 0
      CONNECT BY PRIOR s.id = s.parent_id;

        ID  PARENT_ID      LEVEL
---------- ---------- ----------
      1067          0          1
      1068       1067          2
      1076       1068          3
      1071       1067          2
      1077       1071          3
      1078       1077          4
      1073       1067          2
      1072          0          1

8 rows selected.

Note that I made all parent samples have a parent_id of zero.

The author of JSTree Ivan Bozhanov has done a great job with providing both documentation and examples of how to setup the tree component.

Among the choices of data source, I chose to implement the source as a JSON object, and I wrote a function to output my connect by query in the format that jsTree expects.

create or replace function get_samples_tree(p_case_id_in cases.id%TYPE) RETURN VARCHAR2 AS
      l_json         VARCHAR2(32767);
      l_loop_counter NUMBER(5);
   BEGIN
      l_json := '[';
      FOR i IN (SELECT rownum,
                       s.id,
                       s.parent_id,
                       LEVEL,
                       lead(LEVEL, 1, 0) over(ORDER BY rownum) lead,
                       st.tree_image,
                       st.id type_id
                  FROM samples s, sample_types st
                 WHERE case_id = p_case_id_in
                   AND s.sample_type_id = st.id
                 START WITH parent_id = 0
                CONNECT BY PRIOR s.id = s.parent_id)
      LOOP
         l_json := l_json || '{ "attributes": ';
         l_json := l_json || '{ "id" : ';
         l_json := l_json || '"stree_' || i.id || '"';
         l_json := l_json || ', "rel" : ';
         l_json := l_json || '"' || i.type_id || '"';
         l_json := l_json || '}, ';
         l_json := l_json || '"data":{ "title" : "';
         l_json := l_json || i.id || '", "icon" : "/i/' || i.tree_image ||
                   '", "attributes" : { "href" : "f?p=' || v('APP_ID') ||
                   ':3:' || v('APP_SESSION') ||
                   '::NO::P3_SAMPLE_ID:'|| i.id ||
                   '" }}';
         --  l_loop_counter := i.LEVEL - i.lead;

         IF i.lead > i.LEVEL
         THEN
            l_json := l_json || ', "children": [ ';
         ELSE
            l_json := l_json || '},';
         END IF;
         IF i.lead < i.LEVEL
         THEN
            l_loop_counter := i.LEVEL - i.lead;
            FOR j IN 1 .. l_loop_counter
            LOOP
               l_json := TRIM(trailing ',' FROM l_json);
               l_json := l_json || ' ] ';
               IF (i.lead <> 0 OR j <> l_loop_counter)
               THEN
                  l_json := l_json || '},';
               END IF;
            END LOOP;
         END IF;
      END LOOP;

      RETURN l_json;
   EXCEPTION
      WHEN OTHERS THEN
         RAISE;
   END get_samples_tree;

The on-demand process is straight-forward enough:

declare
l_tree varchar2(32767);
begin
l_tree := get_samples_tree(wwv_flow.g_x01);
htp.prn(l_tree);
end;

jsTree is quite flexible. In the javascript below, I’m using asynchronous json to get the data. In order to pass the values to the URL in the data.opts section, you use the callback “beforedata”

function populateSamplesTree(pCaseId, pRegionId) {

jQuery("#"+pRegionId).tree({
    data  : {
    type  : "json",
    async : true,
    opts  : {
       method: "POST" ,
url:"wwv_flow.show"
	    }
	 },
  callback : {
  onchange : function (NODE,TREE_OBJ) {
  document.location.href = $(NODE).children("a:eq(0)").attr("href"); },
  beforedata : function(NODE, TREE_OBJ) {
       return {
        p_flow_id:jQuery('#pFlowId').val(),
        p_flow_step_id:jQuery('#pFlowStepId').val(),
        p_instance:jQuery('#pInstance').val(),
        x01:$v(pCaseId),
        p_request:"APPLICATION_PROCESS=GET_SAMPLE_TREE" }
     }
  }
});
//jQuery.tree.reference( pRegionId).open_all();
}

Another way to accomplish the same thing would be to use a “standard” on demand call for APEX, and parse the result as a json object. In order to do that you need the json javascript library from http://www.json.org/

function populateSamplesTree2(pCaseId, pRegionId) {
var get = new htmldb_Get(null,$v('pFlowId'), 'APPLICATION_PROCESS=GET_SAMPLE_TREE', 0);
 get.addParam('x01', $v(pCaseId));
gReturn = get.get();
var jsonobj = JSON.parse(gReturn);
apex.jQuery("#"+pRegionId).tree({
  data  : {
    type  : "json",
    opts  : {
      static :   jsonobj }
  },
  callback : {
  onchange : function (NODE,TREE_OBJ) {
  document.location.href = $(NODE).children("a:eq(0)").attr("href");
                               }
                          }

});
}

I could store the context menu config in the database as well and generate the JSON for it, but as this is just for example, I’ve left that out.  You can easily do dynamic context menus. I’ve included the type in the tree and you can see I’ve hardcoded in Sample Type 1 in the menu option for “split”.

function populateSamplesTree3(pCaseId, pRegionId) {
var get = new htmldb_Get(null,$v('pFlowId'), 'APPLICATION_PROCESS=GET_SAMPLE_TREE', 0);
 get.addParam('x01', $v(pCaseId));
gReturn = get.get();
var jsonobj = JSON.parse(gReturn);
apex.jQuery("#"+pRegionId).tree({
  data : {
    type : "json",
    opts : {
        static : jsonobj
    }
},
callback : {
    onchange : function (NODE,
    TREE_OBJ) {
        document.location.href = $(NODE).children("a:eq(0)").attr("href");
    }
},
plugins : {
    contextmenu : {
        items : {
            create : false,
            rename : false,
            remove : false,
            split : {
                label : "Split",
                icon : "",
                visible : function (NODE,
                TREE_OBJ) {
                    if (TREE_OBJ.get_type(NODE) != "1") {
                        return -1
                    } ;
                },
                action : function (NODE,
                TREE_OBJ) {
                    // Just a demo of the arguments
alert('"' + NODE.children("a").text() + '" from "' + TREE_OBJ.container.attr("id") + '"');
                }
            },
            type_2 : {
                label : "Another Type",
                icon : "",
                visible : true,
                action : function (NODE,
                TREE_OBJ) {
                    // Just a demo of the arguments
alert('"' + NODE.children("a").text() + '" from "' + TREE_OBJ.container.attr("id") + '"');
                }
            }
        }
    }
}
});
}

Now I can just create the regions on the page with source of

<div id="samples_tree"></div>

<div id="samples_tree2"></div>

<div id="samples_tree3"><div>

Now go time:

<script type="text/javascript">
apex.jQuery(document).ready(function(){
   populateSamplesTree('P2_CASE_ID', 'samples_tree');
   populateSamplesTree2('P2_CASE_ID', 'samples_tree2');
populateSamplesTree3('P2_CASE_ID', 'samples_tree3');
});
</script>

I’ve left out icons, which are easy to add, and a host of other things. If I ever get some more time I’d like to make this more generic and reusable.

Check out a demo here:
http://tryapexnow.com/apex/f?p=9155:2

Pretty cool. I’m looking forward to see this develop and perhaps find ways to integrate with APEX.

Check out this small demo in action here if you don’t want to read the whole post.

The jQuery docs show that you can use ‘…’ – literal text in your format string.

This allows the opportunity to append a time component to the standard format mask.  The solution presented here requires the user to manually edit the time component, so in order to accommodate this, a database function is created to validate the date. This could be done of course just using JavaScript but I think using the database to do the validation is easier.

create or replace function is_date(p_date in varchar2, p_format_mask_in in varchar2)
return boolean
as
  l_date date;
  l_format_mask varchar2(50);
begin
  l_format_mask := 'fx'||p_format_mask_in;
  l_date :=  to_date(p_date, l_format_mask);
   return true;
exception when others then
  return false;
end;

An on-demand application process, VALIDATE_DATE  is created to call the validation function, along with a corresponding javascript function to call it. I kept the is_date function a separate db function instead of rolling the functionality into the app process in case I had need for it elsewhere.

declare
 l_return number(1);
 l_date varchar2(50);
begin
l_date := wwv_flow.g_x01;
 if (is_date(l_date, v('PICK_DATE_FORMAT_MASK')))
 then
  l_return := 1;
 else
  l_return := 0;
 end if;
htp.p(l_return);
end;

validateDate

function validateDate (pDate, pOraFormatMask) {
 var get = new htmldb_Get(null,$v('pFlowId'), 'APPLICATION_PROCESS=VALIDATE_DATE', 0);
 var lDate = $(pDate).val();
 get.addParam('x01', lDate);
 var gReturn = get.get();
 get = null;
 if (gReturn==0)
 {   alert('Invalid Date Format Entered.\n Dates should be in '+ pOraFormatMask +' format.'); }
}

We’ll need two application items and corresponding computations to hold the different format masks, PICK_DATE_FORMAT_MASK and JS_DATE_FORMAT_MASK.

The format mask I want to use for Oracle  is ‘YYYY-MM-DD HH24:MI’, the jQuery datepicker mask that matches that is ‘yy-mm-dd’, but no time component.

I then create a hidden item on page zero, P0_JS_SYSDATE, with a source value of:

to_char(sysdate, ‘&PICK_DATE_FORMAT_MASK.’);

This will allow me to grab the time component easily for the datepicker.

All that’s left now is to call the the function that creates the datepicker:

function dpWithTime(pOraFormatMask, pDpFormatMask, pSysdate) {
   var timeFormat = " " + pSysdate.split(" ")[1];
  $('fieldset[class=datepicker]').find('img').css('display','none');
    $('fieldset[class=datepicker]').find('input[type=text]').datepicker({
        dateFormat: pDpFormatMask + timeFormat,
        showOn: "button",
        buttonImage: "/i/asfdcldr.gif",
        buttonImageOnly: true
        }).change(function(event) {validateDate(this, pOraFormatMask)});
}

In the html header for the page, or the page template:

<script type="text/javascript">
$(document).ready(function(){
var oraFormatMask = "&PICK_DATE_FORMAT_MASK.";
var jsFormatMask = "&JS_DATE_FORMAT_MASK.";
var l_sysdate =  $('#P0_JS_SYSDATE').val();
dpWithTime(oraFormatMask, jsFormatMask, l_sysdate);
});
</script>

Again the example is here.

Let me know if you have any other ideas, like I said at the start, I’m not thrilled with this approach, but if the rest of your app is already using the jQuery datepicker, and you need one with a time component maybe this will work. Thanks to Tyler Muth for his earlier blog/sample app using jQuery datepicker and for the bit about using the fieldset selector which he blogged about here.

One thing it really underscores is that staying current is very important, and as “other stuff” comes up in life, I’m making it a personal goal to continue learning…

I wasn’t aware that you could use PL/SQL Associative arrays (index-by tables) via db link. Here’s a small example:

On the remote db:

SQL> create or replace package aa_test
    as
    type my_emp_type is table of emp%rowtype index by pls_integer;
    function get_emp(p_empno in number) return my_emp_type;
    end;
    /

Package created.
SQL> create or replace package body aa_test
    as
    function get_emp(p_empno in number) return my_emp_type
    as
    l_emp_rec my_emp_type;
    begin
     select * bulk collect into l_emp_rec from emp where empno = p_empno;
    return l_emp_rec;
    exception when no_data_found then
    null;
   end get_emp;
   end aa_test;
  /

Package body created.

And Locally:

SQL> declare
    l_local_emp_rec aa_test.my_emp_type@holoman;
    begin
    l_local_emp_rec := aa_test.get_emp@holoman(7654);
    dbms_output.put_line(l_local_emp_rec(1).ename);
    dbms_output.put_line(l_local_emp_rec(1).job);
    end;
    /
MARTIN
SALESMAN

PL/SQL procedure successfully completed.

Always nice to learn something new.

Vikas and  Denes also have examples. The one thing that always kind of bothered me about the example was that in order to save the user’s preference, you needed to click a button. This doesn’t seem so intuitive to me, so I decided to revamp the example a bit and save the preference based on a cookie.

You can see this in action here:

http://apex.oracle.com/pls/otn/f?p=18507:5

I rewrote the code with jQuery and strayed a bit from the original implementation, but I think it works ok

http://vimeo.com/4039511