Step 8: Execute Actions

At the end of this topic, you'll be able to drop components on the page that execute actions within your component. This leverages the action registration you created in the previous step.

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 will extract the expected values.

To listen for the EXECUTE_ACTION message, edit the render.js file and update the SampleComponentViewModel object with the following entry:

SitesSDK.subscribe('EXECUTE_ACTION', $.proxy(self.executeActionsListener, self));

When the EXECUTE_ACTION message is received, the associated callback function is executed:

    self.executeActionsListener = function (args) {
      // get action and payload
      var payload = args.payload,
      action = args.action;

      // handle 'setImageWidth' actions
      if (action && action.actionName === 'setImageWidth') {
        $.each(payload, function(index, data) {
          if (data.name === 'imageWidth') {
            self.imageWidth(data.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 component will be called whenever an EXECUTE_ACTION message is raised, and it is up to the component to only handle actions it is designed to handle. To do this, you must check the name of the action to ensure it is one the component can handle.

The payload for the action is an array of values. Typically, you will need to 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.

Check the Results for Step 8

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.
Drag and drop a Button component onto the page.
Bring up the Settings panel against the Button component.
On the General tab, change the Label of the button to Click me!
Select the Link tab at the top of the Settings panel.
Select Trigger Actions as the Link Type.
Click the Click on Button trigger against the Button component.
In the dialog, expand the A_Local_Component component in the left side.
Drag and drop the Update the image width action from the A_Local_Component component onto the right side.
Enter 300px in the Image Width in pixels field.
Switch the page to Preview mode.
Click the Click me! button.

At this point the size of your image will increase to 300px.

Note:

Triggers and actions are designed to support inter-component communication. They are not designed to create or manage state. If you refresh the page, the page will revert to its original state as if no triggers were raised or actions executed.

Continue to Step 9: Create a Distinct Title for Each Instance of the Component.