# Filter linked to a menu bar in perspective

**URL:** <https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 21, 2022, 10:46am UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993 "2022-06-21T10:46:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Philip\_08012](https://avatars.discourse-cdn.com/v4/letter/p/ce73a5/32.png) [@Philip\_08012](https://forum.inductiveautomation.com/u/Philip_08012)\
**Post date:** [June 21, 2022, 10:46am UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/1 "2022-06-21T10:46:16Z")

</div>

Hi all,

Could anyone help me on how you can add the ´filter´ props that is available on the table component to the menu bar? I want to be able to search/filter results

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 21, 2022, 10:58am UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/2 "2022-06-21T10:58:23Z")

</div>

What do you mean ? Just click on it to set it to `true` and the search bar will appear, then you just have to type things in it…  
Or is there something else you need ?

---

<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:** [June 21, 2022, 11:14am UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/3 "2022-06-21T11:14:13Z")

</div>

![Table filter](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/5/152c64050589f8b607ac3aa65be8f2277e41041a.png)

---

<div class="post-metadata">

**Author:** ![Philip\_08012](https://avatars.discourse-cdn.com/v4/letter/p/ce73a5/32.png) [@Philip\_08012](https://forum.inductiveautomation.com/u/Philip_08012)\
**Post date:** [June 21, 2022, 1:40pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/4 "2022-06-21T13:40:23Z")

</div>

I am using the menu tree component where there is no filter prop available but i want to include one do you know how do this? I know there is a filter on the table component but i don’t want to use it as the navigation options from it are not as good

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 21, 2022, 1:46pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/5 "2022-06-21T13:46:39Z")

</div>

Why didn’t you say that in the first place ?  
I’m getting frustrated at this kind of threads asking for something but not specifying what…

So, let’s make things clear and explicit:  
What do you want to do exactly ? What do you want to filter, what do you want to filter it with, and how do you want the filter to apply ?  
Show us what you have now, and show/explain what you want to have.

---

<div class="post-metadata">

**Author:** ![Philip\_08012](https://avatars.discourse-cdn.com/v4/letter/p/ce73a5/32.png) [@Philip\_08012](https://forum.inductiveautomation.com/u/Philip_08012)\
**Post date:** [June 21, 2022, 1:51pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/6 "2022-06-21T13:51:37Z")

</div>

Ok in the image below i have a Menu Bar which has no prop to filter options. I want to either include a prop to filter options or to bind it to a text box to filter. I want the filter to work by typing in a different name/search and it finds the item in the menu bar?

Does this help

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/4/24a9d80c774e8c2fb0dc135211f7629e6ac0a621.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 21, 2022, 2:00pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/7 "2022-06-21T14:00:37Z")

</div>

The menu true shows whatever is in the property items.  
If you want to filter what is shown you should put a script that filters on the binding of this property.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/4/f454b70a0328dacc7b71c66a8f157068649d3fa9.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 21, 2022, 2:03pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/8 "2022-06-21T14:03:27Z")

</div>

How are you building the items tree ? Is it a binding ?

---

<div class="post-metadata">

**Author:** ![Philip\_08012](https://avatars.discourse-cdn.com/v4/letter/p/ce73a5/32.png) [@Philip\_08012](https://forum.inductiveautomation.com/u/Philip_08012)\
**Post date:** [June 21, 2022, 2:06pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/9 "2022-06-21T14:06:36Z")

</div>

I am inputting Names to the items and a target window. I could also use a Named Query to populate the items but i want to get the filter working first and i can decide after what way i want to proceed.

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [June 21, 2022, 2:29pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/10 "2022-06-21T14:29:45Z")

</div>

How to apply the filter might depend on how you populate this tree.

Also, what do you want the filtered menu to look like ? Do you want to keep the hierarchy, or make a flat list of items found ?

ie:

```json
foo
- sub_foo1
  - deep_foo1
  - deep_foo2
- sub_foo2
bar
- sub_bar1
- sub_bar2

```

filter on `sub`:

```json
sub_foo1
sub_foo2
sub_bar1
sub_bar2

or

foo
- sub_foo1
- sub_foo2
bar
- sub_bar1
- sub_bar2

```

Do you want to filter on exact match, or on pattern ?  
ie: “foo” matches with “foo”, “sub\_foo1”, “sub\_foo2”, “deep\_foo1” and “deep\_foo2”, or only “foo” ?

---

<div class="post-metadata">

**Author:** ![Philip\_08012](https://avatars.discourse-cdn.com/v4/letter/p/ce73a5/32.png) [@Philip\_08012](https://forum.inductiveautomation.com/u/Philip_08012)\
**Post date:** [June 21, 2022, 2:36pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/11 "2022-06-21T14:36:53Z")

</div>

A list of items is all I want to do. Only Foo as you have said this will work best for what i want.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 21, 2022, 2:40pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/12 "2022-06-21T14:40:36Z")

</div>

this is just a basic way of filtering a nested array. There are shorter ways to write this but this should give you an idea xd

```auto
	if not value.filter:
		return value.allItems
	filteredItems = []
	def recursiveFilter(menuItem, toFilter):		
		for item in menuItem:
			if toFilter.lower() in item.label.text.lower():
				filteredItems.append(item)
			elif len(item.items):
				recursiveFilter(item.items, toFilter)	
	recursiveFilter(value.allItems, value.filter)
	return filteredItems

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1eff454cb6dc4b5d7b9145f183975fa941d5a363.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/0/a01255bc16380d633f2f2a36a9c8d094831bf4b0.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/2/42b6822bcb12e02cdc317187dc963fa5ab8cedd8.png)

---

<div class="post-metadata">

**Author:** ![Philip\_08012](https://avatars.discourse-cdn.com/v4/letter/p/ce73a5/32.png) [@Philip\_08012](https://forum.inductiveautomation.com/u/Philip_08012)\
**Post date:** [June 21, 2022, 3:30pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/13 "2022-06-21T15:30:36Z")

</div>

Thanks very much! Did you add allItems as a prop?

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [June 21, 2022, 4:37pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/14 "2022-06-21T16:37:33Z")

</div>

@victordcq is using an expression structure for the binding, so allItems is defined there. You can see that it is bound to `this.custom.allMenuItems` which means their is a custom prop `allMenuItems` defined on the MenuTree

---

<div class="post-metadata">

**Author:** ![Philip\_08012](https://avatars.discourse-cdn.com/v4/letter/p/ce73a5/32.png) [@Philip\_08012](https://forum.inductiveautomation.com/u/Philip_08012)\
**Post date:** [June 22, 2022, 7:37am UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/15 "2022-06-22T07:37:18Z")

</div>

This script has given a error I have bound the expression structure to the items prop and it gives the following:

items: string found, array expected.  
The script states: Mismatched input " expecting DEDENT

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/e/5e6ff856479f5064dd54c9b619f863214d2af5ee.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [June 22, 2022, 8:24am UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/16 "2022-06-22T08:24:56Z")

</div>

In python indents (tabs/spaces) are important  
Your scripts needs to start on the first indent.  
Unfortunatly copy pasting often messses up the indents

allItems should be an array of what you had before of all your menu’s  
i hope you havent deleted that xd

---

<div class="post-metadata">

**Author:** ![Philip\_08012](https://avatars.discourse-cdn.com/v4/letter/p/ce73a5/32.png) [@Philip\_08012](https://forum.inductiveautomation.com/u/Philip_08012)\
**Post date:** [June 22, 2022, 8:31am UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/17 "2022-06-22T08:31:06Z")

</div>

Thank you very much @victordcq it works ok now there was a small space i missed causing the issue! Appreciate your help!

---

<div class="post-metadata">

**Author:** ![kiran\_kale1](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kiran\_kale1](https://forum.inductiveautomation.com/u/kiran_kale1)\
**Post date:** [March 30, 2023, 1:20pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/18 "2023-03-30T13:20:47Z")

</div>

Hii,  
we need the similar search bar but with different Hierarchy. Please find the attached screen shot for the more information.  
Thanks,  
Kiran

 ![MicrosoftTeams-image (3)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/1/9150aabe31057521f0e28972fe003b63f5408a9b.png)  
 ![MicrosoftTeams-image (2)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/d/1d80f2f526a45fb47ac328ffaf81f2db6de3106b.png)  
 ![MicrosoftTeams-image (4)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/1/91c800769c333a8c95ec661964e75ec5493813ea.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [March 30, 2023, 1:34pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/19 "2023-03-30T13:34:54Z")

</div>

The images don't say much:  
What's the 'different hierarchy' you're talking about ?  
What doesn't work as expected ?

---

<div class="post-metadata">

**Author:** ![kiran\_kale1](https://avatars.discourse-cdn.com/v4/letter/k/7993a0/32.png) [@kiran\_kale1](https://forum.inductiveautomation.com/u/kiran_kale1)\
**Post date:** [March 30, 2023, 1:57pm UTC](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993/20 "2023-03-30T13:57:32Z")

</div>

Hii,  
on menu bar there are 5 machines ,i want to search that machine with search bar.  
i have took one menu bar and one input text field.  
after that i have created one memory tag and added string array of that all machines names.  
added above script on menu bar props item property.  
added on custom property. allMenuItems  
Regards,  
Kiran

[Next page](https://forum.inductiveautomation.com/t/filter-linked-to-a-menu-bar-in-perspective/60993.md?page=2)
