Hello, I need a checkbox tree in Ignition Perspective as shown in the picture. However, Ignition only has the tree structure and the checkboxes as two separate components. Can someone tell me how I can get something like this?
You can use icon property
1 Like
Thank you for your response! I have only recently started working with Ignition, could you provide me with a brief instruction on how to do this? And can I then select multiple options in this tree? I need this functionality to filter data.
In order to add checkbox icons to the tree, you'll need to transform the data going to items props. Use following guide.
https://docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-display-palette/perspective-tree#scripting
Moreover, for dynamic icon changes upon user interaction, you can use the 'onItemClicked' event.
2 Likes
and how should my script look like if I want to change my icon from material/check_box_outline_blank to material/check_box?
Tree Component Event - onItemClicked
def runAction(self, event):
Untick = "material/check_box_outline_blank"
Tick = "material/check_box"
itemsPath = event.itemPath
items = self.props.items
for index in itemsPath[:-1]:
items = items[index]["items"]
icon = items[itemsPath[-1]]["icon"]["path"]
items[itemsPath[-1]]["icon"]["path"] = Tick if icon == Untick else Untick
1 Like
There is no key named icons, perhaps it's icon like the suggested code (you didn't use exactly what he had).
Original code has "icon". Not "icons".
The code assumes that the tree has a icon key to be changed. You have to populate the tree correctly first.
Please copy following in the tree props.items and try.
[
{
"label": "Item 1",
"expanded": true,
"icon": {
"path": "material/check_box_outline_blank"
},
"items": [
{
"label": "Child 1",
"expanded": true,
"icon": {
"path": "material/check_box_outline_blank"
},
"items": [
{
"label": "Grandchild 1",
"expanded": false,
"icon": {
"path": "material/check_box_outline_blank"
},
"items": []
},
{
"label": "Grandchild 2",
"expanded": true,
"icon": {
"path": "material/check_box"
},
"items": [
{
"label": "Item",
"expanded": true,
"icon": {
"path": "material/check_box",
"color": "",
"style": {}
},
"data": {},
"items": []
}
]
}
]
}
]
},
{
"label": "Item 2",
"expanded": true,
"icon": {
"path": "material/check_box"
},
"items": [
{
"label": "Child of Item 2",
"expanded": false,
"icon": {
"path": "material/check_box"
},
"items": [
{
"label": "Different Grandchild 1",
"expanded": false,
"items": [
{
"label": "Item",
"expanded": false,
"data": {},
"items": []
}
]
}
]
}
]
}
]
1 Like
i´m new in Ignition and don´t know where i can find the tree props.items to paste it, can you give me a quick instruction?
Where exactly can I paste the script, I only see the option "add change script" but I don't think that's what is meant by that, right?
In post #11 Ujwal did not post a script. It's the JSON for props.items. You just paste that.
If you are referring to another post then please quote the post number (visible to the right when you scroll).
1 Like
Ah, now I get it, thank you very much for the support! I am in the process of familiarizing myself with Ignition and you have helped me a lot.