I am trying to pass a parameter from a horizontal menu component to launch a view. I can launch the view no problem, but cannot for the life of me figure out how to pass parameters from the component.
Hi, are you trying to pass a custom property? What exactly does your setup look like on your component? What is the end goal with this parameter?
Yes, I am trying to pass a custom property.
Essentially I have a view that i want to re-use. I'd like to pass a parameter to the view through the horizontal nav.
Can you post screen shots of the configuration of your component? How are you navigating to the other views?
Any chance we can resurrect this question? I'd like to use the horizontal menu to call up the same page from multiple options, each with a different tagPath page parameter (e.g. "Robot 1" "Main/Robot/R1", "Robot 2" "Main/Robot/R2"...).
1 Like
I had a similar issue and developed a fairly decent workaround.
In my situation, I have a parent view with an embedded view that is used to host custom content for equipment that is organized in a hierarchy. There is a session custom prop that points to the id of the current location in the hierarchy, and the embedded view path is bound to a query that uses that id to return the path to a corresponding sub-view.
The horizontal menu is bound to a query that uses the same id to return data about all the children of the current location - which could be 0 or dozens of children, so the built-in scrolling of the horizontal menu has much better functionality than a flex repeater.
I found that I could set the target property of each menu item to the corresponding id of that location, capture that in the event.target argument of the onItemClicked event for the menu, and there update the session prop value. This worked perfectly in Designer, although I did have to cast the id to a string to store it in the menu props, and cast the string back to an int to store it in the session prop, no biggie.
Unfortunately, in a browser, I discovered that the menu still forced a navigation, which, of course, failed. I was hoping there would be a way to abort the default navigation in the onItemClicked event, but so far I haven't figured out how.
My workaround exploits the behavior of a menu item that has sub-items. These parent menu items don't navigate, but they do still carry the event.target value to the onItemClicked handler. I found that by adding a "phantom" child item to each top-level item, which is disabled, blank, and transparent, it almost does exactly what I want.
phantom = {
'enabled' : False,
'target' : "",
'items' : [],
'icon' : {},
'label' : "",
'style' : {'opacity' : 0}
}
The only artifact is the blue selection highlight that appears and disappears if the user repeatedly clicks the same item. This is relatively subtle and unobtrusive.
One significant caveat: This only works smoothly with a single-level horizontal menu. If you add submenus and apply this same technique to the submenu items, the submenu does not disappear after the click event. The user has to click on the parent menu item again to close the submenu, which is obviously a pain. I've even gone so far as to reset the menu items property to an empty list (in my case it gets rebuilt immediately based on the property binding) and the submenu still stays open.
So, to sum, hijack the target prop of the menu items and store your parameters there. Add a phantom sub-item to each of these parent items to suppress the navigation behavior. Capture the target value in the onItemClicked event and there you can script whatever behavior you want, whether it's your own system.perspective.navigate call, or setting a property value elsewhere that stuff is bound to, or something else.
You are gonna be better of to use the title and / or path as a key to a list of variables/params. than trying to use the target
1 Like
Has there been any good fix for this that doesn't leave the submenu open? I would like to open a parameterized window from the horizontal menu component with sub menus.