The following Javascript code used when initializing the tree region to colorize the tree node texts.
function( options ) {
options.makeNodeAdapter = function(data, types, hasIdentity) {
types.default.classes = "u-color-1-text"
var a
a = $.apex.treeView.makeDefaultNodeAdapter( data, types );
return a;
}
return options;
}
The following sql code used as tree region source:
select
CASE
WHEN CONNECT_BY_ISLEAF = 1 THEN 0
ELSE 1
END AS NODE_STATUS,
LEVEL,
ID as ID,
NAME as title,
PARENT_ID AS PARENT_ID,
DESCRIPTION as tooltip,
ICON_HTML as icon,
TYPE
from TABLE_T
start with PARENT_ID is null
connect by prior ID = PARENT_ID
order siblings by ID ASC;
I am trying to colorize the nodes conditionally to the value of TYPE
column. In this situation,
I didn't find any way to access the value of TYPE
column from javascript. the node object in Apex documentation doesn't have data model that save all data into client.
The following steps are done when solved it:
TYPE
, the value of type is concatenated WITH ICON
column, and the type has case to return these values RED, YELLOW, GREEN, GRAY, DEFAULT
.function( options ) {
options.makeNodeAdapter = function(data, types, hasIdentity) {
var nodeAdapater = $.apex.treeView.makeDefaultNodeAdapter( data, types );
nodeAdapater.renderNodeContent = function( node, out, options, state ) {
var color = node.icon.includes("RED") ? "red" : node.icon.includes("YELLOW") ? "yellow" : node.icon.includes("GREEN") ? "green" : node.icon.includes("GRAY") ? "gray" : ""
var icon = node.icon.substring(0, node.icon.indexOf(" "+color.toUpperCase()))
node_html = `<span style=''>
<span style='color: ${color};'>
<i class='fa ${icon}'> ${node.label}</i>
</span>
</span>`
out.markup(node_html);
}
return nodeAdapater;
}
return options;
}