[Feature-12835] Is there a way to call a popup from a menu tree?

Ignition Early Access
,
1

I have managed to open a view (that is configured in Page Config) from the Menu Tree in the same window and from the Menu Tree in a new tab.
Is there a way to open a view from the Menu Tree in a Pop Up window?
I was not able to do so from ‘target’ (not surprising, really).
I was not able to get the onSelect or onSubmit Events to fire from the Event Tree Container.
(onClicked worked, so some Events are working.)
Is there a way to know which Menu Item the user most recently clicked on?
I tried and failed to gather this from the onClick event.

2

No. Opening a Popup in Perspective requires you to execute either a script Action which calls the relevant method or a Popup Action. While you might want to open a Popup from the Menu Tree, you should question whether or not you should; I've never been to a site where when I clicked in a menu tree I was provided a Popup - mostly because you're not "navigating" to a Popup.

Not today. It sounds like we could swing that, so I'll open a feature request. It will be a low-priority, but someday it'll happen.

onSelect is for selecting as in "hold left-click and drag" selection - documentation isn't done yet so I'm not sure how it's used.
onSubmit is for form submission - which... I... don't even know how that would be used right now. Long-term it'd be used for validating (you guessed it) forms - as in

if not len(self.getSibling('TextField_0').props.text) > 8:
    apply_invalid_class_to_component_style('TextField_0')
1 Like
3

One more question, if that’s okay.

Is there a way for a Menu Tree’s target to affect an ‘Embedded View’ in the same View?

4

Please, ask all the questions you’d like.

No, a Menu Tree’s “navigation” will always be “Page”-scoped, which means that it will always take you to a new Page - not a View, which is what the Embedded View component is doing.

When using the Menu Tree (for project pages, not external urls), note that your values for target must start with either

  1. A slash - this denotes that the supplied url should be opened in the current tab
  2. No slash - this denotes that the supplied url should be opened in a NEW tab.

This leaves no wiggle-room for supplying Views, as we have no way to discern whether the supplied String (url) is a url or a View path.

Manipulation of the path of the Embedded View component is fairly straight-forward, and is probably best done with a Dropdown component. By supplying the Dropdown with label:value pairs where the value is a valid View path, it’s very simple to swap out the View displayed in the Embedded View component.

4 Likes
5

@cmallonee
Please, is there a way to apply an element state for the Menu Tree when a page is in focused?
It seems not to be stick to the applied CSS color after the page completes loading.

Your prompt response will be well appreciated.

6

It’s not immediately clear to me what you’re asking. Could you supply some steps that might help to clarify your issue or what you’re trying to accomplish? What is your end-goal or desired state?

7

@cmallonee

Thanks for the prompt response

My request is similar to the below link

I have created a menu tree and linked the items of the menu tree to target pages in my perspective project and it is working fine.
I applied an element state active on the menu tree and expects the text of the item to remain on “#CCFFFF” when the item is clicked but the link goes back to its white default color after the page has loaded.
I would appreciate if the selected item sticks to a particular color when page is active and goes back to its default white color when another item is clicked.

I hope this is achievable?

Regards,
Fisayo

8

I do not believe you would be able to do what you’re looking to accomplish with the current implementation of the Menu Tree.

The factor preventing this is how we apply the defined itemStyle object. We currently apply this singular style to all items at all levels. To accomplish what you’re trying to do would require either a props.selectedItemStyle or a nested items[x].items[y].items[z].item.itemStyle which could override the more generic props.itemStyle property (this would potentially allow for your use-case as well as “change the color of all pages I’ve been to already” .

I’ll speak with dev and see which option would be better long-term.

9

It looks like there is actually active development being done on introducing this very feature. It looks like a decision was made to introduce an item-specific style object. Once this code is in place, you should be able to use the component’s onSelect Event to then set the appropriate item’s style to your “selected” appearance.

Please follow the [Feature-14071] Menu tree Itemstyle css per item thread for more updates around this functionality.

2 Likes
10

Thanks for the update.
I’ll be expecting to see this feature soon

11

We added the onItemClicked component event to the Menu Tree component in 8.0.5.

1 Like