# Ignition checkbox tree

**URL:** <https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028>\
**Category:** Ignition\
**Tags:** ignition80, perspective, scripting, ignition81\
**Created:** [April 18, 2024, 9:50am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028 "2024-04-18T09:50:28Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [April 18, 2024, 9:50am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/1 "2024-04-18T09:50:28Z")

</div>

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?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/c/dc1bbf942f73d32ed6959d8bb8c3df29a6c6589f.png)

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [April 18, 2024, 11:21am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/2 "2024-04-18T11:21:24Z")

</div>

You can use **icon** property  
 ![Tree Checkbox](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/3/338c58ef8825240cbbeb7dc45f1b9756d21828d7.png)

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [April 18, 2024, 11:39am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/3 "2024-04-18T11:39:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [April 18, 2024, 2:04pm UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/4 "2024-04-18T14:04:17Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [April 19, 2024, 11:04am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/5 "2024-04-19T11:04:20Z")

</div>

and how should my script look like if I want to change my icon from material/check\_box\_outline\_blank to material/check\_box?

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [April 19, 2024, 12:33pm UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/6 "2024-04-19T12:33:16Z")

</div>

Tree Component Event - onItemClicked

```auto
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

```

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [April 22, 2024, 8:36am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/7 "2024-04-22T08:36:17Z")

</div>

I tried that, and this is the result. On the left is the code and on the right is the error.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/a/da8496a874912165f5c1a97e25fe0267bb3ca803.png)

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [April 22, 2024, 9:28am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/8 "2024-04-22T09:28:12Z")

</div>

There is no key named icons, perhaps it's icon like the suggested code (you didn't use exactly what he had).

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [April 22, 2024, 9:35am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/10 "2024-04-22T09:35:27Z")

</div>

Original code has "icon". Not "icons".

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [April 22, 2024, 10:13am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/11 "2024-04-22T10:13:17Z")

</div>

Sorry, my mistake, I have changed it now and still get the same error.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/b/8bc539b58d9ac86a16023040a557293ac232575c.png)

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [April 22, 2024, 10:18am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/12 "2024-04-22T10:18:22Z")

</div>

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.

```python
[
  {
    "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": []
              }
            ]
          }
        ]
      }
    ]
  }
]

```

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [April 22, 2024, 10:50am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/13 "2024-04-22T10:50:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 22, 2024, 11:01am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/14 "2024-04-22T11:01:01Z")

</div>

![Tree props items](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/b/fba2c1cad4bdcdfbbcaeccfd60bbd16053eb48fb.png)

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [April 22, 2024, 11:12am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/15 "2024-04-22T11:12:36Z")

</div>

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?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/a/3a660c65a2571b502199fd0e806db3bc53264121.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/5/05668acacba9ca32bfc85718064a6e4bd3774d0f.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 22, 2024, 11:17am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/16 "2024-04-22T11:17:55Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![Emanuel\_Danielczyk](https://avatars.discourse-cdn.com/v4/letter/e/4da419/32.png) [@Emanuel\_Danielczyk](https://forum.inductiveautomation.com/u/Emanuel_Danielczyk)\
**Post date:** [April 22, 2024, 11:23am UTC](https://forum.inductiveautomation.com/t/ignition-checkbox-tree/89028/17 "2024-04-22T11:23:57Z")

</div>

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.