AX1507

Using panels for Wizard Panel content

As an alternative to the default Formatted Grid component, you can use a series of Panel components to define the contents of each step in the wizard. Each step in the wizard should have a corresponding panel that contains the child components used to gather the necessary user inputs for that step, or to present information for the step.

When using this option, the [Value] column of the data source should contain Panel component names. As the user moves through each step, the panel for the current step will be automatically visible, and the rest of the panels will be hidden. This behavior is automatic and does not require any special setup.

The Panel components used for each step can contain any form component. This option provides full flexibility in defining the step content.

Panel configuration

The first step in using panels is to delete the default Formatted Grid component from the parent Wizard Panel component. Then, you can add Panel components as needed. Note the following when adding panels:

  • When you drag and drop a Panel component onto the Wizard Panel component, the Style is automatically 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 panel to use docked-to-container instead.

  • It is recommended to create a layer for each panel used in the wizard, so that you can show only one panel at a time in the Form Designer. Otherwise, you will have to continually use Send to Back / Bring to Front to work with each panel. Additionally, having multiple overlapping panels visible in the designer at the same time can cause confusion when attempting to add components to the form, as components may not be assigned as you expect. These layers are not used to determine visibility of components when the form is rendered, the layers are only to make it easier to work with the panels in the Form Designer.

  • After adding the first panel to the canvas, you should create a layer for that panel and then hide it in the designer before adding the next panel. If you do not hide the panel, then you must be careful when dragging the next panel onto the canvas to make sure it is added as a child of the Wizard Panel component instead of as child of the other Panel component. If the other Panel component is hidden, then the new panel will automatically be added as a child of the Wizard Panel component.

Panels should be configured as follows:

  • The Component Name should be changed to a relevant name for the panel contents. You might use step-specific names such as PanelStep1 and PanelStep2, or content-specific names such as PanelUserInfo and PanelRequestDetails.

  • All other Panel component properties can be set as desired.

To add contents to each panel, you should hide all panel layers except for the layer that contains the panel that you want to work with (assuming you are using layers as recommended previously). Make sure that all components are fully placed within the panel so that they are added as child components of the panel. It will be obvious if you accidentally place a component within the Wizard Panel component instead, as it will immediately be sized and positioned to fill the screen, whereas child components of the regular panel will behave as normal.

Make sure the panel is assigned to its intended layer before you start adding child components to the panel. When you add child components to the panel, they will automatically be assigned to the same layer to start. But if you later change the layer of the panel, the child components will not be similarly updated.

Displaying wizard content using panels

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

  • Create a Panel component for each step of the wizard, and configure them as described in the previous section.

  • In the [Value] column of the WizardPanel data source, enter the Panel component name that corresponds to each step. For example, the first step might use a component name of PanelStep1.

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

    This is optional, as the Wizard Panel will use the value for the first step of the wizard by default when the form is viewed.

When a user views the form, the Selected Value of the Wizard Panel component starts with the Panel component name for the first step. This panel is automatically visible in the form, and the rest of the panels are automatically hidden. As the user moves through different steps in the wizard, the Selected Value field will update with the appropriate component name for each step, and the panels will show and hide accordingly.

This dynamic visibility happens automatically and does not require any configuration on the panels. It is not necessary to set up the Visible property of each Panel component (or its layer) with a formula. Note that the dynamic visibility is handled by Axiom Software in the background, and does not affect the Visible property of the panels. This means that if you view the form and download the source file from the wizard, the Visible properties of the panels on the Form Control Sheet will remain unchanged, even though only the panel for the current step is visible in the form.