Changing the tree node text color conditionally

Question

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.

shady · Accepted Answer · 2025-05-10 08:44:01Z

The following steps are done when solved it:

Instead of created special column TYPE, the value of type is concatenated WITH ICON column, and the type has case to return these values RED, YELLOW, GREEN, GRAY, DEFAULT.
at Initialization JavaScript Function, following code added

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;
}

Collectives™ on Stack Overflow

Changing the tree node text color conditionally

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related