Set text widget text properties

This example explains how to update single-line and multi-line text in a text widget.

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 see this sub-composition's widgets:

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

2. In the composition navigator, select the Widget Explorer tab.

This composition contains three widgets, but for this quick start, you'll look at the text widgets, which in the composition are called lowerTitle and lowerSubtitle.

The sub-composition's widgets

Composition script

Now that you have located the composition's text widgets, learn how to set 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 reference to the title and subtitle widget
      const wiLowerTitle = comp.findWidget("lowerTitle")[0];
      const wiLowerSubtitle = comp.findWidget("lowerSubtitle")[0];

      // update the single-line title
      wiLowerTitle.setPayload({
        "text": "This is the new title"
      });

      // update the multi-line subtitle
      wiLowerSubtitle.setPayload({
        "text": "New subtitle line 1\nNew subtitle line 2"
      });

    },

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