How to design click interaction and switch panels within Dynamic panel

Suruchika Singh shared this question 2 months ago
Answered

I'm attaching a screenshot of a pop-up on a page for a web app

1. How is the dynamic panel to be defined - is it within the page layers, or a separate panel in masters? how do you connect the two..or call the pop-up from the page?

2. How does one switch between different states of a dynamic panel? - as you can see I have 5 radio buttons and I'm looking at interaction to click each radio to show consequent changes on popup i.e. its panels


So far, after paying for Justinmind license so I can use all features, it has been extremely disappointing. Dynamic Panels are a mystery I'm trying to solve for past 2 days. The video tutorials are completely useless, because they don't use context at all - no beginner steps whatsoever. I have to say XD is far better in handling this, only feature I have to come to Justinmind is cause of interactive form elements. Overall this prototype tool simply is not user friendly.. at the least make better tutorials available for easy grasp

Comments (5)

photo
1

Thank you for your feedback. We're currently working on our tutorials and Justinmind's user interface to make them easier to understand.

As for your questions:

Dynamic Panels are a widget just like Rectangles or Images - just drag and drop it to the Canvas to add it to your prototype. The difference between dynamic panels and other widgets is that dynamic panels can have multiple states. They're kind of like mini-canvases you can switch between to show different content in the same area on one screen.

When you first place a dynamic panel on the Canvas, you'll see a little menu appear above it. Click on the '+' button in that menu to add another state to the panel.

To switch between panels during simulation, you'll need to use a Set Active Panel event.

We created and attached an example like the one you described. Here's how it works:

1. We added four radio buttons and one dynamic panel with four sub-panels (states). You'll use the radio buttons to switch between the different states in the dynamic panel.

2. We created On Click + Set Active Panel events on each radio button and have them switch to the corresponding panel. For example, if you click on the radio button for option 1, you'll switch to Panel 1. If you click on the radio button for option 2, you'll switch to Panel 2, and so on.

photo
1

Thank you for the answer, but thats not what I'm looking for. This part you describe is already understandable, what I need to know is - how do you include/call a dynamic panel into a canvas. When i create the dynamic panel within a artboard, I can't figure how we need to switch between panels within the dynamic panel. For e.g. I have page in background, and a I need to show a pop-up/modal with about 4-5 radio button options to choose from. I know how to trigger the pop-up, but I'm clueless how to enable interaction with radio buttons and show 4 different states of the pop-up when user clicks. Can you help?

photo
1

The dynamic panel will automatically be on the Canvas loaded to its default state (Panel 1). I'm not quite sure how the example you've described is different than the example I attached - would you be able to explain a bit more about what you're looking for? Maybe attach and image/gif of what it would look like?

photo
1

Hi, figure 1 is my situation right now. I have the entire selection/radio options stuff on a pop-up. I'm struggling to trigger opening the pop-up itself on the page.. which would ideally have the embedded dynamic panel among the layers as you demonstrated in your file.

2nd issue is I think your demonstrated way will only work if I changed the layout to Figure 2, which is still doable. But my problem still remains about how to get the pop-up appear - do I make it a separate panel? then how do I call it on the UI that you see in background? Overlays? followed all tutorials..same steps but no outcome.

Btw, setting trigger PageOnload doesn't seem to work either, I've tried it multiple times, the s/w is quite glitchy I must say..following your tutorials isn't helping cause many times I don't find the controls in the same place, most times even after following all steps I get no results. Like the overlay bit, I've pulled out all my hair in the past 3 days.. frustration at its peak..im sorry to say. You guys must refund me, I can't find any people using this software to be honest..may cause its way too glitchy for the price.

photo
1

I think I understand what you're looking for - a pop-up that you can show on the screen, which contains the different radio buttons and their corresponding panels? If so, the attached example should do what you'd like. The entire pop-up is a group, which is marked as hidden in the Properties palette. It's shown by clicking a button on the screen. Within that pop-up is the dynamic panel and the radio buttons.

photo