Style Tree Items programmatically

Ignition
,
1

Hello Forum,
is it possible to style TreeView items via script, e.g. current orders should get a different icon or the font should be colored differently. Is there a possibility to read the CSS classes / ID's and to change them by own styleshhet on conditions?

Is there an example of this somewhere?

Many thanks for your support

2

You tagged your post as perspective, but the TreeView is a vision component.
Did you mean a simple tree ?

1 Like
3

Yes, I meant a tree. Sorry if I've caused any confusion here. I have given the component in my Perspective Project the name TreeView.

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
5

Hi,
thanks for your description. Is there also a way to react to the information from the data property? I use a dictionary within this data property and would like to react to information on it, or format the tree item. I saw in your script that you can also query the icon individually. Can I also configure this individually?