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 :
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 :
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.
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.
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.
- SAP Managed Tags:
5 Comments
