When something you want isn’t standard available in Design Studio and you need to build it in a SDK extension it is always best to look on the internet for help. Javascript libaries are often shared as freeware and deliver a lot of help, where you would otherwise need weeks to do it yourself.

For a customer there is an ongoing discussion about new elements in an application. Users need to be able to navigate in a hierarchical way through KPI’s and have to be able to select and deselect KPI’s

One of my roles is to investigate the technical feasability of the design that was drawn.

To be able to do the navigation described above the thought was to use a tree menu. that is an element that is currently not available in Design Studio.

But the internet can help. Looking for javascript libraries can spare you a lot of time and make options feasable that otherwise would be too expensive to warrant.

The Tree menu had to look like this :

treemenu example.png

As you can see you can open and colapse the folders and

there are items you can enable or disable.

Such a menu needs to be dynamic.

You need to be able to pass data from a datasource and

the component should be able to build itself using that data.

Luckily enough the internet was able to provide an answer :

easytree site.png

Important to note is this :

License

EasyTree is licensed under the MIT license which means it is completely free for both personal and commercial use.

My guess is that these things get build at the MIT for some kind of exam and the publishing the result on the internet is a part of this exam.

If you look at the code in the libary the count goes over a thousand lines. If you had to do this yourself it could take weeks. Now it is a matter of days.

For a initial view in the SDK you need to

create the component in your extension xml :


<component
                               id="treemenu"
                               title="Reference Cockpit Tree Menu"
                               icon="res/sparkline.png"
                               handlerType="div"
                               databound="true"
                               group="referencecockpit">
                               <jsInclude>res/js/treemenu.js</jsInclude>
                               <jsInclude>res/js/jquery.easytree.min.js</jsInclude>
                               <cssInclude>res/css/treemenu.css</cssInclude>
                         
                               <property id="data" title="Data Series"               type="ResultCellList" group="DataBinding"/>
                               <property id="nodeID" type="String" visible="false" title="Radio changed ID"/>
                               <property id="nodevalue" type="boolean" visible="false" title="Radio New Value"/>
                               <property id="onClick" title="on Click" type="ScriptText" group="Events"/>
                               <property id="onValueChange" title="on Value Change" type="ScriptText" group="Events"/>
                               <property id="node" title= "current node" type="String" visible="false"/>
                               <property id="nodes" title= "current nodeset" type="String" />
                               <initialization>
                                               <defaultValue property="WIDTH">240</defaultValue>
                                               <defaultValue property="HEIGHT">340</defaultValue>
                                               <defaultValue property="nodes">{"text": "Add Data to build the menu", isRadio: false}</defaultValue>
                               </initialization>
                </component>



note there are some properties to be able to pass node and nodes and return the information on clicked nodes. Additionally there is a jsinclude where you add the js file.

in the init function of the js file the following code


container = this.$()[0];
                         myTree = $(container).easytree(
                                                               { data: jsonData,
                                                                              stateChanged: stateChanged,
                                                       opening: opening,
                                                       opened: opened,
                                                       closing: closing,
                                                       closed: closed,
                                                       radiobeforeUpdate: radiobeforeUpdate,
                                                       radioafterUpdate: radioafterUpdate
                                                               });


The part after myTree I copied from the documentation on the easytree site. the variable jsonData is hardcoded fake data that I inserted so that I could look

at the first result.

The rest of the parameters were parameters that I defined


                                function stateChanged(nodes, nodesJson) {}
                    function opening(event, nodes, node) {}
                    function opened(event, nodes, node) {}
                    function closing(event, nodes, node) {}
                    function closed(event, nodes, node) {}
                    function radiobeforeUpdate(event, nodes,  node) {}
                    function radioafterUpdate(event, nodes,  node) {
                                _nodevalue = node.radioValue;
                                _node = JSON.stringify(node);
                                _nodes = nodes;
                                               that.firePropertiesChanged(["nodeID","node", "nodes"]);
                                               that.fireEvent("onValueChange");
                                          
                                          
                    }


Everything except the radioafterUpdate was standard. These functions are called when specific events are triggered from the library. You see that after the radiobutton was changed the properties nodeID, node and nodes are triggered and a script event is fired.

In the ZTL file you can then create a method that calls the current node


                String getCurrentNode() {*
                               return this.node;
                *}


In design studio in combination with APPLICATION.alert I can show a popup where the current node + values is presented.

/wp-content/uploads/2014/10/application_alert_node_556559.png

And that’s where I stopped :-). The result was that I knew this was feasible within a reasonable amount of time. That was the goal of this exercise.

However The alternative is off course working with standard components. A little less flashy off course, but it does the trick, or at least the most important parts.

standard components.png

With 2 listboxes, a dropbox for filtering the group and buttons to add and remove items from a listbox you can do the same thing. The tree menu looks better but choosing standard components often makes development and maintenance of applications easier which is a strong argument.

When you have to use the SDK to add things that the standard components do not deliver look for the standard libraries that are out there. And before you commit yourself into using and SDK solution you have to see if the argument for the extra functionality in the SDK is strong enough for the development and maintenance burden you bring with such an development.

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Mustafa Bensan

    Hi Jeroen,

    Good to see you’ve broken your long silence 🙂 . 

    You make valid a point about the need to give careful consideration before building SDK components in-house, given the development effort and ongoing maintenance burden it incurs.  I think this presents a good case for evaluating professionally authored, purpose-built, enterprise grade 3rd-party SDK components.  What’s your opinion about this?

    Regards,

    Mustafa.

    (0) 
  2. Christoph Wassermann

    Good article, just one thing I’d like to note: The MIT license is not something that is reserved for software coming out of MIT, it’s just a very permissive and pretty short license that a lot of people like to use when giving back to the software community.

    I’m just mentioning this because the way you put it, it sounds like it’s a bunch of students hacking some stuff together in time for their exams – which is absolutely not what a lot of MIT-licensed software is. There are very mature and professional MIT-licensed libraries out there, Wikipedia mentions Ruby on Rails, Node.js and Lua as examples.

    See the Wikipedia article here: MIT License – Wikipedia, the free encyclopedia

    (0) 
    1. Jeroen van der A Post author

      thanks for the addition,

      You’re right. I was more referring to this instance as this was a student. I contacted him as he added the CSS for checkboxes but not the functionality. He wasn’t planning on adding it so i updated the library for my own purposes. So I shouldn’t look at all MIT licenses based on this one experience 🙂

      (0) 

Leave a Reply