Tutorial 10: How to build a tree (Part III)

This tutorial is a continuation of the “How to build a tree (Part I)” tutorial. You need to follow and complete first tutorial in order to complete this tutorial. So, if you haven’t completed it, please give it a try.

In “How to build a tree (Part II)” tutorial, we evolved the Datasource Definition query and add an event to tree component with using single datasource method. In this one, we are also going to create second Datasource Definition, and add an event to the tree component. The most important difference in this method is that, we are going to use a special parameter on API call to make it populate our tree nodes from new datasource.

Using Separate Datasources

We need to provide different nodes to construct the tree component. In Single Datasource method we used only one datasource and we distinguished the results by using bind variable. Now we will create another Datasource Definiton (DSD) to provide new nodes.

Create a new Datasource Definition named “departmentsDSD” with following sql query. If you don’t know or remember how to create a Datasource Definition, please have a look at “How to build a tree (Part I)”.

select DEPARTMENT_ID as id, DEPARTMENT_NAME as name
from DEPARTMENTS
order by name

Adding An Event

First we need to create a new Action which will later be executed in the tree1 “expanded” event. Connect to Datasource Schema (If you are using Formspider Online please get your Datasource schema name under Tools>User Settings menu, otherwise we already set it as “HR” while creating the application) with your favorite PL/SQL editor (for instance SQL Developer, TOAD, or SQL Navigator) and create a new procedure as “expandNode_separate”. And Copy the following code to procedure.

PROCEDURE EXPANDNODE_SEPARATE IS
  v_treeName_tx varchar2(255) := 'mainPanel.tree1';
  v_nodekey_tx varchar2(255);
BEGIN
  -- get expanded nodekey
  v_nodekey_tx := api_tree.getexpandednodekey(v_treeName_tx);

  if v_nodekey_tx = 'DEPARTMENTS' then
    -- by using departmentsDSD1 Datasource Definition, populate children of the node.
    api_treenode.populatechildren(v_treeName_tx, v_nodekey_tx, 'departmentsDSD1');
  end if;

END;

Now, return to the Formspider IDE, expand “Actions” navigation tree and click the “Actions ” node and then click the “+” button above the navigation tree or right click the node and click the “New” from the popup menu. Enter “expandNode_separate” as the name of the action and enter “expandNode_separate” as the procedure name. And then click the OK button at New Action dialog to create the Action. Now we need to add “expanded” event to tree, open panel XML again and add the event. Here is the last state of the panel XML.

<panel>
  <tableLayout>
    <row>
      <cell hAlign="Full" vAlign="Full">
        <tree name="tree1" dataSource="treeDSD1" displayColumn="NAME" nodeKeyColumn="ID">
          <events>
            <expanded action="expandNode_separate"/>
          </events>
        </tree>
      </cell>
    </row>
  </tableLayout>
</panel>

We are ready to run the application. Click the Run button or press F7 key. Here is the preview of the application.

Preview of the application