animate + *.xlsx

I want to display data linked to a row (ft0)
When you enter any number in row (ft0)

All data for the row appears .

Hi.

Here is a suggestion.

Javascript code:

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

var xlsxFileName = "name_id.xlsx";
var sheetName = "Sheet1"; // you can get this name from the console.log(workbook) call below
var totalTextFields = 19;
var typeDelay = 250;
var targetTextFieldsContainersrowInput, rowInput, typeTimeout;

function main()
{
	root.stop();
	targetTextFieldsContainers = [ root.tf0, root.tf1, root.tf2, root.tf3 ];
	clearTextFields();
	stage.on("drawend", onDrawEnd, null, true);
}

function onDrawEnd()
{
	rowInput = document.getElementById("rowInput");
	rowInput.addEventListener("input", onRowInputChange);
}

function onRowInputChange(e)
{
	var value = e.target.value;
	
	clearTextFields();
	clearTimeout(typeTimeout);
	typeTimeout = setTimeout(readData, typeDelay, value);
}

function readData(value)
{
	if (!isNaN(value) && parseInt(value) > 0 && parseInt(value) < totalTextFields + 1)
		readXLSX(xlsxFileName, onXLSXLoaded, { sheetName: sheetName, rows: [ "1", parseInt(value) + 1 ] });
}

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", workbook);
		console.log("worksheet", 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 || worksheet[key].w);
		}

		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);
	
	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;
		}
	});
}

function clearTextFields()
{
	targetTextFieldsContainers.forEach(function(tf){ tf.tf.text = "" });
}

window.root = this;
main();

Files / download / FLA / source:

https://bit.ly/3DW426o

I hope this helps.

Regards,

JC

you need to load some external libraries for that to work. 

start with, where did that code come from?

@JoãoCésar17023019