Read and update control nodes

This example explains how to use composition scripting to read and update a composition's control nodes.

Functions covered

• comp.find()

• comp.getPayload()

• comp.getPayload2()

• comp.setPayload()

Load this example composition to follow along in a real composition.

Composition structure

The example composition has one sub-composition called Lower, as you can see in the composition tree.

To see the sub-composition's objects:

• Select the Lower sub-composition and Control Properties in the property panel.

The Lower sub-composition

To see this sub-composition's control nodes:

1. Open the composition script editor within the same example composition as above and open the Lower composition script.

2. In the Composition Control tab, select Lower and then the Sub-comp info tab.

This composition contains three control nodes:

• Title: a text control node

• Subtitle: a textarea control node

• Station Logo: an image control node

The sub-composition's control nodes

Composition script

Now that you have located the composition's control nodes, learn how to read and update them by reading the comments in the Lower composition script.

You can also copy and paste the composition script below into your own compositions.

Lower Script

(function() {
  return {

    init: function(comp, context) {

      // get control node payload as array of key-value pairs
      const payload = comp.getPayload();
      console.log(payload);

      // get control node payload as JSON object
      const payload2 = comp.getPayload2();
      console.log(payload2);

      // set new control node payload
      const newPayload = {
        "Title": "New title",
        "Subtitle": "New subtitle line 1\nNew subtitle line 2",
        "Station Logo": "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
      };
      comp.setPayload(newPayload);

    },

    close: function(comp, context) {}
  };
})();