Hey @petar.brkovic
Totally doable :
Prerequisites
- The Button require a boolean variant for enabling/disabling it
- A local variable for enabling/disabling the button (i.e
buttonEnabled
)
- A local variable to save the target page (i.e
targetPage
)
Cards
Add an “On Click” interaction on the first card, within it:
- Toggle its state so it looked selected
- Set variable
targetedPage
to the desired page
- Set variable
buttonEnabled
to true
Then duplicate this card and change the targetedPage
value for every duplicate.
Button
There are different ways to navigate to the desire page depending on preference and what you already built:
Classic navigation
Add an “On Click” interaction to the button, within it:
- Make a
if
statement for every different targetPage
possible value
- In the if statement add a “Navigate to”
if (targetPage == "page A")
Navigate to Page A
if (targetPage == "page B")
Navigate to Page B
...
or
Page is a component
If you can make the content of the page a component you may be able to bind targetPage
to page component variant, so it will automatically change to the desired content when you click on a card
Prototype — Design file
Thank you so much, that’s some amazing input, will give it a go!
If anyone is up for it, I’d love to see a video on this!
I think I’m trying to accomplish something similar.
I need to create a set of 3+ radio buttons where only one can be selected at a time—I’ve already got that working. However, I want the selected radio button to determine the navigation when clicking a “Next” button.
- If Radio 1 is selected, clicking “Next” should go to Page A.
- If Radio 2 is selected, clicking “Next” should go to Page B.
- If Radio 3 is selected, clicking “Next” should go to Page C.
Is this possible? And is this the same request as the one mentioned above?
I know I could fake it by linking each radio button to a separate frame where that button appears selected, and then linking “Next” from there—but that would create way more frames than I’d like.
In my case, I’ll have nine radio buttons, and while I do need nine separate destination pages (A-I), I don’t want to create an additional nine pages just to represent each radio selection before navigating to the final destination.
Ideally, there would be one page with all nine radio buttons, and depending on which radio button is selected, clicking “Next” would take the user directly to one of the nine destination pages (A-I). This way, there would be a total of 10 pages instead of 18. Hope that makes sense!
*** Update ***
I surprised myself and actually figured it out. Maybe I’ll create a video if I can find the time and if it’s helpful for others.