Step 6: Raise Triggers

In this step, we’ll show you how the trigger you saw registered is raised.

Triggers can be raised at any point by a component. Typically it is raised by a user interaction, by clicking a button or selecting a row in a table. However, the component can raise the trigger based on any criteria; for example, when data changes because of a REST call.

For this sample, when you click the image it will raise a trigger passing through the current value of the whoAreYou property.

Review the render.js file and look at the SampleComponentViewModel object.

To raise a trigger:

Review the function in the SampleComponentViewModel object that calls the Sites SDK to raise the trigger.

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

Now you need something in the user interface to call the function to raise the trigger. Review the render.js file and update the sampleComponentTemplate object to have this entry:
```
     '<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +
```

In the SampleComponentViewModel object, you see the JavaScript function that is called when the image is clicked. This function calls the Sites SDK to tell it to trigger all the actions defined for the trigger "imageClicked", which is the value passed in from the click binding in step 2. It also passes through a triggerPayload that has a single field:payloadData and passes through a static value 'some data here'. These values imageClicked and whoAreYou match those in the appinfo.json file where the trigger is registered (in the previous step).

In the sample code, the trigger is raised by a data-bind of the click binding and passes in the trigger name imageClicked. There are currently three renderings of the <scs-image> component based on the layout the user chooses. To ensure that the trigger is raised for each of the layouts, edit the render.js file to make the following changes.

Raise triggers from different layouts. Find the two entries of this code:

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

Change the code to this:

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

Specify the payload to pass to the triggers. Change this code:

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

Use this code instead:

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

Sync or upload the render.js file to the Oracle Content Management instance server.

Now that you've reviewed the required code, you can hook up the trigger so that your custom component will raise it when the button is clicked.

Check the Results for Step 6

You should now be able to register an action to execute against your trigger and also have the action execute when the trigger is raised:

Refresh your page in your site so Site Builder can pick up changes to the component.
Take the page into Edit mode.
Drag and drop your component onto the page.
Bring up the Settings panel against your component.
Select the Link tab at the top of the Settings panel.
Select Trigger Actions as the Link Type.
Click the imageClicked trigger that you saw registered.
In the dialog, drag the Show Alert action from the Page Actions section.
In the Message field, select the payloadData value, which is the payload you entered when you registered the trigger.
Close the Settings panel and switch Site Builder to Preview mode.
Click the image in the component.

An alert will appear showing no message defined because you haven’t specified the imageBannerText value.
Take the page into Edit mode and bring up the Settings panel again for the component.
Click Custom Settings and enter Workplace.
Close the Settings panel and switch the page to Preview mode.
Click the image in the component.

Now it should show the updated payload Workplace, which is invoked from the change you made to the click binding.

You can execute any number of actions when a trigger is raised.

Note:

There is no pre-defined order to when an action is executed. Although each action will be called in the order it is listed, there is no wait for it to complete before the next action is called. If an action makes an asynchronous call, it may not complete before the next action is executed.

Continue to Step 7: Register Actions.