"Modal" in Vision

I’ve searched for how to create modal windows in Vision, and being generally lazy, did not want to undertake the work needed to make a go of that. So coming out of what I was trying to accomplish, I thought I would share my solution, hoping that it might be useful to someone else, and certainly making it open for critique. In short, I needed to display a window that allowed multiple user selections, after the user clicks on an OK button. This is where a modal window would have come in handy. Instead, I realized that for this purpose I could just use the existing window, but would need some way to present a PowerTable and a button in a way the prevents the user from interacting with anything else on the window (thus, modal-ish). I ended up using a container, but found that even with the container on top of buttons (which are not visible behind the container), the buttons could still be clicked. I could have hid all the controls based on the visible property of the container, but that seemed messy. I added a Power Table, and realized that if I made it big enough, it managed to prevent access to controls behind the container. But I didn’t want a Power Table that big. So then I was trying to figure out what I could do to the container to prevent access to the controls behind it. I found out that if I put something in the Mouseover Text property, that worked. But then I had mouse over text, which I didn’t like. So then I thought to try adding controls into the container to see what else might work. After trying several, I settled on a Template Repeater - not for its’ functionality, but because it prevents the user from interacting with anything behind the container. I then have my Power Table “Moved to Front” so that it is on top of the Template Repeater, and now I have something that overlays the controls on a window and simulates a modal window in the way that I need it to. There is still minor design cleanup to do, but I think I was able to get the functionality I was after. Now when the user click OK, I simply make the container visible. And when they do what they need to there and click OK, I make the container not visible. Anyway, I hoep that helps someone. Or, maybe you all have some experience with that and can tell me why that’s a bad/good idea, or share some other advice.

That is a very very long paragraph :slight_smile: might pay to add some formatting and/or dot points.

Also, to prevent on click actions from passing through a component, you can just add a bogus script to the container/component’s onClick event handler e.g.

pass

To make something modal, I have a rectangle at least the size of the window set to semi transparent black, add a bogus onClick action to it and bind its visible property to a client tag called something like modalPopupActive. Then on any popup I want to be modal, I add a script to the startup and shut down events to toggle this client tag on and off. Instead of a bogus script, you can also toggle the modal tag off to close the modal popup to make it background dismissable.
Make sure to lock the modal rectangle so that you don’t inadvertently move it around all the time, and make sure that it’s always at the top of the z order

3 Likes

All good information. Especially the “pass” concept. Thanks for the feedback!