Advanced prototyping problem

Just to verify, you want the user to open a modal window (overlay) to do a task and if that task is completed you want to show the “completed” badge. But if the user closes the modal window before completing the task, you want the task to still show the “incomplete” badge, right?

What you can do is have the badges that display the state of the task in a component called “TaskState”. The component has 2 variants: “State: Complete” and “State: Incomplete”

On the instance of TaskState, assign a String variable (For ex. “TaskState”) to the variant state.

The Variables icon shows up when you hover over the space after the variant name:

It should end up looking like this:

When the user opens the modal, you don’t want to change the state right away, so when the user completes the task, on the final button, add the following:

On click
Set variable “Taskstate” to “Complete”
Close Overlay

(You can have more than one interaction on an action like “OnClick”, use the + button on the top right of the Interactions pane to add another interaction, it won’t work properly if you have two "OnClick"s)

You have several tasks in your list, so I would set up variables for each one of them:

• TaskAccountCreation
• TaskVerifyInfo
• TaskVerifyID
• TaskAddPayment

This way you can also hide the whole tasklist with a conditional:

Create a boolean variable for ShowTaskList and assign it to the layer
(This is a little hidden: Right-click the eye icon for the layer. And you need to have at least one boolean variable in your Local Variables for the popover to show up)

Add an Conditional interaction to the final button that you have on each task (The one that has the interaction to set the task to completed)

If TaskAccountCreation == “Completed” AND TaskVerifyInfo == “Completed” AND TaskVerifyID == “Completed” AND TaskAddPayment == “Completed”
Set Variable ShowTaskList to False

Else
Set Variable ShowTaskList to True

This way you could also show/hide a banner on a different page (Just assign the exact same boolean), or you can have a conditional interaction on a button that opens a popup that tells the user to complete the tasks before they can use the site.

Thanks! I’ll be trying this soon and let you know whats up. 🥰

Edit: why can’t I use variables on variants?
the variants had incomplete and complete states.

can I invite you to my project file?
if you don’t mind if you have spare time.

You can. In order to manipulate variants with variables you need to assign a String variable to the variant of the instance.

The Variable and the Variant Name need to match exactly. If the name of the variant is “Incomplete”, the String variable needs to have the value of “Incomplete”.

Sure, message me through my profile here? I’d rather not put my e-mail in a forum. 🙂

here is my project I’ll allow you to edit once you’re there

are you in the file yet? I saw a person named @chukwudi in my file

nhalfi hi-fi yea i got to open it to check out your work but it required some access from the owner

sorry about that

@Bauke_Schildt

This is not cool. You came here asking for help, posted the link to your file (which is public), and now you want to be rude?

Be a better human.

I only allow one person i know that wanted to help.
if the dude just wants to mess my Design system by spamming me with edit permissions.

then out.

That is not the attitude to bring to a forum.

Hi, yeah, you’re going to need to assign them all different Variable names. Like in the second part of my answer:

Like Task01, Task02 etc, or:

• TaskAccountCreation
• TaskVerifyInfo
• TaskVerifyID
• TaskAddPayment

Sorry if that wasn’t clear.

ok, I guess I’d have to end the question there.
thank you for your helpful answers. 👋