Find sub-compositions and widgets

This example explains how to get composition's sub-compositions and widgets.

Functions covered

• find()

• findWidget()

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.

Select the Lower sub-composition and Control Properties in the property panel to see the sub-composition's objects.

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 scripts

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 root and Lower composition scripts to see the composition scripts needed to find sub-compositions and widgets.

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

Root Script

(function() {
  return {

    init: function(comp, context) {

      // get reference to the subcomposition "Lower"
      const compLower = comp.find("Lower")[0];

      // log composition object to the console
      console.log(compLower);

    },

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

Lower Script

(function() {
  return {

    init: function(comp, context) {

      // get reference to the title, subtitle, and logo widget
      const wiLowerTitle = comp.findWidget("lowerTitle")[0];
      const wiLowerSubtitle = comp.findWidget("lowerSubtitle")[0];
      const wiLowerLogo = comp.findWidget("lowerLogo")[0];

      // log widget objects to the console
      console.log(wiLowerTitle);
      console.log(wiLowerSubtitle);
      console.log(wiLowerLogo);

    },

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