Style Tree Items programmatically

Ignition
,
4

Yes, but not without some stylesheet CSS.

Some examples:

Note: these examples will apply to ALL Tree components if used as. To limit these to Trees with a specific Perspective Style applied, prefix the selectors with the Perspective Style path like this: /* Applies this style to Tree components with the "Components/EndNodeOpacity" Perspective Style applied */ .psc-Components\/EndNodeOpacity .tree-item[data-label*="UPDATE"] {   background-color: aliceblue; } /***********************/ /* Tree View Component */ /* Select tree items that contain specific text */ .tree-item[data-label*="UPDATE"] {   background-color: aliceblue; } /* Select tree items that contain text "UPDATE" and any of its child nodes */ .parent-node:has(> .tree-row .tree-item[data-label*="UPDATE"]), .tree-item[data-label*="UPDATE"] {   background-color: aliceblue; } /* Select the child nodes of tree items that contain text "UPDATE".    Does not select the item that contains "UPDATE" itself. */ .parent-node:has(> .tree-row .tree-item[data-label*="UPDATE"]) {   background-color: aliceblue; } /* Select items that use a specific icon */ .tree-row:has(svg[data-icon="material/functions"]) {   background-color:lightslategray;   color:#fff;   font-weight: bold; } /* Change the "hover" style of items */ .ia_treeComponent__node:hover:not(.ia_treeComponent__node--selected) {   background-color: #ffda3344 !important; } /* Select only terminal nodes that have a specific style class applied to the Tree and the item label contains a space */ .psc-Components\/EndNodeOpacity .terminal-node .tree-item:not([data-label*=" "]) {   opacity: 0.4; } Making item text wrap to display on multiple lines if needed: Allow Item Labels to Wrap: /**********************************************************************/ /* edits to the Tree component to display long text on multiple lines */ .tree-item {     height: fit-content !important;     padding: 4px 0px; /*added this*/ } .tree-item-label {     flex: unset !important;     flex-wrap: nowrap; /*added this*/ } .text-scroll{     padding-top:2px;     overflow-wrap: break-word !important;     white-space:pre-wrap !important; } .label-wrapper-icon {     display: block !important;     margin: auto 0;     /*padding-top: 4px;*/ } .terminal-alignment.last-child{     height: 16px !important; } .terminal-alignment .cross-alignment{     height: 16px !important; } .tree .tree-item-label .label-wrapper{     align-items: start; } /**********************************************************************/ Expand (31 lines)

Sorry about the formatting.. I'll fix it when I'm back at my laptop. Copying anything from Teams is as bad as searching for anything using Microsoft's search algorithms. More below...

To apply these styles below to only Tree components with a specific Perspective Style class assigned, add the psc path to the start, separated by a space. e.g. this part .psc-Components/EndNodeOpacity below:

/* Applies this style to Tree components with the "Components/EndNodeOpacity" Perspective Style applied */
.psc-Components\/EndNodeOpacity .tree-item[data-label*="UPDATE"] {
  background-color: aliceblue;
}

/***********************/
/* Tree View Component */

/* Select tree items that contain specific text */
.tree-item[data-label*="UPDATE"] {
  background-color: aliceblue;
}

/* Select tree items that contain text "UPDATE" and any of its child nodes */
.parent-node:has(> .tree-row .tree-item[data-label*="UPDATE"]), .tree-item[data-label*="UPDATE"] {
  background-color: aliceblue;
}

/* Select the child nodes of tree items that contain text "UPDATE".
   Does not select the item that contains "UPDATE" itself. */
.parent-node:has(> .tree-row .tree-item[data-label*="UPDATE"]) {
  background-color: aliceblue;
}

/* Select items that use a specific icon
.tree-row:has(svg[data-icon="material/functions"]) {
  background-color:lightslategray;
  color:#fff;
  font-weight: bold;
}

/* Change the "hover" style of items */
.ia_treeComponent__node:hover:not(.ia_treeComponent__node--selected) {
  background-color: #ffda3344 !important;
}
2 Likes