Etape 6 : activation des déclencheurs

Dans cette étape, nous allons vous montrer le processus d'activation du déclencheur inscrit.

Les déclencheurs peuvent être activés à tout moment par un composant. Généralement un déclencheur est activé par une interaction utilisateur, comme un clic sur un bouton ou la sélection d'une ligne dans une table. Toutefois, le composant peut également activer le déclencheur lorsque certains critères sont réunis, par exemple, lorsque les données sont modifiées en raison d'un appel REST.

Dans cet exemple, lorsque vous cliquez sur l'image, vous activez un déclencheur qui transmet la valeur en cours de la propriété whoAreYou.

Vérifiez le fichier render.js et examinez l'objet SampleComponentViewModel.

Pour activer un déclencheur, procédez comme suit :

1. Dans l'objet SampleComponentViewModel, vérifiez la fonction qui appelle le kit SDK Sites pour activer le déclencheur.

   self.raiseTrigger = function (triggerName) {
     SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
       'triggerName': triggerName, 
       'triggerPayload': { 
           'payloadData': 'some data here'
       }
     });
   };

2. Vous devez ensuite effectuer une action dans l'interface utilisateur pour appeler la fonction destinée à activer le déclencheur. Consultez le fichier render.js et mettez à jour l'objet sampleComponentTemplate avec l'entrée suivante :

        '<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +

Dans l'objet SampleComponentViewModel, vous pouvez voir la fonction JavaScript qui est appelée lorsqu'un utilisateur clique sur l'image. Cette fonction appelle le kit SDK Sites et lui demande de déclencher toutes les actions définies pour le déclencheur "imageClicked", qui correspond à la valeur transmise à partir de la liaison click de l'étape 2. Elle transmet également le déclencheur triggerPayload, qui comporte un seul champ (payloadData), ainsi qu'une valeur statique 'some data here'. Les valeurs imageClicked et whoAreYou correspondent à celles du fichier appinfo.json dans lequel le déclencheur est inscrit (dans l'étape précédente).

Dans le code d'exemple, le déclencheur est activé par une liaison de données de la liaison click et transmet le nom de déclencheur imageClicked. Il existe actuellement trois façons d'afficher le composant <scs-image> en fonction de la présentation choisie par l'utilisateur. Pour vous assurer que le déclencheur sera activé quelle que soit la présentation, apportez les modifications suivantes au fichier render.js.

• Activez des déclencheurs à partir des diverses présentations. Recherchez les deux entrées de code suivantes :

  '<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}">' +

  Remplacez ce code par le suivant :

  '<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +

• Indiquez les données traitées à transmettre aux déclencheurs. Remplacez ce code :

      self.raiseTrigger = function (triggerName) {
        SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
          'triggerName': triggerName,
          'triggerPayload': {
            'payloadData': 'some data here'
          }
        });
      };

  Par celui-ci :

      self.raiseTrigger = function (triggerName) {
        SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
          'triggerName': triggerName,
          'triggerPayload': {
            'payloadData': self.imageBannerText() // pass banner text as payload
          }
        });
      };

• Synchronisez le fichier render.js ou téléchargez-le vers le serveur d'instance Oracle Content Management.

Une fois que vous avez vérifié le code requis, vous pouvez associer le déclencheur de façon à ce qu'il soit activé par votre composant personnalisé lorsqu'un utilisateur clique sur le bouton.