Create a New Account Wizard

Adding a wizard component to your page can break complex tasks and data entry into simple steps. Use this guide to get started and find more advanced wizarding tips by heading over to our Skuid community.

Assumptions

Note

The steps below assume that you have a page with:

  • A list (a Table or List component) on a model that displays account names and information.
  • A model that displays contact information
  • A way to access contacts for individual accounts (for example, a row action that opens a drawer, a modal, or a sliding panel).

Data sources such as Salesforce have built-in entities to collect and contain account and contact information. The “create new record” process described below can be adapted to other types of data source entities.

Create a New Account

The steps below set up a step-by-step “create new record” process on the account page, using a modal and the Wizard component, and add associated contacts to that account.

Create two new models [[]]

It’s assumed that the page has both an accounts and a contacts model, but we need to clone each to create a new model. Why? The models used for the Wizard will need different properties and conditions from those used on the page, properties and conditions designed specifically to create new records. Safest approach? Duplicate both models under a new name to use in the Wizard, and make adjustments as needed.

Duplicate the accounts model [[]]

  1. Click copy_1 on the accounts model, to create a duplicate, then make the following property edits:
    • Model ID Give the mode a useful name to distinguish it from the accounts model used for the account list on the page, like AccountWizard.
    • Query on page load: Uncheck. This leaves the model is empty of data when the page is loaded.
    • Max # of records: 1
    • Create default row if model has none: Check.
  2. Add the fields desired for account record creation. Remember, the original model may only include a few fields to display, but when creating an account, users may want to capture more details about the account.
  3. Add a record ID field to the model so that when a record is created, the ID field is included.

Duplicate the contacts model [[]]

  1. Click copy_1 on the contacts model, to create a duplicate, then make the following property edits:

    • Model ID Give the model a useful name to distinguish it from the contacts model used for the account list on the page; something like ContactWizard.
    • Query on page load: Uncheck.
    • Max # of records: 1
    • Create default row if model has none: Check.
  2. Add the fields desired for contact record creation. Again, the original model may only include a few fields to display, but when creating a contact, users may want to capture more details about the contact.

  3. Add a record ID field to the model so that when a record is created, the ID field is included.

  4. Click add to Conditions to add a condition.

    This condition creates a connection between the new account created in the Wizard and the new contact. Without this, users can successfully create a new account and a new contact, but the contact will not be connected to the account.

  5. Set up the condition:

    • Field: AccountId
    • Operator: =
    • Value:
      • Content: Field from another model.
      • Source model: Select the duplicated account model (not the original account model).
      • Source field: Id
      • If no row in **source model, then …**: Deactivate this condition.
    • State: Always on.
    • Condition location: Server
  6. Click Save.

Create the trigger [[]]

Let’s use a Button Set to build a button that will allow users to kick off the new account process.

  1. Drag and drop a Button Set component onto the canvas, above the accounts table.
  2. In the General tab in the properties pane, set the following:
    • Model: Use the model for the accounts table.
    • Position: Left.
  3. The Button Set comes onto the page with one button. Click the newly created button.
  4. In the General tab in the properties pane, set the following:
    • Button label: Create New Account
    • Button icon (optional): Select an appropriate icon.
    • Button icon position: (optional) Place the icon on the right or left side of the button.
    • Aria Label: Create new account button

When clicked, this button will need to accomplish a several tasks, so let’s set up those actions:

  1. In the Actions tab in the properties pane, click add Add action to create the following actions:
    • First action: Ensures that the models to be used in the Wizard start empty each time an end user clicks the action trigger.
      • Action type: Remove all rows from model
      • Models to empty: The cloned account and contact models (not the originals).
    • Second action: After an account and contact are added using the Wizard, Skuid requeries the models on that page that display the list of accounts and the associated contacts. If there is any unsaved data in those models—for example, if the user was in the middle of editing the account or contact and then jumped into the New Account Wizard—that unsaved data will be deleted. This action protects the unsaved data from being lost.
      • Action type: Save Model Changes
      • Models to Save: The name of the original account and contacts models.
      • Roll back entire save on any error: Check.
    • Third action: Creates a new row on the cloned account model (for the new record).
      • Action type: Create New Row(s)
      • Model: The name of the cloned account model.
      • Place row at …: Start of Model data.
      • Have associated components initially show this row in …: Edit Mode.
      • Rows to use: Rows in context
    • Fourth action: Opens the modal and allows the user to enter record information.
      • Action type: Show Modal
      • Click Configure modal.
        • Drag and drop a Wizard component into the new modal
  2. Click Save.

With that, you have a button that safeguards any unsaved data from the page, ensures that the Wizard models are empty of data, and opens a modal.

Note

We’re putting the Wizard in a modal so that it’s hidden until the user opens it using the Create New Account button. Otherwise, the Wizard would take up space (and prove distracting) at the top of the page.

Configure the Wizard’s Step 1 [[]]

Now that we have our wizard component in the modal, let’s build that Wizard.

Note

When initially added, Wizards include two steps—that’s all we need for this project. To add additional steps, click add Add new step.

Add and configure a component [[]]

First: build the step that allows users to add a new account.

Note

Make sure you are working in the Wizard’s first step by clicking stepper 1.

  1. Drag and drop Add a Form component into your new Wizard.

  2. Click the Form and set its properties:

    • Model: The cloned Account model.
    • Show save and cancel buttons: Uncheck.
    • Default mode: Edit.
  3. In your new section, add sections and fields that will capture the necessary information for a new account.

    • Click the Add fields dialog, and choose the Model fields, then click the checkbox next to the desired fields to add them.

    Note

    If there is no checkbox next to a field, click add to access the checkbox.

    • Click Apply.
  4. Click Save.

Configure the Next button [[]]

Configure a button that lets users navigate to the next step.

  1. Click the Next button. In the General tab, edit:

    • Button label: Next Step.
    • Button icon: Choose an appropriate icon.
    • Button icon position: (optional) Place the icon on the right or left side of the button.
  2. In the Actions tab, add actions to the button

    Note

    There will already be a Run Wizard Action in place for the Next button, which is included in the Wizard by default. Position the first two actions indicated below before that action. (Click add Add action, then drag and drop the new action to the top of the list.)

    • First Action: Save all the data entered for the new account.
      • Action type: Save model changes
      • Models to save: The cloned account model.
      • Roll back entire save on any error: check
    • Second Action: Set up a new row in the contact model (prep for the next action).
      • Action type: Create new rows.
      • Model: The cloned contacts model.
      • Place row at …: Start of model data.
      • Have associated components initially show this row in …: Edit mode
      • Rows to use: Rows in context
    • Third Action: Navigate to the next step. The Run Wizard Action will already be included with the Next button, which should include the following settings:

      • Action type: Run Component Action.
      • Component: This should already be set to the Wizard component in the first step.
      • Action to run: Navigate to Step
      • Step ID: step2.
  3. Click Save.

Add and configure a Cancel button [[]]

Configure a second button that lets users cancel their work and return to the underlying page.

  1. Click on stepper 2 to render step properties.
  2. Click the add Add button option to add a second button.
  3. Click the newly created Step button. In the General tab, edit:
    • Button label: Cancel
    • Button icon: Choose an appropriate icon.
    • Button icon position: (optional) Place the icon on the right or left side of the button.
  4. In the Actions tab, add actions to the button:
    • First Action: Cancel all changes made in the Wizard.
      • Action type: Cancel model changes
      • Models to cancel: Both the cloned account model and the cloned contact model.
    • Second Action: Close the modal.
      • Action type: Close all modals.
      • Behavior: Close all.
  5. Click Save.

Configure the Wizard’s Step 2 [[]]

Done with the first step, time to build the second one!

Add and configure a component [[]]

Next, build the step that lets users add a contact to that account.

Note

Make sure you are working in the Wizard’s second step by clicking stepper 2.

  1. Drag and drop Add a Form component to the Wizard.

  2. Click the Form and set its properties:

    • Model: The cloned contact model.
    • Show save and cancel buttons: Uncheck.
    • Default mode: Edit.
  3. Add sections and fields that will capture the necessary information for a new contact. For this specific wizard, we need to include the First Name and Last Name, plus any other necessary fields from the cloned contact model:

    • In the Add fields dialog in the new section, click Model fields, then click the checkbox next to the desired fields.

    Note

    If there is no checkbox next to a field, click add to access the checkbox.

    • Click Apply.
  4. Click Save.

Delete default and format new buttons [[]]

  1. Click the Next Step button, then click delete Remove to delete it. (Since there isn’t a “next step” for this Wizard, you won’t be needing this.)

  2. Click the Back button. Make sure that its properties are:

    • Button label: Previous Step.
    • Button icon: Choose an appropriate icon.
  3. Also check the Actions tab for Ink Wizard component. Those properties should be:

    • Action type: Run Component Action
    • Component: This should already be set to the Wizard component in the first step.
    • Action to run: Navigate to Step
    • Step ID: step1.
  4. Click on stepper 2 to render step properties.

  5. Click the add Add Button option, to add a button.

  6. Click the white space at the top or bottom of the Wizard buttons to display the add Add Button option, then click it twice.

Configure a Cancel button [[]]

Click the new button immediately to the right of the Previous Step button, then follow the instructions in Wizard Step 1: Add and configure a Cancel button to configure this button as a Cancel button.

Configure a Save button [[]]

Configure the button that lets users save the new account and contact, and display them in the list on the underlying page.

  1. Click the third new button to the right of Previous Step. In the General tab, edit:
    • Button label: Save.
    • Button icon: Choose an appropriate icon.
  2. In the Actions tab, add actions to the button:
    • First Action: Save all the data entered for the new account and contacts.
      • Action type: Save model changes
      • Models to save: The cloned account and contact models.
      • Roll back entire save on any error: Check.
    • Second Action: Requery the models represented on the underlying page so that the newly-added account (and it’s contacts) are displayed.
      • Action type: Query models.
      • Models to query: The original account and contact models.
      • Query behavior: Standard - Completely Replace Data.
    • Third Action: Close the Wizard’s modal.
      • Action type: Close all modals.
      • Behavior: Close all.
  3. Click Save.

Preview and test

Now, try it out! The Wizard is a powerful and flexible tool for creating step-by-step workflows that save users time and frustration.

  • Need to add a few fields, or reorganize the Forms? Go ahead and edit the Wizard.
  • Want to add a third step? Click add Add new step and start building.