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

The tree tutorial has several parts, this first part will create the tree component itself and its model objects with a simple SQL query. And later in the following parts we will add an event to the tree component and evolve the query to supply more nodes to the tree. At the end of these series of tutorials, we will be able to display all departments and add new ones with some of the Formspider components. Now, lets start.

Open Formspider IDE and click “New Application” under the “File” menu.  A New Application dialog will show up. Enter “TreeApp” as the name of the application and ”HR” as its Datasource Schema name. If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database. And your preconfigured database schema contains HR tables. You can see your online database connection parameters under the “Tools>User Settings” in the menu. Leave other fields empty and click OK. This creates the “TreeApp” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

As the first step , open “Containers” navigation tree and expand “Panels” node. Double click “mainPanel” to open its design XML. Replace the text “<panel/>” in the Editor with the following XML.

      <cell hAlign="Full" vAlign="Full">
        <tree name="tree1"></tree>

This XML places a simple tree component, named “tree1”, to the “mainPanel“.

PS: If you run the application at this moment you will see an empty window, because there is no root node in the tree component.

The Model

Create a new Datasource Definition (DSD) that will be used to supply nodes to the tree. Expand the Datasource Definition accordion and click the Datasource Definitions node. Click the “+” button above the navigation tree or right click the node and click the New from popup menu.

Open new Datasource Definition Dialog

The new Datasource Definition dialog will show up. Enter “treeDSD” as its name and select “Query” from “Based On” section to create the query based DSD.

Create a new Datasource Definition

The Query

Then click the “Query” node from the DSD navigation tree. Copy/paste the following query to the query text area. There are two columns in query, named as “id” and “name”.

select 'DEPARTMENTS' as id, 'Departments' as name
from dual

Here is the description of the ID and NAME columns:

Table Column Tree Attribute Description
ID nodeKeyColumn ID of each node. This value must be unique for each node in the tree properly.
NAME displayColumn Display value of the node.

Click the OK button and to create the Datasource Definition. Note that Formspider created the “treeDSD” as well as the datasource “treeDSD1”.

The Binding

Now, bind the “tree1” component to the columns of “treeDSD1” datasource. Add missing attributes to tree component or replace the current tree tag with the following one in “mainPanel” XML.

<tree name="tree1" dataSource="treeDSD1" displayColumn="NAME" nodeKeyColumn="ID" ></tree>

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

  • Hina Tazeen


    I m new to FormSpider Web App and interested to work on this field. As per the instructions i went thru to create a new account and its being created and now when i started to create an application for an ex: TreeApp, the schema is added by default, wen i say ok, “Specified Datasource Schema does not exist in the Database.” gives me a msg. What should i do to create a new app with the schema which is created for my online account?

    • Serdar Gokcen

      Hi Hina,

      We’re truly sorry for the problem we may have caused. We have fixed your problem. Your Formspider Online account is now ready to use.

      Best Regards
      Serdar Gokcen
      Formspider Team

      • Hina Tazeen

        Thank you..
        Could you please navigate me how to start to learn the framework and the whole concept from scratch..


        • http://www.gerger.co Yalim K. Gerger

          Hi Hina,

          We wrote a blog post called Getting Started with Formspider which points to the most important resources on the web site. Here is the link to the post: http://theformspider.com/blog/tag/getting-started/