Dynamic text - changing text in html5

[Guest]

Hi,

I'm trying to make a programmatic/dynamic banner with textfields that can be changed through a excel file. I want always the same spacing (15px) below the textfields even when the text, that is inserted via excel, is longer than the original one. At the moment the textfields are on top of each other when I insert a longer textfield than the original one. 

Can I change that somehow or add code in the html or javascript so it shows the text underneath and with spacing?

Here is the preview for the banner if that helps:

https://livepreview.adform.com/68559935-1d33-48b1-bd18-98ce863ae5d5/

Any kind of help is very much appreciated!

[JoãoCésar]

Hi.

I think I don't get it.

In the sample you provided, there's a table that uses regular DOM texts, right? And the table seems to be looking correctly.

So exactly what do you want to do in that preview? And can you show us the code you have in Animate now?

Regards,

JC

[Guest]

Hi, 

thank you for your answer! I use dynamic textfields in Animate. 

If you click the second version you'll see what I mean. Here is a screenshot:  

Do you want me to send the animate file? I added code in animate and the html...

Thank you so much for your help again! 

Regards,

Adele

[JoãoCésar]

Thanks for providing more details.

I don't see a link to another version but if you can upload your FLA to somewhere like Creative Cloud, Google Drive or WeTransfer, and post the link here, it will certainly be very helpful.

Regards,

JC

[Guest]

Ok great, thank you for checking! 

Here is the link:

https://we.tl/t-2cHgznq6MC

Regards,

Adele

[JoãoCésar]

Thanks for the file.

It seems your code expects a object called bild. What is this and where is this coming from?

Also the .xlsx cannot be loaded regularly without some kind of third party library. So what are you using to load this file? Would it be possible to exchange the XSLX file for a JSON or CSV file?

And if I understood correctly, in the .xslx file there are three rows for each text field. So what row should be used?

Regards,

JC

[Guest]

The object "bild" is a image that also changes. But that just works fine. 

In the end the image file, xslx, html, javascript and the fonts are getting uploaded at adform.com. From there I can see all images and textfields that are changing within the different sujets. If I would want to, I could publish the banner as a programmatic banner. Its kind of the same thing I want to do.

As far as I know I need the xslx file for it to work. I want to use all rows thats why I have the problem with the text. If I insert a longer text its upon the other text - thats what I want to fix. Like on a website. When the text in the field above changes the lower text automatically moves down. So all of the textfields automatically have a spacing in between. 

Do you know what I mean? I'm sorry if it still isn't clear, it's very hard to explain.

Regards,

Adele

[JoãoCésar]

Hi.

As there some things that I don't understand in your file, I created a simple sample that i hope will help you to get started.

Javascript:

// The SheeJS library is included in the 'Include' section to the left
// https://cdn.sheetjs.com/xlsx-0.19.2/package/dist/xlsx.full.min.js

var xlsxFileName = "test.xlsx";
var sheetName = "Sheet1"; // you can get this name from the console.log(workbook) call below
var rows = [ "1", "2" ];
var targetTextFieldsContainers;

function main()
{
	root.stop();
	targetTextFieldsContainers = [ root.tf0, root.tf1, root.tf2, root.tf3, root.tf4 ];
	readXLSX(xlsxFileName, onXLSXLoaded, { sheetName: sheetName, rows: rows });
}

function readXLSX(src, callback, props)
{
	var req = new XMLHttpRequest();
	var textFields = [];
	var texts = [];
	var data = [];
	var i;

	req.open("GET", src, true);
	req.responseType = "arraybuffer";

	req.onload = function(e)
	{
		var workbook = XLSX.read(req.response);
		var worksheet = workbook.Sheets[props.sheetName];
		var key;
		
		console.log(workbook);
		console.log(worksheet);

		for (key in worksheet)
		{
			if (key.indexOf(props.rows[0]) > -1)
				textFields.push(worksheet[key].h);

			if (key.indexOf(props.rows[1]) > -1)
				texts.push(worksheet[key].h);
		}

		for (i = 0; i < textFields.length; i++)
			data[i] = { tf: textFields[i], text: texts[i] };

		callback(data);
	};

	req.send();
}

function onXLSXLoaded(data)
{
	console.log(data);
	
	data.forEach(function(item)
	{
		if (targetTextFieldsContainers.indexOf(root[item.tf]) > -1)
			root[item.tf].tf.text = item.text;
	});

	stackTextFields(targetTextFieldsContainers);
}

function stackTextFields(targets)
{
	targets.forEach(function(tf, index, array)
	{
		var currentHeightOffset = tf.tf.getMeasuredHeight() * 0.5;
		
		tf.tf.y = -currentHeightOffset;
		
		if (index > 0)
		{
			var previousTF = array[index - 1];
			tf.y = previousTF.y + previousTF.tf.getMeasuredHeight() * 0.5 + currentHeightOffset;
		}
	});
}

if (!this.looped)
{
	window.root = this;
	main();
	root.looped = 1;
}

In your case the sheet name is Tabelle1.

Source / files / FLA / code:
https://bit.ly/3DW426o

I hope it helps.

Regards,
JC