Etapa 6: Acionar Triggers

Nesta etapa, mostraremos a você como o trigger que você viu registrado é acionado.

É possível acionar triggers em qualquer ponto por um componente. Em geral, ele é acionado por uma interação do usuário, como o clique em um botão ou a seleção de uma linha em uma tabela. No entanto, o componente pode acionar o trigger com base em qualquer critério; por exemplo, quando dados são alterados por causa de uma chamada REST.

Neste exemplo, quando você clicar na imagem, ela acionará um trigger transmitindo o valor atual da propriedade whoAreYou.

Verifique o arquivo render.js e examine o objeto SampleComponentViewModel.

Para acionar um trigger:

1. Verifique a função no objeto SampleComponentViewModel que chama o SDK de Sites para acionar o trigger.

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

2. Agora você precisa que algo na interface do usuário chame a função para acionar o trigger. Verifique o arquivo render.js e atualize o objeto sampleComponentTemplate para ter esta entrada:

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

No objeto SampleComponentViewModel, você vê a função JavaScript que é chamada ao clicar na imagem. Essa função chama o SDK de Sites para dizer a ele que dispare todas as ações definidas para o trigger "imageClicked", que é o valor transmitido do binding click na etapa 2. Ele também transmite um triggerPayload que tem um único campo, payloadData, e transmite um valor estático 'some data here'. Os valores imageClicked e whoAreYou correspondem aos do arquivo appinfo.json no qual o trigger foi registrado (na etapa anterior).

No código de amostra, o trigger é acionado por um bind de dados do binding click e informa o nome do trigger imageClicked. Existem no momento três renderizações do componente <scs-image> com base no layout que o usuário escolhe. Para assegurar que o trigger seja emitido para cada layout, edite o arquivo render.js para fazer as alterações a seguir.

• Acione os triggers de diferentes layouts. Encontre as duas entradas deste código:

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

  Altere o código para este:

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

• Especifique o payload a ser informado aos triggers. Altere este código:

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

  Em seu lugar, use este código:

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

• Sincronize ou faça upload do arquivo render.js para o servidor de instância do Oracle Content Management.

Agora que você revisou o código necessário, poderá ligar o trigger para que seu componente personalizado o acione quando alguém clicar no botão.