Creating Wizards Guide

This article will guide you through creating a wizard from start to finish. The only code needed for wizards is creating TSQL stored procedures to do something with the collected information from the wizard.

Define a new wizard

The first step is to decide which functionality to add the wizard. Navigate to the UX Creator app and select the functionality you would like to add a wizard. This guide will use Server Owner as an example.

Graphical user interface, text, application, email  Description automatically generated

Once on your desired functionality, select the Forms tab and select the Add new Form Definition button.

Graphical user interface, text, application, email  Description automatically generated

Now specify the name of your wizard in the Form Name field, select Wizard from the Form Type dropdown field, and select the Save button.

Creating a wizard form in trellispark UX Creator

A wizard has now successfully been defined.

The next section will focus on configuring wizards.

Configure wizard

Once you have successfully defined a new wizard you can begin configuring the wizard to your liking.

Converting Wizard Data to Concept Form

If you would like the data collected from the wizard to be converted into a concept form you can specify a concept in the Convert Wizard Data to Concept Form field.

An example use case for this would be you have a concept called Report, and it has a number of fields that should be filled out to complete a report. A wizard is a great way to walk the user through the process of filling out the report step by step. Once they have finished the wizard if the Report concept was specified in the Converting Wizard Data to Concept Form field then a Report instance will be created using the data collected from the wizard.

Adding steps

To add steps to a wizard is the same process as adding tabs to a form. Because of this the terms Steps and Tabs are used interchangeably.

Create the first step in your wizard by selecting the Add new Tab Definition button available on the Overview tab of the wizard.

A screenshot of a computer  Description automatically generated

The next step is to specify the tab number in the Tab field – This will determine the order of the steps. Next, specify a Tab Name – This will be the name of the step that will appear at the top of the wizard, it can be anything you want.

Graphical user interface, text, application  Description automatically generated

You can add Row Definitions if you would like, however they are not needed. The remaining fields are for calling TSQL and making API calls and will be covered in their respective sections later.

Once you have created all your wizard steps select the Done button, all the steps you created will be listed in the Tabs childlist. For this example, three steps have been created. The number of steps a wizard can have is up to you, so long as there is a minimum of one step.

Text, application, email  Description automatically generated

The next step is to create the possible states for the wizard and link them to your created steps. Navigate to the Workflow tab to get started.

On the Workflow tab select the Add new Allowed State button. If you are given an error message, simply select OK. The reason for the message is because the Default State is a required field – Creating a new Allowed State will let you specify a Default State.

Graphical user interface, text, application, email  Description automatically generated
Graphical user interface, application  Description automatically generated

In the State Name field enter the name of your first step exactly how it is spelt. For this example, the first step is called “Step One”. Once finished select Done to be returned to the wizard instance.

Graphical user interface, application  Description automatically generated

You will now see your new state listed in the Allowed States childlist. Update the Default State field and select the state you just created.

Graphical user interface, text, application, email  Description automatically generated

Now add a state for every other step you created. Additionally, you will need to create one more state called Complete. This is so when the wizard has finished it will move to that state so it will no longer be visible on the Incomplete Wizards list.

Your allowed states should now match with the steps you created except for the Complete state.

Graphical user interface, application  Description automatically generated

That is all that is needed to add steps to wizards!

Wizards are displayed in a popup window. You can specify the size of the window if you would like by entering a height and width value that will be read as a percentage. The default size if no value is entered in 90% height by 90% width.

On the Overview tab of the wizard instance specify the height and width you would like for the wizard’s popup window then select the Save button.

Graphical user interface, text, application, email  Description automatically generated

Targets

There are a few places that present the opportunity to execute a target from a wizard as listed below:

  • When the Done button is selected.
    • Only visible on the last step of the wizard.
  • When the Previous button is selected.
    • Only visible when there are at least two steps in a wizard and the user is on step two or higher.
  • When the Next button is selected.
    • Only visible when there is more than one step in the wizard and the user is not on the last step.

Where to specify Target

To specify the target to be executed when the Done button is selected navigate to the Workflow tab of the wizard instance and populate the Finish Command field.

To specify the target when the Previous and Next buttons are selected navigate to the Overview tab of the wizard instance and select the specific Step/Tab that you want to add the target to.

IMPORTANT NOTE: Previous and Next button targets are specified on each specific Step/Tab giving the ability to call different targets on each step.

Graphical user interface, text, application, email  Description automatically generated

Next the target information fields when either the Next or Previous button is selected on this step.

IMPORTANT NOTE:
The Next target will only be executed if this is NOT the last step of the wizard. The Previous target will only be executed if this is NOT the first step of the wizard.

Updated on October 16, 2023

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support

Leave a Comment