How to Create Wizard Interfaces in Retool

1// JS Query: validateStep1AndAdvance
2// Trigger: Custom 'Next' button in Step 1
3
4const isValid = step1Form.validate();
5
6if (!isValid) {
7  utils.showNotification({
8    title: 'Please complete this step',
9    description: 'Fill in all required fields before continuing.',
10    notificationType: 'warning',
11  });
12  return;
13}
14
15// Advance to step 2 (0-indexed)
16wizard1.setStep(1);
17
18// Access current step index anywhere:
19// {{ wizard1.currentStepIndex }}
20// 0 = Step 1, 1 = Step 2, 2 = Step 3, 3 = Step 4

1// JS Query: validateStep2AndAdvance
2// Trigger: Custom 'Next' button in Step 2
3
4const isValid = step2Form.validate();
5if (!isValid) {
6  utils.showNotification({
7    title: 'Please select a plan',
8    notificationType: 'warning',
9  });
10  return;
11}
12
13// Accumulate step 2 data
14await wizardData.setValue({
15  ...wizardData.value,
16  plan: step2Form.data.planSelect,
17  billingCycle: step2Form.data.billingCycleSelect,
18});
19
20wizard1.setStep(2);
21
22// In step 3 Next handler, also store step 1 and 3 data:
23// await wizardData.setValue({
24//   firstName: step1Form.data.firstNameInput,
25//   lastName: step1Form.data.lastNameInput,
26//   email: step1Form.data.emailInput,
27//   plan: wizardData.value.plan,
28//   billingCycle: wizardData.value.billingCycle,
29//   cardName: step3Form.data.cardNameInput,
30// })

1// Review step Text component values:
2
3// Account info summary:
4{{ `Name: ${wizardData.value.firstName} ${wizardData.value.lastName}` }}
5{{ `Email: ${wizardData.value.email}` }}
6
7// Plan summary:
8{{ `Plan: ${wizardData.value.plan} (${wizardData.value.billingCycle})` }}
9
10// Formatted plan price:
11{{ wizardData.value.plan === 'pro' ? '$29/month' 
12   : wizardData.value.plan === 'enterprise' ? '$99/month'
13   : '$9/month' }}
14
15// Hidden confirmation checkbox:
16// confirmCheckbox (required) — Hidden: false, Required: true
17// Label: 'I agree to the Terms of Service'
18// form4.validate() checks this before submission

1// JS Query: submitWizard
2// Trigger: 'Launch Account' button in Step 4
3
4const data = wizardData.value;
5
6// Validate review step (e.g., ToS checkbox)
7const reviewValid = confirmCheckbox.value === true;
8if (!reviewValid) {
9  utils.showNotification({
10    title: 'Agreement required',
11    description: 'Please accept the Terms of Service to continue.',
12    notificationType: 'warning',
13  });
14  return;
15}
16
17try {
18  await createAccount.trigger({
19    additionalScope: {
20      firstName: data.firstName,
21      lastName: data.lastName,
22      email: data.email,
23      plan: data.plan,
24      billingCycle: data.billingCycle,
25    }
26  });
27
28  utils.showNotification({
29    title: 'Account created!',
30    description: `Welcome, ${data.firstName}! Your ${data.plan} account is ready.`,
31    notificationType: 'success',
32  });
33
34  // Reset wizard
35  await wizardData.setValue({});
36  wizard1.setStep(0);
37  [step1Form, step2Form, step3Form].forEach(f => f.reset());
38
39} catch (err) {
40  utils.showNotification({
41    title: 'Account creation failed',
42    description: err.message,
43    notificationType: 'error',
44  });
45  throw err;
46}