How to create a Wizard Web Panel

Page Id

You have to create a new Web Panel and save it. Then, you select the Patterns Part of the Object and click in the link 'Create WorkWithPlus Pattern Instance' and select any of the Wizard templates.

After selecting the 'Wizard template' you can customize the textblock 'Wizard Title' with the purpose of the Web Panel. Then, you have to create as many WizardSteps as you need, and these steps can be created based on 'Step templates':

The 'Step templates' available to select are the ones that exists for the 'Wizard template' that you select previously (in the example the selected 'Wizard template' is 'Wizard Arrow Type'). So, you will add as much steps as you need for that Wizard.

The Steps have a property named 'condition' which allows you to define conditional steps. This means that the wizard may go through that step or not, depending on if the condition accomplishes. If it does not accomplish the condition, when pressing next over the previous step it will navigate to the step that follows it (for example if the step 2 has condition, you are on step 1 and you press Next it can go to step 2 or to step 3, depending on the accomplishment or not of the condition).

In the following example the Wizard has 4 steps, each of them based on different StepTemplates, but you could have more than one step with the same StepTemplate.

Each of the Steps will be saved in GeneXus as Web Components, and WorkWithPlus will automatically create the behavior in the Web Panel to call to the correspondent step after pressing next or previous. You can reorder the steps in the section 'Steps' which is located in the first tab of the Web Panel instance.

In each step you can add user code, as in any other object of WorkWithPlus. For example if you need to make some data validation, you could add it in the Next button event:

Also, you can use the 'Is Required' property for variables, and WorkWithPlus will add the validation automatically in the Next button.

WorkWithPlus will create an SDT with all the entry values of each step, and will load that SDT information in each Next button. Also, when end user presses Previous action, WorkWithPlus will load the information that end user have fulfilled in that step.

If you need to save some additional information between steps, there is an element in the SDT created that is named AuxiliarData and is based on the SDT WizardAuxiliarData:

This SDT contains a collection of items with Key and Value. There is also a procedure that saves, gets and removes items from the auxiliary data, named WizardAuxiliarDataProcedure.

So, if you want to save or update extra information in some step, you need to add the following code in the event associated to the Next button (Enter event):

&WizardData.FromJson(&WebSession.Get(&WebSessionKey))
WizardAuxiliarDataProcedure(&WizardData.AuxiliarData, '<SomeKeyToIdentify>', <ValueForThisInfo>, 'SET')
&WebSession.Set(&WebSessionKey, &WizardData.ToJson())

In order to remove that information from the SDT:

&WizardData.FromJson(&WebSession.Get(&WebSessionKey))
WizardAuxiliarDataProcedure(&WizardData.AuxiliarData, '<SomeKeyToIdentify>', '', 'DLT')
&WebSession.Set(&WebSessionKey, &WizardData.ToJson())

In order to get that information from the SDT:

&WizardData.FromJson(&WebSession.Get(&WebSessionKey))
WizardAuxiliarDataProcedure(&WizardData.AuxiliarData, '<SomeKeyToIdentify>', &Value, 'GET')

In &Value variable will be set the value of that key.

In the last step of your Wizard, WorkWithPlus will add a subroutine named 'FinishWizard' where you will have to add the behavior needed for this wizard', using the SDT of the wizard (named &<WebPanelName>Data) which will contain all the information loaded in each step of the wizard, and the additional information loaded using the procedure mentioned previously.

The properties associated to the Wizard Web Panel are the following:

General Properties

Clean Next Step Data:

Specifies whether the fields of the next step of the wizard will always be emptied or not. In other words, when you are in the step 3 of some wizard, and you go backwards to step 1 and make some modification, this property specifies if the information of step 2 will be empty or will have what the end user fulfilled when he pressed next the first time.

Form Theme Class:

Specifies the theme class of the form. For example with this property you can assign to the form a background color or background image.

Resume **:

Three possible values:

Never: each time you run a Wizard process, will start from scratch. It's the behavior of Wizards in previous versions of WorkWithPlus for Web.
Ask User: when detecting an unfinished wizard process will ask the end-user if he wants to start a new process or resume the ongoing Wizard process.
Always: when detecting an unfinished wizard process will resume the ongoing Wizard process.

When selecting the option 'Ask User', two new properties will appear:

'Resume message title': defines the title to be displayed in the resume message. <default> value will be the key 'WWP_ResumeWizard_Title' (by default the English text to this key is: Wizard started previously).
'Resume message explanation': defines the description to be displayed in the resume message. <default> value will be the key 'WWP_ResumeWizard_Text' (by default the English text to this key is: This wizard has already been started. How would you want to proceed?).

Also, you can configure the interval of seconds elapsed for autosaving the Wizard data, in the property 'Save Interval Seconds' that is in WorkWithPlus for Web Settings > Template Node. This applies only when the property 'Resume' of the Wizard is 'Ask user' or 'Always'.