Comment on page
Read and update widget properties
This example explains how to use composition scripting to read and update a composition's widget properties.
comp.findWidget()widget.getPayload()widget.setPayload()
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
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) {}
};
})();