Filter linked to a menu bar in perspective

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

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 ?

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

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.

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

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

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

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.

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:

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

filter on sub:

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” ?

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

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

	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
image

4 Likes

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

@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

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

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

1 Like

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

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 (4)

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

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