Read and update widget properties

This example explains how to use composition scripting to read and update a composition's widget properties.

Functions covered

• comp.findWidget()

• widget.getPayload()

• widget.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.

The Lower sub-composition

To go deeper and open the sub-composition's widgets:

• Double-click the Lower sub-composition.

This sub-composition contains three widgets.

• lowerTitle: a text widget

• lowerSubtitle: a text widget

• lowerLogo: an image widget

The sub-composition's widgets

Composition script

To get the same information using composition scripts, open the composition script editor within the same example composition as above.

Then, read the comments in the Lower composition script to see the composition scripts needed to read and update widget properties.

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

Lower Script

(function() {
  return {

    init: function(comp, context) {

      // get reference to the title widget
      const wiLowerTitle = comp.findWidget("lowerTitle")[0];

      // get widget properties
      const p = wiLowerTitle.getPayload();
      console.log(p);

      // get title text
      const titleText = p.text;

      // change title to uppercase
      wiLowerTitle.setPayload({
        "text": titleText.toUpperCase()
      });

    },

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