Creating a wizard
You can create a wizard by specifying the wizard definition in the additionalwizards.xml file, and by creating the wizard UI widget.
Before you begin
- Create a wizard definition in the
additionalwizards.xmlfile. Ensure that the wizard ID is prefixed with
- Copy the
additionalwizards.xmlfile to the <INSTALL_DIR>/extensions/wsc/webpages/wizardxmls/ folder.
- Create a wizard widget for the corresponding wizard ID.
For example, if the wizard ID is
CustomWizard.jswidget with declared class as
extn.wizards.CustomWizard. Copy the
CustomWizard.jsfile to the <INSTALL_DIR>/extensions/wsc/webpages/wizards/ folder and the corresponding wizard widget templates to the <INSTALL_DIR>/extensions/wsc/wizards/templates/ folder.
- Open the wizard by calling the
WizardUtils.openWizardInEditorutility. To open the wizard, pass the following parameters in the
The wizard utility methods enable users to navigate in the wizard. The following table describes a few wizard utility methods of the
wizardId- identifier of the wizard.
wizardInput- initial input of the wizard.
editorId- identifier of the editor.
editorConfig- configuration for the editor. The attributes that are provided for this parameter are added to the editor.
Table 1. Wizard utility methods Wizard utility methods Description getCurrentPage Considers a wizard instance and returns the page that is displayed in the stack container of the wizard. isCurrentPageFirstEntity If the page that is displayed or to be displayed is the first entity in the stack container of a wizard, this method returns the value
isCurrentPageLastEntity If the page that is displayed or to be displayed is the last entity in the stack container of a wizard, this method returns the value
nextScreen Retrieves the next screen of a wizard to be displayed. previousScreen Displays the previous screen of a wizard flow. confirmWizard Confirms a wizard instance. openWizardInEditor Opens a wizard instance for a
closeWizard Raises the
beforeCloseevent and closes the wizard.
getCurrentPageByUId Retrieves the current page UID. isCurrentPageLeaf If the page opened in a wizard is a leaf node, this method returns the value
The wizard definition XML files are in the <INSTALL_DIR>/repository/eardata/wsc/war/wizardxmls directory. The UI files are in the <INSTALL_DIR>/repository/eardata/wsc/war/wsc/<module>/wizards directory. Here,
<module>refers to shipment or others. For example, the wizard definition
CustomerPickWizardFlow.xmlfile is in the <INSTALL_DIR>/repository/eardata/wsc/war/wizardxmls directory. Whereas, the
CustomerPickWizard XMLUI files are located in the <INSTALL_DIR>/repository/eardata/wsc/war/wsc/shipment/wizards directory.
Ensure to create a wizard with navigation buttons such next, previous, confirm and cancel. On click of Next, the
saveCurrentPageevent is raised for the current wizard page to save data. After the data is saved, the
onSaveSuccessevent is raised and the next page is displayed in the wizard. Similarly, on click of Previous, a warning message is displayed prompting the user to save data on the current wizard page before going to the previous page. On clicking Yes, the
saveCurrentPageevent is raised. After the data is saved, the
onSaveSuccessevent is raised by the page to the wizard, and the previous wizard page is displayed. The event interaction between wizard and pages for Confirm and Cancel is similar to Next and Previous.For custom wizards, the following events are raised:
setScreenTitle- This event is raised to set the subtitle on the editor. For example, in the Create Order wizard, the title is Create Order and subtitle is Customer Search, which is the first screen in the wizard page.
handleTabClose- This event is raised when an editor is closed. Before closing the wizard, a warning message is displayed prompting the user to save any unsaved data on the page. Ensure to define the
handleTabCloseevent subscriber for new wizards, so that the user is prompted to save data on closing the editor.
setWizardInput- This event is raised by an editor whenever the editor input is modified on some UI action. For example, when the editor input is changed on identifying a customer for the order, the editor input is updated and the
setWizardInputevent is raised to update the wizard input.