Set Actions

You can set a component to leverage action registration so that it can be dropped on a page that will execute actions within your component.

Register Actions

Actions are called on components when triggers are raised. A component can register any number of actions and also define the payload the action supports. When a user selects an action, they can populate the payload to be passed to the action.

As with registering triggers, you can register actions that your component supports in the appinfo.json registration data for your theme.

Here’s an example of how to register an action:

1. Edit the appinfo.json file for your component and update the "actions":[], entry.

   "actions": [{
     "actionName": "helloWorldChangeWhoIAm",
     "actionDescription": "Change Who I Am",
     "actionPayload": [{
       "name": "whoAreYou",
       "description": "Who are you?",
       "type": {
         "ojComponent": {
          "component": "ojInputText"}
         },
       },
       "value": ""
     }]
   }]

2. Once registered, the action will be visible in the action dialog that’s invoked when you click a trigger on the Link tab on the Setting panel for your component.

Execute Actions

Once an action is registered, you’ll be able to drop components onto the page that execute actions within the component. For a component to execute an action, it must listen for the EXECUTE_ACTION message. This message also includes the payload passed to the action from which you must extract the expected values.

As an example, to listen for the EXECUTE_ACTION message, edit the render.js file and update the ViewModel object with these entries:

self.executeActionListener = function (args) {
  // get action and payload
  var payload = $.isArray(args.payload) ? args.payload[0] : {},
        action = args.action,
        actionName = action && action.actionName;

  // handle 'helloWorldChangeWhoIAm' actions
  if ((actionName === 'helloWorldChangeWhoIAm') && (payload.name === 'whoAreYou')) {
    self.whoAreYou(payload.value);
  }
};

This creates a JavaScript function to execute the action, then uses the Sites SDK to call the function whenever the EXECUTE_ACTION message is raised.

The action will be called whenever an EXECUTE_ACTION message is raised, and it’s up to the component to handle only actions it is designed to handle. To do this, you must check the name of the action to ensure it is one you can handle.

The payload for the action is an array of values. In the example, it’s assumed that the value is the first entry in the array. Typically, you must find the payload values you care about from the array.

Note:

Because the action listener is a callback, you should use JavaScript Closure or appropriately bind the function to ensure you have access to your ViewModel when the function is executed.