a5_XbasicTreeToJsonTree Function
Syntax
Arguments
- treeDataCharacter
The data to convert to JSON.
- delimiterCharacter
Default = ".". The delimiter used between feilds in the tree data.
- propertyNameCharacter
Default = "html". The property name to use in the generated JSON object.
Returns
- resultCharacter
Returns a JSON string.
Description
Converts a CRLF delimited string that Xdialog uses for Tree Control data to a JSON string.
Example: Populating a List with Nested Lists
If you want to display a List control with nested Lists (i.e. when the user selects an item in the List, the List is repopulated with that item's child data), you typically define JSON data for the List using this format:
[
{
display: 'Menu1',
children: [
{
display: 'Menu1_A',
action: 'Action_1'
},
{
display: 'Menu1_B',
action: 'Action_2'
},
{
display: 'Menu1_C',
action: 'Action_3'
}
]
},
{
display: 'Menu2',
action: 'Action_4'
},
{
display: 'Menu3',
action: 'Action_5'
}
]In some cases you might want to generate this JSON data by querying a SQL database. This is easily done by using the a5_xbasicTreeToJSONTree() function.
For example, consider the following Xbasic string which defines a tree structure in Xbasic syntax:
dim txt as c txt = <<%str% MA.Boston.Smith MA.Boston.Jones MA.Cambridge.King CA.Los Angeles %str% json = a5_XbasicTreeToJSONTree(txt,".","display")
This will generate a JSON string in this format:
[
{
"display": "MA",
"children": [
{
"display": "Boston",
"children": [
{
"display": "Smith"
},
{
"display": "Jones"
}
]
},
{
"display": "Cambridge",
"children": [
{
"display": "King"
}
]
}
]
},
{
"display": "CA",
"children": [
{
"display": "Los Angeles"
}
]
}
]With this understanding of how the a5_xbasicTreeToJSONTree() function works, it is easy to see how to generate the JSON from a SQL database. The key is to simply define a query that returns data in the Xbasic tree format and then call the a5_xbasicTreeToJSONTree() function.
For example, to generate data that displays a list of Countries, Cities and Contact Names, you can use this Xbasic:
dim cn as sql::Connection
cn.open("::Name::northwind")
dim sql as c
sql = "SELECT Country, City, ContactName FROM Customers ORDER BY Country"
dim flag as l
cn.PortableSQLEnabled = .t.
flag = cn.Execute(sql)
dim rs as sql::ResultSet
rs = cn.ResultSet
dim txt as c
'generate the Xbasic tree format data using a | as the delimiter
txt = rs.ToString(-1,-1,.t.,"|")
dim json as c
'generate the JSON tree specifying the | as the delimiter and 'display' as the property name
json = a5_XbasicTreeToJSONTree(txt,"|","display")Example: Adding an onClick Event Handler
An 'onclick' event handler can be added for each leaf in the Xbasic tree. This is done by adding the ```onclick:<your js code here> where <your js code here> is replaced with the JavaScript to execute.
The example below demonstrates adding an onclick event handler for each entry:
dim cn as sql::Connection
cn.open("::Name::AADemo-Northwind")
cn.PortableSQLEnabled = .t.
dim sql as c
dim flag as l
sql = <<%str%
SELECT
country,
city,
concatenate(contactname,'```onclick:findCustomer(','''',country,'-',city,'-',contactname,''')')
FROM customers
WHERE NOT (country = '')
ORDER BY country, city, contactname
%str%
flag = cn.Execute(sql)
dim txt as c
txt = cn.ResultSet.tostring(-1,-1,.t.,"|")
' This will generate a crlf delimited string like this:
'France|Nantes|Carine Schmitt```onclick:findCustomer('France-Nantes-Carine Schmitt')
'France|Nantes|Janine Labrune```onclick:findCustomer('France-Nantes-Janine Labrune')
'France|Paris|Dominique Perrier```onclick:findCustomer('France-Paris-Dominique Perrier')
'France|Paris|Marie Bertrand```onclick:findCustomer('France-Paris-Marie Bertrand')
'France|Reims|Paul Henriot```onclick:findCustomer('France-Reims-Paul Henriot')
txt = a5_XbasicTreeToJSONTree(txt,"|","html")Notice that the tree branches are separated by a | character. The leaf nodes specify an onclick event.
Notice also that the full path to the leaf is passed as the argument to the function. So, for example, the findCustomer() function will get called with the country, city and contactname as a '-' delimited string.
See Also