For work, I need to make a site map that has the ability to highlight certain actions/paths a customer could make. In the images below, I want to click the button that highlights the path the customer would take for that action. I tried to have a mask hidden, then bring it to front and then bring all the elements I want highlighted in front of the mask but you cant target the connectors for any interactions. I know I could get my desired outcome with using lines instead of connectors but the site map I am working on is large and will have changes. Using just lines creates too much rework. Thanks for any suggestions!
Interactive Flowchart/Site Map
mbc66
#2
I’ve had to do something like this in the past, where I wanted to identify and highlight a path by selecting box widgets and connectors, changing their color, border, shadow, etc. I could assign a selected style to normal widgets but not the connectors, nor could I target connectors (which is odd because they can be named.) I ended up not worrying about the connectors and just highlighted the boxes. It worked well enough to see and understand the path, though I didn’t have a mask/scrim. In a similar situation I did use a scrim to help block out a very complicated flowchart. I only had one “happy path” to call out, so I grouped the boxes (screenshot images actually) along with their connectors. So basically, I would show the scrim with “bring to front” option, then bring the group of boxes and connectors to front.
If you have multiple path examples with overlapping boxes, e.g., showing the path from the topmost to bottommost box, this basic approach won’t work so well. You could duplicate widgets, including connectors, as needed and get clever with hiding and showing all the groups. Or, you could duplicate all your boxes and connectors, make a dynamic panel, duplicate the panel state to as many states as you need to show all your paths, then for each “path state” delete the boxes and connectors not in that path. So, you’d have your base set of boxes and connectors, always shown, and a “path panel” directly in front of it, either hidden or set to a specific path. You could set the dynamic panel to have a partially opaque fill (set it for each state) that would serve as the mask/scrim, too. Or, you could use this dynamic panel approach with just the connectors, I suppose. …Any of these workarounds may end up being as much work as using lines instead (sorry!)