AX1506

Using a formatted grid for Wizard Panel content

When you place a Wizard Panel component on the form canvas, a Formatted Grid component is automatically added to the canvas at the same time. The default behavior of the Wizard Panel component assumes that you will use this grid to present the contents of each step.

When using this option, the [Value] column of the data source should contain Grid data source names. As the user moves through each step, the grid will be updated to use the specified data source for the current step.

Thematic formatted grids support a variety of user input controls, such as combo boxes, check boxes, text boxes, and buttons. Therefore it is possible to create very robust step contents using just this single component type. Using a grid is a good choice when your step contents are very structured—for example, using a column for labels and a column for inputs—and you need all steps in the wizard to be structured consistently.

Formatted Grid configuration

The default Formatted Grid component is configured as follows:

  • The Grid Formatting is set to Thematic.

  • The component-level Style is set to docked-to-container. This style positions the grid within the wizard and configures the size to fill the screen. It is recommended to leave this style as is.

    NOTE: If you are using a legacy skin (any skin except Axiom2018), then the component-level style is set to wizardpanel-content. This style serves the same purpose as the docked-to-container style, but uses a different name that is designed to work with the legacy Wizard theme. If you convert an existing form to use the Axiom2018 skin, you must change the style on the grid to use docked-to-container instead.

  • The Data Source is set to [WizardPanel1.SelectedValue]. This is special syntax that causes the grid to get the data source name from the Selected Value field of the Wizard Panel component (which by default is named WizardPanel1). This means that you do not have to set up this field with a formula. Note the following:

    • If you give the Wizard Panel a different name, you must update this syntax for the new name.

    • The Formatted Grid component will continue to show with a "missing data source" error until you populate the Selected Value field of the Wizard Panel component with the value for the first step (which must be a valid data source name).

  • All other Formatted Grid component properties can be set as desired.

Displaying wizard content in the grid

To use the grid to display the wizard content, you should do the following:

  • Create a Grid data source for each step of the wizard, and design each data source with the content necessary for each step. You may find it easiest to place each data source on its own sheet, and give each sheet and data source the same name, such as Step1. If the number of steps in the wizard changes dynamically, then you may prefer to use content-oriented names instead (for example, UserInfo for a step that gathers information about the user).

  • In the [Value] column of the WizardPanel data source, enter the Grid data source name that corresponds to each step, using the syntax SheetName!DataSourceName. For example, the first step might use a data source name of Step1!Step1.

  • In the Selected Value field of the Wizard Panel component, enter the value for the first step of the wizard. For example, Step1!Step1.

    This is not technically required, as the Wizard Panel will use the first step by default when the form is rendered. However, if the Selected Value field is left blank, then the Formatted Grid component will display with an error in the Form Designer, because it does not have an assigned data source. You may want to populate the Selected Value field just to resolve this error while you are working in the Form Designer.

Assuming that the Formatted Grid component is using the default [WizardPanel1.SelectedValue] syntax for the data source, this setup will cause the grid to dynamically change data sources as the user moves through each step.

When a user views the form, the Selected Value of the Wizard Panel component starts with the data source name of the first step. Therefore the Formatted Grid component will display the contents of that data source. As the user moves through different steps in the wizard, the Selected Value field will update with the appropriate data source name of each step, and the contents of the grid will also update accordingly.