a5_treeTextToJSON Function - Anyone know how to use this??????

[josevelez]

Has anyone used the UX Component - Tree control?

It has the ability to use a function called a5_treeTextToJSON but as usual, no helpful documentation.

The video goes as far as showing how to setup rather useless examples with static text but stops short of showing how to use the tree control with a database.

[Lance Gurd]

Re: a5_treeTextToJSON Function - Anyone know how to use this??????

here the xbasic code I use to populate one of my tree controls, pretty basic stuff

function xb3 as c (e as p)
	dim cn as sql::Connection
	cn.open("::name::latest")
	sql = "select op_type, op from method_ops order by op_type"
	cn.Execute(sql)
	rs=cn.ResultSet
	txt=rs.tostring(-1,-1,.f.,"|")
	txt2=*tree_to_outline(txt,chr(9))
	txt3=a5_treetexttojson(txt2)
	

	xb3 = txt3
	cn.Close()
end function

you could of course use a where clause in the sql select statement to filter on a session variable as per your other thread about tree controls

[Clipper87]

Re: a5_treeTextToJSON Function - Anyone know how to use this??????

From the v12 release notes: http://news.alphasoftware.com/v12pre...seNotesV12.htm

a5_treeTextToJSON Function - Converts a 'tree' definition that is in the form of a crlf delimited list with tab indented values and converts into a JSON tree definition. For use with the Javascript Menu and Tree objects in the UX and Grid components.
The UX component has a new Tree control. And the UX and Grid components have a new action in Action Javascript to display a menu.
Both the Tree and the Menu objects are populated with a JSON string that defines the items in the tree/menu.
This JSON string can either be defined at design time, or can be computed using an Xbasic function. The ability to define the JSON string using Xbasic is extremely powerful because it means that your tree and menu objects can be highly dynamic.
The a5_treeTextToJSON() function is a helper function that you can use in your Xbasic code to generate the JSON definition for the tree or menu.
The function takes a CRLF delimited list of values. Tab indents are used to indicate the level in the hierarchy.
For example, here is a simple tree definition:

MA
Boston
Back Bay
Financial District
Cambridge
Harvard Square
Inman Square
New York
New York City
Midtown
Wall Street
Albany
Ithaca

Using the a5_treeTextToJSON() function, you can convert the definition this JSON
[
{
html: 'MA',
children: [
{
html: 'Boston',
children: [
{
html: 'Back Bay'
},
{
html: 'Financial District'
}
]
},
{
html: 'Cambridge',
children: [
{
html: 'Harvard Square'
},
{
html: 'Inman Square'
}
]
}
]
},
{
html: 'New York',
children: [
{
html: 'New York City',
children: [
{
html: 'Midtown'
},
{
html: 'Wall Street'
}
]
},
{
html: 'Albany'
},
{
html: 'Ithaca'
}
]
}
]

In the above example, the JSON that is generated does not have any additional properties, such as the icon to show for each item, or the onClick event.

The text tree that you pass into the a5_treeTextToJSON() function can include a list of additional properties for each item. These properties are in the form of a JSON object (on a single line), as shown in the following simple example:

dim treeText as c
treeText = <<%txt%
Alpha
Alpha-1{icon: 'myIconA', onClick: 'alert("You clicked on Alpha-1");'}
Alpha-2{icon: 'myIconB', onClick: 'alert("You clicked on Alpha-2");'}
Beta{icon: 'myIconC', onClick: 'alert("You clicked on Beta-1");'}
%txt%

?a5_treeTextToJSON(treeText)
= [
{
html: 'Alpha',
children: [
{
html: ' Alpha-1',
icon: 'myIconA',
onClick: function(dn) {alert("You clicked on Alpha-1");}
},
{
html: ' Alpha-2',
icon: 'myIconB',
onClick: function(dn) {alert("You clicked on Alpha-2");}
}
]
},
{
html: 'Beta',
icon: 'myIconC',
onClick: function(dn) {alert("You clicked on Beta-1");}
}
]


Important: The indentation in the text string that is passed into the a5_treeTextToJSON function must use tabs, not spaces.

Tip: When generating the crlf delimited string that is passed into the a5_treeTextToJSON() function, another useful helper function is the *tree_to_outline() function, which takes a string of data in this format:

Ma|Boston|Back Bay
Ma|Boston|Financial

and turns it into an outline format, which is the format needed by the a5_treeTextToJSON() function.

[josevelez]

Re: a5_treeTextToJSON Function - Anyone know how to use this??????

Lance/Frank,

Thank you! I will study this code.

Thanks!

[Michael1954]

Re: a5_treeTextToJSON Function - Anyone know how to use this??????

I have worked through this and can make most things work.

However the onClick and attributes are just not working for me.

I am sure it is a simple syntax problem.

This works

{ icon: \'cssIcon=fa fa-folder\' , collapsedIcon: \'cssIcon=fa fa-folder\', expandedIcon: \'cssIcon=fa fa-folder-open\' , initialState: "open", value: "Hello" }

With the genie I can use the onClick event

So onClick (Genie based) I have

func(this.value);

function func(txt){ alert(txt);} the alert returns "value" the variable "we".

The JSON from the component is

[
{
html: 'parent',
value: 'we',
icon: 'cssIcon=fa fa-glass',
collapsedIcon: 'cssIcon=fa fa-folder',
expandedIcon: 'cssIcon=fa fa-folder-open',
onClick: function(dn) {func(this.value);}, // I cannot get this section to work when I build with xBasic.
children: [
{
html: 'child',
icon: 'cssIcon=fa fa-folder-open'
}
]
}
]




Also I cannot get this to work when passing from the server.


{icon: 'myIconA', onClick: 'alert("You clicked on Alpha-1");'}