Onboarding Flow Not Updating After Data Loads - Variable Recalculation Not Triggering UI Update in Webflow

Wized
1

I have a multi-step onboarding flow where a variable calculates which step to display based on user data from Xano. The variable recalculates correctly when data loads, but the UI doesn’t update to reflect the new step.

Read only link for Wized project: Wized

Setup

  • Backend: Xano

  • Frontend: Webflow + Wized

  • Payment: Stripe

  • Calendar: Nylas integration

The Flow

5-step onboarding process:

  1. Purchase calendar addon (Stripe checkout)

  2. Confirm calendar and availability (Nylas + Google)

  3. Connect Stripe for payouts

  4. Review profile information

  5. Sign contract

Technical Implementation

Variable: v.onboarding_step_logic

This variable contains a function that determines the current step based on user data:

typescript

console.log("Running onboarding step function with:", c.userXanoData);

if (!c?.userXanoData?.calendar_addon) {
  console.log("Returning step: ", 0);
  return 0;
} else if (
  !c?.userXanoData?.config_id ||
  !c?.userXanoData?.cal_confirmed
) {
  console.log("Returning step: ", 1);
  return 1;
} else if (
  !c?.userXanoData?.stripe_account_id ||
  c?.userXanoData?.stripe_account_id === ""
) {
  console.log("Returning step: ", 2);
  return 2;
} else if (!c.userXanoData?.profile_confirmed) {
  console.log("Returning step: ", 3);
  return 3;
} else {
  console.log("Returning step: ", 4);
  return 4;
}

Function: onboarding_step_logic

This function shows/hides step UI elements based on the current step:

typescript

const steps = document.querySelectorAll(".step_wrap");
const currentStep = v.onboarding_step;
console.log("Current step is: ", currentStep);

steps.forEach((step, index) => {
  const contentWrap = step.querySelector(".step_content-wrap");
  const statusTag = step.querySelector(".step_status");
  if (index !== currentStep) {
    contentWrap.style.display = "none";
  } else {
    contentWrap.style.display = "block";
  }

  if (index < currentStep) {
    statusTag.classList.add("complete");
    statusTag.textContent = "Complete";
  }
});
```

## The Problem

### What's Happening:
1. **Page loads** → `c.userXanoData` is `undefined`
2. **`v.onboarding_step_logic` runs** → Returns step 0 (because all data is undefined)
3. **UI displays** → Shows step 0
4. **User data request completes** → `c.userXanoData` now has actual values
5. **`v.onboarding_step_logic` recalculates** → Returns step 1 (correct step based on data)
6. **UI does NOT update** → Still shows step 0

### Console Evidence:
The function runs TWICE on page load:

**First run (data not loaded):**
```
Running onboarding step function with: undefined
=== DEBUG ONBOARDING ===
calendar_addon: undefined
config_id: undefined
cal_confirmed: undefined
stripe_account_id: undefined
profile_confirmed: undefined
======================
Returning step: 0
```

**Second run (data loaded):**
```
Running onboarding step function with: {Proxy Object with actual data}
=== DEBUG ONBOARDING ===
calendar_addon: true
config_id: "0bbaf313-184c-41a9-be71-800921aa0cee"
cal_confirmed: false
stripe_account_id: undefined
profile_confirmed: undefined
======================
Returning step: 1

What I’ve Verified:

  • :white_check_mark: Backend (Xano) updates correctly - I can see fields like cal_confirmed update in real-time

  • :white_check_mark: The variable function calculates the correct step on the second run

  • :white_check_mark: Cookie data shows the correct values after updates

  • :cross_mark: UI does not re-render when the variable recalculates

What I’ve Tried

  1. Using URL query parameters (works but breaks on page refresh)

  2. Removing query parameter dependencies from the logic

  3. Adding data validation checks to wait for data to load

  4. Extensive console logging to track execution

The Question

How do I make the UI function re-run when v.onboarding_step_logic recalculates?

The variable correctly updates from step 0 to step 1, but nothing tells the UI display function to check the variable again and re-render the steps.

Should I be using a different pattern entirely for multi-step flows?

Environment Details

  • Read only link for Wized project: Wized

  • Cookie/storage used: c.userXanoData

Any guidance on the proper way to handle variable-dependent UI updates in Wized would be greatly appreciated!

2

Hello @kizzle

Welcome to the Wized forum!

Thank you for the detailed project description - I’ve been able to look through your project.

I think this is the logic happening: the v.onboarding_step_logic only has one dependent variable that Wized can calculate if it changes which is v.onboarding_step and that variable in turn is dependent on c.userXanoData. The cookie is only set after the Xano_Auth request runs successfully - you can correct if this interpretation is wrong

The only issue happening might be the data never changes and their respective values are still undefined - could you share any test credentials I can run through the logic with?

3

Hey @elvisben that interpretation seems correct to me. A lot of this project was developed by a 3rd party dev that I contracted, so I’m still learning some of the logic – please pardon me if I confirm something now that later turns out not to be true.

By test credentials, do you mean credentials to Wized or the website?

4

The website - so that I can access the multi step form

5

Hey @elvisben I DMed you the test credentials and a screenshot of the Xano record.

1 Like
6

To close the loop on this, figured out it was a code error (error in a line of code) and once I removed that the flow worked fine.