Create a New Account Wizard

Imagine you’ve provided users with an account page that displays basic account information. Perhaps there’s a Deck at the top of the page flagging hot accounts, and each individual account record includes a drawer that displays the account’s contacts. Maybe users can even open a sliding panel to see full account details.

Sounds like a useful page, doesn’t it? This is a great place for users to manage their daily workflow, so it’s smart to allow them to stay there as much as possible.

But what happens when the user wants to add a new account to the mix? If they Add a Record to the list on the page described above, they can only capture data for the fields that are displayed in the accounts Table. And how do they add the account’s contacts and associate them with the account? Do they need to leave the accounts page to make these updates?

No. With a Wizard component, users can do it all on one page!

Assumptions

Note

The steps below assume that you have a page with:

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

Data sources such as Salesforce and Microsoft Dynamics have built-in entities to collect and contain account and contact information. However, the “create new record” process described below can easily be adapted to create new records for 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 popup 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? Clone both models under a new name to use in the Wizard, and make adjustments as needed.

Clone the accounts model

  1. Click fa-code-fork on the accounts model, 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; something like AccountWizard.
    • Query on Page Load: Uncheck this so 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 company.

    Note

    Be sure to add the record Id field to the model.

Clone the contacts model

  1. Click fa-code-fork on the contacts model used on the page, 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.

    Note

    Be sure to add the record Id field to the model.

  3. Click fa-plus-circle next to Conditions to add a condition.

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

  4. Set up the condition:

    • Field: AccountId
    • Operator: =
    • Value:
      • Content: Field from another model.
      • Source Model: Select the cloned account model (not the original account model).
      • Source Field: Id
      • If no row in Source Model, then …: Deactivate this condition.
    • State: Always on.
  5. Click Save.

Create the trigger [[]]

Next, users need a “call to action.” Let’s use a Button Set to build a button that will kick off the new account process.

  1. Drag and drop a Button Set component onto the canvas, above the accounts table.
  2. In the Basic tab in the properties pane, set the following:
    • Model: Use the model for the accounts table.
    • Position: Left.
  3. Click fa-plus-circle Add Button to add a button to the Button Set.
  4. Click the newly created button.
  5. In the Basic tab in the properties pane, set the following:
    • Button Type: Run Multiple Actions
    • Button Label: Create New Account
    • Button Icon (optional): Select an appropriate icon.

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 fa-plus-circle Add Action to create the following actions:
    • First action: Ensures that the models to be used in the Wizard start empty each time a 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 popup and allows the user to enter record information.
      • Action Type: Show Popup
      • Click Configure Popup.
        • Drag and drop a Wizard component into the popup
  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 popup.

Note

We’re putting the Wizard in a popup 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[[]]

At the end of the fourth action in the last section, we pulled a Wizard component into the popup, and now it’s time to build that Wizard.

Note

When initially added, Wizards include two steps—that’s all we need for this project. To add additional steps, click fa-plus-circle 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 fa-road 1.

  1. Drag and drop a Field Editor component into the area marked Drop Component Here.

  2. Click the Field Editor and set it’s properties:

    • Model: The cloned Account model.
    • Show Save/Cancel: Uncheck.
    • Default Mode: Edit.
  3. Add sections, columns, and fields that will capture the necessary information for a new account.

    • In the Add Fields dialog, click All Fields, then click the checkbox next to the desired fields.

      Note

      If there is no checkbox next to a field, click fa-plus-circle to access the checkbox.

    • Click Apply.

  4. Click Save.

Configure the Next Step button [[]]

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

  1. Click the Next Step button. In the Basic tab, edit:
    • Action Type: Run Multiple Actions.
    • Button Label: Next Step.
    • Button Icon: sk-icon-arrow-right.

Wondering why we’re modifying the Next Step button that comes with the Wizard, instead of using the default configuration? That button is configured to do one thing—move users to the next step in the Wizard—but we want it to do several things, so we need change the action type from Navigate to Run Multiple Actions.

  1. In the Actions tab, add actions to the button:
    • 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 row(s).
      • 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.
      • Action Type: Navigate to Step.
      • Step Id: step2.
  2. 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 the white space below the Next Step button to display the fa-plus-circle Add Button option, then click it.
  2. Click the new button. In the Basic tab, edit:
    • Action Type: Run Multiple Actions.
    • Button Label: Cancel
    • Button Icon: sk-icon-refresh
  3. 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 popup.
      • Action Type: Close all Popups.
  4. 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 fa-road 2.

  1. Drag and drop a Field Editor component into the area marked Drop Component Here.

  2. Click the Field Editor and set its properties:

    • Model: The cloned contact model.
    • Show Save/Cancel: Uncheck.
    • Default Mode: Edit.
  3. Add sections, columns, 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, click All Fields, then click the checkbox next to the desired fields.

      Note

      If there is no checkbox next to a field, click fa-plus-circle to access the checkbox.

    • Click Apply.

  4. Click Save.

Delete default and format new buttons [[]]

  1. Click the Next Step button, then click fa-times-circle to delete it. (Since there isn’t a “next step” for this Wizard, you won’t be needing this.)
  2. Click the Previous button. Make sure that its properties are:
    • Action Type: Navigate.
    • Button Label: Previous Step.
    • Button Icon: sk-icon-arrow-left.
    • Step Id: step1.
  3. Click in the white space below the Previous Step button, then click fa-plus-circle Add Button twice.

Configure a Cancel button [[]]

Click the second new 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 third new button to the right of Preview Step. In the Basic tab, edit:
    • Action Type: Run Multiple Actions.
    • Button Label: Save.
    • Button Icon: sk-icon-save.
  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 popup.
      • Action Type: Close all popups.
  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 Field Editors? Go ahead and edit the Wizard.
  • Want to add a third step? Click fa-plus-circle Add New Step and start building.

File Upload in Wizards

When creating a new record, users may want to attach a document to the record using the File Upload component.

However, when using the File Upload component in a Wizard that creates a new record—like the example on this page—the File Upload component cannot attach the uploaded file to a newly-created record until the record is saved.

Use the File Upload Component in a Wizard [[]]

Assumptions

Note

This assumes you have a Wizard with a step that involves creating a new record, followed by a step to attach a file to that record.

Set the Wizard properties

  1. In the Wizard’s properties, check Defer Rendering of Step Contents.

Build the record creation step

Build a step that creates a record, such as Step 2 from the above Wizard instructions. But instead of removing the Next Step button and completing the Wizard with a Save button, do the following:

  1. Click the Next Step button. Edit the button:
    • Action Type: Run multiple actions.
    • Button Label: Next Step.
    • Button Icon (optional): Choose an appropriate icon.
  2. Click the Actions tab.
  3. Click fa-plus-circle Add Action twice and edit:
    • First Action: Save the new record.
      • Action Type: Save Model changes.
      • Models to Save: Select the model associated with the new record created in this step.
      • Roll back entire save on any error: Check.
    • Second Action: Navigate to the next step.
      • Action Type: Navigate to Step.
      • Step Id: The Id of the next step.

Build additional steps

Continue building the Wizard and feel free to include a File Upload component in any of its later steps.

Now that the newly created record has been saved, the File Upload component is able to attach a file to the record.