Legacy platform

Wizard widget

Edit online

On the client side, a wizard widget contains a wizard behavior JavaScript class and an HTML UI template.

The wizard JavaScript class extends the sc.plat.dojo.widgets.Wizard class that in turn extends the sc.plat.dojo.widgets.Screen class. The wizard JavaScript class provides the framework to communicate with pages on any UI action. It can listen to events raised by WizardUI on a wizard instance and provides the appropriate logic.

To create a custom wizard widget, ensure that the following JavaScript files are present that contains complete JavaScript wizard definition.

  • <Wizard name>.js - The JS file corresponding to the wizard. You can define all your behavior logic in this file.
  • templates/<Wizard name>.html - The HTML file that contains all the UI information.
  • <Wizard name>BehaviorController.js - The JS file that contains the mashuprefs details that are called on some action or behavior on the wizard.
  • <Wizard name>InitController.js - The JS file that contains the mashuprefs details that are called when you start a wizard.

In addition to JavaScript files, ensure that the <Wizard name>BehaviorController.xml and <Wizard name>InitController.xml Controller XML files are also present.

For more information about creating <Wizard name>BehaviorController.js and <Wizard name>BehaviorController.xml, and <Wizard name>InitController.js and <Wizard name>InitController.xml, see Customize controllers.

Note: Mashup calls defined in InitController and BehaviorController are not supported for wizards.

Creating the <Wizard name>.js file

Ensure that the <Wizard name>.js file syntax adheres to Dojo version 1.8 standards. The custom wizard must extend sc.plat.dojo.widgets.Wizard. Additionally, you can use the following application-provided standards:

  • You can use scDefine instead of define.
  • You can precede the imported JavaScript modules with scbase/loader! string. The scbase/loader string is a Dojo loader plug-in that is provided by the application. Precede an html file path with a dojo/text! string according to the Dojo syntax.

Ensure to import at least the Wizard.js file, template HTML file, and Dojo declare library.

The following sample CustomWizard.js files explain how to import these files.

Sample 1 - CustomWizard.js file
scDefine(["dojo/text!./templates/CustomWizard.html", "scbase/loader!dijit/form/Button", "scbase/loader!dojo/_base/declare", "scbase/loader!dojo/_base/kernel", "scbase/loader!dojo/_base/lang", "scbase/loader!dojo/text", "scbase/loader!idx/layout/ContentPane", "scbase/loader!sc/plat",  "scbase/loader!sc/plat/dojo/utils/BaseUtils", "scbase/loader!sc/plat/dojo/utils/ControllerUtils", "scbase/loader!sc/plat/dojo/utils/EditorUtils", "scbase/loader!sc/plat/dojo/utils/EventUtils", "scbase/loader!sc/plat/dojo/utils/ModelUtils", "scbase/loader!sc/plat/dojo/utils/ResourcePermissionUtils", "scbase/loader!sc/plat/dojo/utils/ScreenUtils", "scbase/loader!sc/plat/dojo/utils/WidgetUtils", "scbase/loader!sc/plat/dojo/utils/WizardUtils", "scbase/loader!sc/plat/dojo/widgets/Wizard"], function(
templateText, _dijitButton, _dojodeclare, _dojokernel, _dojolang, _dojotext, _idxContentPane, _scplat,  _scBaseUtils, _scControllerUtils, _scEditorUtils, _scEventUtils, _scModelUtils, _scResourcePermissionUtils, _scScreenUtils, _scWidgetUtils, _scWizardUtils, _scWizard) {
    return _dojodeclare("extn.wizards.CustomWizard", [_scWizard], {
        templateString: templateText,
        uId: "customWizard",
        packageName: "extn.wizards",
        className: "CustomWizard",
        showRelatedTaskInWizard: false
        title: "CustomWizard",
        namespaces: {
            targetBindingNamespaces: [],
            sourceBindingNamespaces: [{
                value: 'getEnterpriseDetails'
            }]
        },
		staticBindings: [{
            targetBinding: {
                path: 'Item.CallingOrganizationCode',
                namespace: 'getCompleteItemList_input'
            },
            sourceBinding: {
                path: 'Order.EnterpriseCode',
                namespace: 'getCompleteOrderDetails_output'               
            }
        }],
        events: [{
            name: 'onSaveSuccess'
        }],
        subscribers: {
            local: [{
                eventId: 'nextBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleNext"
                }
            }, {
                eventId: 'prevBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handlePrevious"
                }
            }, {
                eventId: 'closeBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleClose"
                }
            }, {
                eventId: 'nextBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleNext"
                }
            }, {
                eventId: 'prevBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handlePrevious"
                }
            }, {
                eventId: 'closeBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleClose"
                }
            }
            ],
        },
        handleMashupOutput: function(
        mashupRefId, modelOutput, modelInput, mashupContext) {
           
        },

        handleClose: function(
        uiEvent, businessEvent, control, args) {
           
        },
        handleNext: function(
        uiEvent, businessEvent, control, args) {
            this.sendEventForSavePage("NEXT");
        },
        handleWizardCloseConfirmation: function(
        res) {

        },
        handlePrevious: function(
        uiEvent, businessEvent, control, args) {

        },
        onSaveSuccess: function(
        uiEvent, businessEvent, control, args) {
           
        },
        afterPrevious: function(
        uiEvent, businessEvent, control, args) {

        },
        afterSaveSuccessOnConfirm: function(
        uiEvent, businessEvent, control, args) {
            _scWizardUtils.confirmWizard(
            this);
        }
    });
});

<!-- handler functions for the events -->
handleNext: function( uiEvent, businessEvent, control, args) { 
//Code to open next page or buisness logic that must be executed when a user clicks on the Next button }, 
//Similar methods are applicable for Previous and Cancel buttons.
Sample 2 - CustomWizard.js file
scDefine(["dojo/text!./templates/CustomWizard.html", "scbase/loader!dijit/form/Button", "scbase/loader!dojo/_base/declare", "scbase/loader!dojo/_base/kernel", "scbase/loader!dojo/_base/lang", "scbase/loader!dojo/text", "scbase/loader!idx/layout/ContentPane", "scbase/loader!sc/plat",  "scbase/loader!sc/plat/dojo/utils/BaseUtils", "scbase/loader!sc/plat/dojo/utils/ControllerUtils", "scbase/loader!sc/plat/dojo/utils/EditorUtils", "scbase/loader!sc/plat/dojo/utils/EventUtils", "scbase/loader!sc/plat/dojo/utils/ModelUtils", "scbase/loader!sc/plat/dojo/utils/ResourcePermissionUtils", "scbase/loader!sc/plat/dojo/utils/ScreenUtils", "scbase/loader!sc/plat/dojo/utils/WidgetUtils", "scbase/loader!sc/plat/dojo/utils/WizardUtils", "scbase/loader!sc/plat/dojo/widgets/Wizard"], function(
templateText, _dijitButton, _dojodeclare, _dojokernel, _dojolang, _dojotext, _idxContentPane, _scplat,  _scBaseUtils, _scControllerUtils, _scEditorUtils, _scEventUtils, _scModelUtils, _scResourcePermissionUtils, _scScreenUtils, _scWidgetUtils, _scWizardUtils, _scWizard) {
    return _dojodeclare("extn.wizards.CustomWizard", [_scWizard], {
        templateString: templateText,
        uId: "customWizard",
        packageName: "extn.wizards",
        className: "CustomWizard",
        showRelatedTaskInWizard: false
        title: "CustomWizard",
        namespaces: {
            targetBindingNamespaces: [],
            sourceBindingNamespaces: [{
                value: 'getEnterpriseDetails'
            }]
        },
		        events: [{
            name: 'onSaveSuccess'
        }],
        subscribers: {
            local: [{
                eventId: 'nextBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleNext"
                }
            }, {
                eventId: 'prevBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handlePrevious"
                }
            }, {
                eventId: 'closeBttn2_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleClose"
                }
            }, {
                eventId: 'nextBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleNext"
                }
            }, {
                eventId: 'prevBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handlePrevious"
                }
            }, {
                eventId: 'closeBttn_onClick',
                sequence: '5',
                handler: {
                    methodName: "handleClose"
                }
            }
            ],
        },
        handleMashupOutput: function(
        mashupRefId, modelOutput, modelInput, mashupContext) {
           
        },

        handleClose: function(
        uiEvent, businessEvent, control, args) {
           
        },
        handleNext: function(
        uiEvent, businessEvent, control, args) {
            this.sendEventForSavePage("NEXT");
        },
        handleWizardCloseConfirmation: function(
        res) {

        },
        handlePrevious: function(
        uiEvent, businessEvent, control, args) {

        },
        onSaveSuccess: function(
        uiEvent, businessEvent, control, args) {
           
        },
        afterPrevious: function(
        uiEvent, businessEvent, control, args) {

        },
        afterSaveSuccessOnConfirm: function(
        uiEvent, businessEvent, control, args) {
            _scWizardUtils.confirmWizard(
            this);
        }
    });
});

<!-- handler functions for the events -->
handleNext: function( uiEvent, businessEvent, control, args) { 
//Code to open next page or buisness logic that must be executed when a user clicks on the Next button }, 
//Similar methods are applicable for Previous and Cancel buttons.

Creating the templates/<Wizard name>.html file

The sc.plat.dojo.widgets.Wizard class does not provide any template for wizards. The template must be defined by the corresponding widget html, template.html. The template.html file is same as any other Dojo widget. The template.html file must contain a TableContainer element that is defined with dojoAttachPoint as stackContainerNode. Within the div element, the framework places the wizard pages. For a wizard, you can define the navigation buttons such as Next, Previous, or Confirm in the template.html file. Define the subscribers for each navigation button as supported by the framework. The templateString variable that is populated by the contents of the template HTML file is used to render the wizard.

Sample CustomWizard.html file

<div class="">
<div data-dojo-type="idx/layout/ContentPane" data-dojo-props=" spanLabel : true ,
colspan : 1 ,
uId : 'WizardScreenPanel' ,
layoutAlign : 'top'
">
<div data-dojo-type="idx/layout/ContentPane" data-dojo-props=" 'class' :
'wizardNavigationPanelTop wizardNavigationPanel' , uId : 'navigationPanel2' ,
renderHidden : true">
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxButtonIcon' , uId : 'prevBttn2' ,
iconClass : 'dijitIcon idxPreviousPageIcon'
,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Previous')
}}
"></div>
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxSpecialButton idxButtonIcon' , uId : 'nextBttn2' ,
iconClass : 'dijitIcon idxNextPageIcon'
,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Next')
}}
"></div>
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxButtonIcon' , uId : 'closeBttn2' ,
iconClass : 'dijitIcon idxCloseIcon'
,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Cancel')
}}
"></div>
</div>
<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
'class' : 'wizardMainContainer' ,
dojoAttachPoint : 'stackContainerNode' ,
uId : 'mainContent' "></div>
<div data-dojo-type="idx/layout/ContentPane" data-dojo-props="
'class' : 'wizardNavigationPanel wizardNavigationPanelBottom' ,
uId : 'navigationPanel' ,
renderHidden : true
">
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxButtonIcon' , uId : 'prevBttn' ,
iconClass : 'dijitIcon idxPreviousPageIcon'
,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Previous')
}}
"></div>
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxSpecialButton idxButtonIcon' ,
uId : 'nextBttn' ,
iconClass : 'dijitIcon idxNextPageIcon' ,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Next')
}}
"></div>
<div data-dojo-type="dijit/form/Button" data-dojo-props="
'class' : 'idxButtonIcon' , uId : 'closeBttn' ,
iconClass : 'dijitIcon idxCloseIcon'
,scParamDataFn :
function() {
return {
label : this.getSimpleBundleString('Cancel')
}}
"></div>
</div>
</div>
</div>
Here,
  • uid : navigationPanel2 - refers to the top navigation panel that contains the navigation buttons such as previous (prevBttn2), next (nextBttn2) and cancel (closeBttn2).
  • uId : mainContent, dojoAttachPoint : stackContainerNode refers to div where the SDK framework places the wizard pages that are opened as part of the wizard flow.
  • uId : navigationPanel - refers to the bottom navigation panel that contains the navigation buttons such as previous (prevBttn), next (nextBttn) and cancel (closeBttn).

According to the application standard, data-dojo-props contain the scParamDataFn function attribute. This attribute returns a JSON object with any dynamically evaluated values such as label, title, or bindingData for the widget.

Input from a wizard widget to the wizard server controller

The following data is sent from a wizard widget to the wizard server controller on next and start communication:

  • editorInput - is provided to the server as scControllerInput request attribute for server components.
  • wizardInput - is the initial data that is provided to open a wizard. This data is provided on the server as scControllerInput request attribute.
  • wizard namespace data - the TargetBinding data is fetched from the namespaces on wizard definition with alwayspass attribute set to true. This data is passed for each call to the wizard controller. To access the server-side data, use the namespace id as the key.

Output to a wizard widget from the wizard server controller

The output to a wizard widget from the wizard server controller on next and start communication (either the next screen or first screen) is retrieved along with the output data from mashup calls in InitController. The data from InitController is used to populate the corresponding source namespaces on a screen.