Skip to main content
Question

Help with variables


LukasR

I’m working on prototype for booking activities with use of boolean variables to toggle layer visibility.

I have a list of cards on frame one that if one is clicked, the prototype navigates to new frame where the booking flow is split into two overlays. First overlay is to specify child, days of the week and time, second is for confirmation. If I click “x” on second overlay, and try another booking, it does not work, because the toggle leave the layer permanently visible.

The layer visibility is toggled by set variable and it is used to set visibility on for my avatar for teacher and and small card with details of booked activity.

The question is, wich way should I write contitional to achieve that layer visibility of avatar and card will be reset.

Can anyone explain this to me? Thank you in advance.

This topic has been closed for comments

7 replies

Vishal_Ramawat

Do you need to navigate to another page to show overlays? If not, you can call the overlays from 1st page when you click the card.
The first overlay would have the details, click next and you can swap the overlay for confirmation.
On closing the confirmation overlay (clicking ‘x’) you can either swap the overlay to details or just close the overlay while resetting the variables to default.

A screenshot, if possible, would be helpful to understand the situation better.


LukasR
  • Author
  • 3 replies
  • May 9, 2024

Hi, thank you for reply. I managed to set it this way before I wrote the post, here is a series of screenshots to demostrate the functionality.

The problem is, that I need to fix layer visibility tied to boolean variables. If I try the prototype flow once, everything works. However, second time I try, the problem occurs.

I try to achieve layer visibility on second (picture of activity, teacher) and last screen (activity card + days on the card).

I have trouble with writing conditional for this situation.


Vishal_Ramawat

I think you have made the flow complex by using screens for overlays.
I would suggest that you remove the background of “Pay and Book” screen and call that frame as an overlay on clicking Book Activity.
When you click Pay and Book, you simply swap the overlay with Done overlay (remove the background and use frame as overlay).
This way you will have better control on variables and the flow.

Looking at your flow, you click Painting> Book Activity > Pay and Book > X
When you repeat this, the issue arises, right?
Because in Second flow I see category as Craft, for Ceramics Course, but you have pointed that it’s not.
Also, it seems that you have 2 pics for instructors, which shouldn’t be the case?


LukasR
  • Author
  • 3 replies
  • May 9, 2024

Correct. The two photos for instructor is also a problem.

Great advice with the overlay problem. This simplyfied the flow and made the prototype faster. Thank you for that. I was convinced, that for overlay I should use full frame, instead of the way you described.

Now The only issue I have is that second time i try to book, the flow is broken, because of two pictures and also on last overlay, it shows last booked card and new one.

To explain, cards are on separate frames - for male and female versions, and each activity - 8 types in total, therefore 16. I plan to make it 24, because I need one neutral series for when no gender is selected in onboarding.

Can I simplyfy this? For exapmle, create three cards, where will be toggled data based on conditionals? - with this question, is there a way to make the prototype duplicate card to show it on “booked page” in some autolayout?


Vishal_Ramawat

You can have multiple versions for Profile pics, but it would be difficult to get a random picture from a set (m/f/n).
Anyways, you can create component set of profile pics, and assign a variable to the instance to select the state.
Create 3 components each with 8 Variants for each set. Then combine these 3 components into single component called profile pic and each variant named as m/f/n.
So, on Onboarding screen, if user selects Female, you set the string to “f” which is linked to the instance, with a Variant ‘f’. This changes your first component to all female pics. Then you can use if condition to select one of the 8 pics based on selected activity or whatever logic you want to use.
I hope this will sort it out.


LukasR
  • Author
  • 3 replies
  • May 13, 2024

Thank you Vishal. Could you please help me with writing the conditional for the scenario of booking success?

I´ve created all the cards that represents each activity also with versions for each Gender m/f/n and these should be visible only on Booked page as a result of booking success - Clicking Book and Pay. All cards have boolean variable applied has"activity name" into layer visibolity set to false - created specificly for the type and gender respectively. I want to write conditional, however I honestly have no Idea how to that.


Vishal_Ramawat

Hi Lukas,
I sure could help but, I would need access to your screens (can dm me). If you don’t want to disclose the project, you can copy paste the relevant screens in new file and share that.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings