Can't write data to output in HTML SDK

[KMears]

I've got an HTML SDK macro that walks a user through getting some files from a server. I'd like to output the base64 strings for each file they choose.

Name	Contents
File1	base64 contents
File2	base64 contents

I'm using v2 of the SDK. How do I write to the output stream? I've tried things like Alteryx.Plugin.II_PushRecords, but Alteryx.Plugin is undefined. I'm assuming that's part of v1 and it's different in v2?

Thanks

[jdunkerley79]

Can you post a link to the code?

The Alteryx.Plugin is part of the HTML Engine SDK and can't be called from the GUI as far as I know.

[KMears]

This is using v2 of the SDK. I had to remove some proprietary info, but I think you will get the idea.

There's nothing in here for writing to the output connector because I don't even know where to start. I saw things like II_PushRecord, but maybe that's only v1?

// global vars
var _baseUrl = '';
var _clientUrl = _baseUrl + '';
var _oauthUrl = _baseUrl + '';
var _engagementsUrl = _baseUrl + '';
var _blobStorageUrl = _baseUrl + '';
var engagementsData;
var outputData = [];

var _file_URI = "";
var auth_token = "";

//Alteryx BeforeLoad
 window.Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
	const dataEngagementsItem = new AlteryxDataItems.StringSelector('EngagementsData', {});

	manager.addDataItem(dataEngagementsItem);
	manager.bindDataItemToWidget(dataEngagementsItem, 'EngagementList');

	const dataExtractsItem = new AlteryxDataItems.StringSelectorMulti('ExtractsData', {manager: manager, connectionIndex: 0, anchorIndex: 0, delimiter: '","'});

	setJsonSerialiser(dataExtractsItem);
	manager.addDataItem(dataExtractsItem);
	manager.bindDataItemToWidget(dataExtractsItem, 'ExtractList');
}
 
//Alteryx AfterLoad
window.Alteryx.Gui.AfterLoad = function (manager, AlteryxDataItems) {
	if (manager.getDataItem('view').getValue() == '') {
		manager.getDataItem('view').setValue('1');
	}
	
	if (manager.getDataItem('id_token').getValue() == '') {
		login(manager);
	}
	viewSwitch(manager);
}
	 
//Alteryx Annotation (Tool Tips)
window.Alteryx.Gui.Annotation = function (manager) {
	return 'XDP Download'
}

//PwC OAuth Token Request
function login (manager) {
	var win = window.open(_clientUrl, 'windowname1', 'width=800, height=600')
	var pollTimer = window.setInterval(function () {
		try {
			if (win.document.location.href == _clientUrl) {
			$(win.document).ready(function() {
				win.document.location.href = _oauthUrl;
			});
			}
			else if (win.document.location.href == _oauthUrl) {
			win.innerWidth = 1;
			win.outerWidth = 1;
			$(win.document).ready(function() {
				var _token = win.document.getElementById('id_code').value;
				var _bearer = win.document.getElementById('oauth_code').value;
				
				if (_token) {
					manager.getDataItem('id_token').setValue(_token);
					manager.getDataItem('oauth_token').setValue(_bearer);
					manager.getDataItem('view').setValue('2');
					$.ajaxSetup({
						beforeSend: function (xhr) {
							xhr.setRequestHeader('OBO_ID_TOKEN', _token);
							xhr.setRequestHeader('PROVIDER_AUTH_TOKEN', _token);
						}
					});
					win.close();
					getEngagements(manager);
					viewSwitch(manager);
				}
			});
			}
		} catch (e) {
		}
	}, 500)
}

function getEngagements(manager) {
	$("#errorMsg").text("");
	$("#errorMsg").hide();
	$.ajax({
		url: _engagementsUrl,
		accept: 'application/json',
		success: function(results) {
			engagementsData = results;
			populateEngagements(manager);
		},
		error: function(msg) {
			$("#errorMsg").text(msg.toString());
			$("#errorMsg").show();
		}
    });
}

function populateEngagements(manager) {
	var optionList = [];

	for (var i = 0; i < engagementsData.length; i++) {
		var engagement = {};

		engagement["label"] = engagementsData[i].name;
		engagement["value"] = engagementsData[i].id;
		optionList.push(engagement);
	}
	manager.getDataItem('EngagementsData').setOptionList(optionList);
	manager.getDataItem('EngagementsData').setValue("");
	manager.getDataItem('view').setValue('2');
	viewSwitch(manager);
}

function populateExtracts(manager) {
	if (!engagementsData) {
		getEngagements(manager);
		manager.getDataItem('view').setValue('2');
		viewSwitch(manager);
	} else {
		var optionList = [];
		var engagement = engagementsData.filter(function(item){
			return item.id == manager.getDataItem('EngagementsData').getValue();
		});
		if (engagement) {
			var extracts = engagement[0].extracts;

			for (var i = 0; i < extracts.length; i++) {
				var result = extracts[i];
				var extract = {};

				extract["label"] = result.name;
				extract["value"] = result.id;
				optionList.push(extract);
			}
			manager.getDataItem('ExtractsData').setOptionList(optionList);
			setJsonSerialiser(manager.getDataItem('ExtractsData'));
			manager.getDataItem('ExtractsData').setValue("");
			manager.getDataItem('view').setValue('3');
			viewSwitch(manager);
		}
	}
}

function populateSelectedExtracts(manager) {
	if (!engagementsData) {
		getEngagements(manager);
		manager.getDataItem('view').setValue('2');
		viewSwitch(manager);
	} else {
		var extracts = [];
		var resultsString = "";
		var results = manager.getDataItem('ExtractsData').getValue();
		var engagement = engagementsData.filter(function(item) {
			return item.id == manager.getDataItem('EngagementsData').getValue();
		});

		for (var i = 0; i < results.length; i++) {
			var extract = engagement[0].extracts.filter(function(item) {
				return item.id == results[i];
			});

			extracts.push(extract);
		}
		for (var i = 0; i < extracts.length; i++) {
			resultsString += extracts[i][0].name + "<br />"
			getFiles(manager, extracts[i][0].id);
		}
		$("#selectedExtracts").html(resultsString);
	}
}

function getFiles(manager, id) {
	$("#errorMsg").text("");
	$("#errorMsg").hide();
	$.ajax({
		url: _blobStorageUrl + "/" + _file_URI,
		accept: 'application/json',
		beforeSend: function(request) {
			request.setRequestHeader("Content-Type", "multipart/form-data");
			request.setRequestHeader("PROVIDER_AUTH_KEY", auth_token);
		},
		success: function(results) {
			var data = btoa(unescape(encodeURIComponent(results)));

			addFile2DataTable(manager, data);
		},
		error: function(msg) {
			$("#errorMsg").text(msg.statustext + ": " + msg.responseText);
			$("#errorMsg").show();
		}
    });
}

function addFile2DataTable(manager, data, num) {
	var mapFieldNames = [];

	mapFieldNames.push({
		name: "File" + num,
		type: "V_String",
		size: 2147483647
	});
}

function setJsonSerialiser (item) {
	const innerFn = item.fromJson

	item.fromJson = (e, t, n) => (typeof n === 'string' && innerFn(e, t, n.replace(/(^")|("$)/g, '')))
	item.toJson = (e, t) => e({ DataItem: `"${item.getValue().join(item.getDelimiter())}"`, DataName: item.getDataName() })
}

/*********************************************************************************************
**********************************************************************************************

Functions that switch between different fieldsets in
the configuration window and populate gui visuals

**********************************************************************************************
*********************************************************************************************/
// Resets all fields to blank - used when a user decides to start over
function resetFields (e) {
	e.view.Alteryx.Gui.Manager.getDataItem('view').setValue('1');
	e.view.Alteryx.Gui.Manager.getDataItem('id_token').setValue('');
	viewSwitch(e.view.Alteryx.Gui.Manager)
}

function DebugClearValues (e) {
	e.view.Alteryx.Gui.Manager.getDataItem('view').setValue('10');
	e.view.Alteryx.Gui.Manager.getDataItem('id_token').setValue('');
	viewSwitch(e.view.Alteryx.Gui.Manager)
}

function Step1(e) {
	e.view.Alteryx.Gui.Manager.getDataItem('view').setValue('1');
	e.view.Alteryx.Gui.Manager.getDataItem('id_token').setValue('');
	viewSwitch (e.view.Alteryx.Gui.Manager);
	login(e.view.Alteryx.Gui.Manager);
}

function Step2 (e) {
	e.view.Alteryx.Gui.Manager.getDataItem('view').setValue('2');
	viewSwitch(e.view.Alteryx.Gui.Manager);
}

function Step3 (e) {
	populateExtracts(e.view.Alteryx.Gui.Manager);
	e.view.Alteryx.Gui.Manager.getDataItem('view').setValue('3');
	viewSwitch(e.view.Alteryx.Gui.Manager);
}

function Finish (e) {
	//populateSelectedExtracts(e.view.Alteryx.Gui.Manager);
	e.view.Alteryx.Gui.Manager.getDataItem('view').setValue('4');
	viewSwitch(e.view.Alteryx.Gui.Manager);
}

function Debug (e) {
	e.view.Alteryx.Gui.Manager.getDataItem('view').setValue('10');
	viewSwitch(e.view.Alteryx.Gui.Manager);
}

function logout (e) {
	resetFields(e);
	login(e.view.Alteryx.Gui.Manager);
}

function viewSwitch (manager) {
	$('#Step1View').hide();
	$('#Step2View').hide();
	$('#Step3View').hide();
	$('#Step4View').hide();
	$('#Step10View').hide();
	switch (manager.getDataItem('view').getValue()) {
	case '1':
		$('#Step1View').show();
		break
	case '2':
		if (engagementsData) {
			$('#Step2View').show();
		} else {
			getEngagements(manager);
		}
		break
	case '3':
		if (engagementsData) {
			$('#Step3View').show();
		} else {
			manager.getDataItem('view').setValue('2');
			viewSwitch(manager);
		}
		break
	case '4':
		if (manager.getDataItem('ExtractsData').getValue()) {
			populateSelectedExtracts(manager);
			$('#Step4View').show();
		} else {
			manager.getDataItem('view').setValue('3');
			viewSwitch(manager);
		}
		break
	case '10':
		$('#Step10View').show();
		break		
	default:
		resetFields();
  };
}

Thanks!

[jdunkerley79 · Accepted solution]

The push records function is only the engine piece. Don't think this has been updated since 10.1 tho it does still work (pretty sure it's not supported so may disappear at some point).

My suggestion would be to serialize the data you need into a JSON string. You can then store this a configuration tool.

Create a backing macro which takes this configuration setting, then uses the JSON parse tool to deconstruct it into whatever results you need. 

I am happy to stick a simple example YXI file together showing what I mean (but will take me a bit of time as not a 2 second thing to build).

J

[KMears]

Why didn't I think of that. Makes total sense. Thanks @jdunkerley79!