Widget de l'assistant

Côté client, un widget d'assistant contient une classe JavaScript de comportement d'assistant et un modèle d'interface utilisateur HTML.

La classe JavaScript de l'assistant étend la classe sc.plat.dojo.widgets.Wizard qui à son tour étend la classe sc.plat.dojo.widgets.Screen . La classe JavaScript de l'assistant fournit l'infrastructure permettant de communiquer avec les pages d'une action d'interface utilisateur. Il peut écouter les événements émis par WizardUI sur une instance d'assistant et fournit la logique appropriée.

Pour créer un widget d'assistant personnalisé, vérifiez que les fichiers JavaScript suivants contiennent une définition d'assistant JavaScript complète.

<Wizard name>.js -Fichier JS correspondant à l'assistant. Vous pouvez définir toute votre logique de comportement dans ce fichier.
templates/<Wizard name>.html -Fichier HTML qui contient toutes les informations d'interface utilisateur.
<Wizard name>BehaviorController.js -Fichier JS contenant les détails mashuprefs appelés sur une action ou un comportement de l'assistant.
<Wizard name>InitController.js -Fichier JS contenant les détails mashuprefs qui sont appelés lorsque vous démarrez un assistant.

En plus des fichiers JavaScript , assurez-vous que les fichiers XML <Wizard name>BehaviorController.xml et <Wizard name>InitController.xml Controller sont également présents.

Pour plus d'informations sur la création <Wizard name>BehaviorController.js de et <Wizard name>BehaviorController.xml, ainsi que <Wizard name>InitController.js de et <Wizard name>InitController.xml, consultez la section Personnaliser les contrôleurs.

Remarque: les appels Mashup définis dans InitController et BehaviorController ne sont pas pris en charge pour les assistants.

Création du fichier .js < Wizard name >

Vérifiez que la syntaxe du fichier <Wizard name>.js est conforme aux normes Dojo version 1.8 . L'assistant personnalisé doit étendre sc.plat.dojo.widgets.Wizard. En outre, vous pouvez utiliser les normes suivantes fournies par l'application:

Vous pouvez utiliser scDefine à la place de define.
Vous pouvez faire précéder les modules JavaScript importés par une chaîne scbase/loader! . La chaîne scbase/loader est un plug-in de chargeur Dojo fourni par l'application. Faites précéder un chemin de fichier HTML d'une chaîne dojo/text! conformément à la syntaxe Dojo.

Veillez à importer au moins le fichier Wizard.js , le fichier HTML modèle et la bibliothèque de déclaration Dojo.

Les exemples de fichier CustomWizard.js suivants expliquent comment importer ces fichiers.

Exemple 1-Fichier .js CustomWizard

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.

Exemple 2-Fichier .js CustomWizard

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.

Création du fichier templates / < nom de l'assistant > .html

La classe sc.plat.dojo.widgets.Wizard ne fournit aucun modèle pour les assistants. Le modèle doit être défini par le code HTML de widget correspondant, template.html. Le fichier template.html est identique à tout autre widget Dojo. Le fichier template.html doit contenir un élément TableContainer défini avec dojoAttachPoint comme stackContainerNode. Dans l'élément div , l'infrastructure place les pages de l'assistant. Pour un assistant, vous pouvez définir les boutons de navigation tels que Next, Previousou Confirm dans le fichier template.html . Définissez les abonnés pour chaque bouton de navigation pris en charge par l'infrastructure. La variable templateString remplie par le contenu du fichier HTML modèle est utilisée pour afficher l'assistant.

Exemple de fichier CustomWizard.html

<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>

Où

uid : navigationPanel2 -fait référence au panneau de navigation supérieur qui contient les boutons de navigation tels que précédent (prevBttn2), suivant (nextBttn2) et annuler (closeBttn2).
uId : mainContent, dojoAttachPoint : stackContainerNode fait référence à div où l'infrastructure SDK place les pages de l'assistant qui sont ouvertes dans le cadre du flux de l'assistant.
uId : navigationPanel -fait référence au panneau de navigation du bas qui contient les boutons de navigation tels que previous (prevBttn), next (nextBttn) et cancel (closeBttn).

Selon la norme d'application, data-dojo-props contient l'attribut de fonction scParamDataFn . Cet attribut renvoie un objet JSON avec toutes les valeurs évaluées dynamiquement telles que le libellé, le titre ou bindingData pour le widget.

Entrée d'un widget d'assistant dans le contrôleur de serveur d'assistant

Les données suivantes sont envoyées d'un widget d'assistant au contrôleur de serveur d'assistant lors du prochain démarrage de la communication:

editorInput -est fourni au serveur en tant qu'attribut de demande scControllerInput pour les composants serveur.
wizardInput -correspond aux données initiales fournies pour ouvrir un assistant. Ces données sont fournies sur le serveur en tant qu'attribut de demande scControllerInput .
wizard namespace data -les données TargetBinding sont extraites des espaces de nom dans la définition de l'assistant avec l'attribut alwayspass défini sur true. Ces données sont transmises pour chaque appel au contrôleur de l'assistant. Pour accéder aux données côté serveur, utilisez namespace id comme clé.

Sortie vers un widget d'assistant à partir du contrôleur de serveur d'assistant

La sortie vers un widget d'assistant à partir du contrôleur de serveur de l'assistant lors du prochain démarrage de la communication (écran suivant ou premier écran) est extraite avec les données de sortie des appels d'application composite dans InitController. Les données provenant de InitController sont utilisées pour remplir les espaces de nom source correspondants sur un écran.