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

**URL:** <https://forum.finsweet.com/t/onboarding-flow-not-updating-after-data-loads-variable-recalculation-not-triggering-ui-update-in-webflow/6518>\
**Category:** Wized\
**Created:** [December 6, 2025, 8:02pm UTC](https://forum.finsweet.com/t/onboarding-flow-not-updating-after-data-loads-variable-recalculation-not-triggering-ui-update-in-webflow/6518 "2025-12-06T20:02:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kizzle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/kizzle/32/5460_2.png) [@kizzle](https://forum.finsweet.com/u/kizzle)\
**Post date:** [December 6, 2025, 8:02pm UTC](https://forum.finsweet.com/t/onboarding-flow-not-updating-after-data-loads-variable-recalculation-not-triggering-ui-update-in-webflow/6518/1 "2025-12-06T20:02:39Z")

</div>

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](https://app.wized.com/preview/RKgaixoKR93WPA1RT20Q)

## 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

```auto
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

````auto
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:

- ✅ Backend (Xano) updates correctly - I can see fields like `cal_confirmed` update in real-time

- ✅ The variable function calculates the correct step on the second run

- ✅ Cookie data shows the correct values after updates

- ❌ 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](https://app.wized.com/preview/RKgaixoKR93WPA1RT20Q)

- **Cookie/storage used** : `c.userXanoData`

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

---

<div class="post-metadata">

**Author:** ![elvisben](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/elvisben/32/3990_2.png) [@elvisben](https://forum.finsweet.com/u/elvisben)\
**Post date:** [December 8, 2025, 6:26am UTC](https://forum.finsweet.com/t/onboarding-flow-not-updating-after-data-loads-variable-recalculation-not-triggering-ui-update-in-webflow/6518/2 "2025-12-08T06:26:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kizzle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/kizzle/32/5460_2.png) [@kizzle](https://forum.finsweet.com/u/kizzle)\
**Post date:** [December 9, 2025, 1:14am UTC](https://forum.finsweet.com/t/onboarding-flow-not-updating-after-data-loads-variable-recalculation-not-triggering-ui-update-in-webflow/6518/3 "2025-12-09T01:14:46Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![elvisben](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/elvisben/32/3990_2.png) [@elvisben](https://forum.finsweet.com/u/elvisben)\
**Post date:** [December 9, 2025, 6:58am UTC](https://forum.finsweet.com/t/onboarding-flow-not-updating-after-data-loads-variable-recalculation-not-triggering-ui-update-in-webflow/6518/4 "2025-12-09T06:58:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kizzle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/kizzle/32/5460_2.png) [@kizzle](https://forum.finsweet.com/u/kizzle)\
**Post date:** [December 9, 2025, 3:37pm UTC](https://forum.finsweet.com/t/onboarding-flow-not-updating-after-data-loads-variable-recalculation-not-triggering-ui-update-in-webflow/6518/5 "2025-12-09T15:37:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kizzle](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/kizzle/32/5460_2.png) [@kizzle](https://forum.finsweet.com/u/kizzle)\
**Post date:** [December 10, 2025, 1:01pm UTC](https://forum.finsweet.com/t/onboarding-flow-not-updating-after-data-loads-variable-recalculation-not-triggering-ui-update-in-webflow/6518/6 "2025-12-10T13:01:06Z")

</div>

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.