Override SetData in JavaScript

General
,
1

Does anyone know a solution to overriding the SetData function in an HTML template format? Currently I’ve coded in a flash template a working solution, but am having issues translating into JavaScript. Here’s that solution:

override public function SetData(xmlData:XML):void {			
	for each (var element:XML in xmlData.children()) {
		if (element.@id == "FilePath") {
			path = element.data.@value.toString();
		}   		
	}
	super.SetData(xmlData);
}

Any help would be greatly appreciated!

Thanks,
Devin

2

In an HTML template any data is received through the update() function which takes one parameter that is a string of data.

3

I have and I’m still trying to explain that in my series Introduction to CasparCG’s HTML producer. I will cover the scripting bits in the next part of the series.

If you don’t feel like parsing the string received via update(), have a look at the https://github.com/indr/webcg-framework and the https://indr.github.io/webcg-adobe-animate-adapter/ (for Adobe Animate CC templates). There you also find running examples that handles both JSON and component XML data, for example this lower third template (code).

The important parts are these:

  1. You reference the script like this <script src="webcg-framework.umd.js"></script> (line 7), and then
  2. You can register to data events and set the text of a document element like this (line 123):
webcg.on('data', function (data) {
  document.querySelector('.line-1').innerHTML = data.f0 ? data.f0.text || data.f0 : ''
  document.querySelector('.line-2').innerHTML = data.f1 ? data.f1.text || data.f1 : ''
})

This handles both JSON and component XML data strings.