Dev Space

stizz001 · ‎05-22-2017

Hello,

I am currently developing an Javascript HTML plugin using the JavascriptPluginExample as my base. It has been very helpful, however I am at a point where I cannot continue because when the user runs the workflow, I need to hit an API that is outside of Alteryx. To do this I am currently using the Alteryx.Plugin.II_PushRecords function or the Alteryx.Plugin.PI_PushAllRecords if it is only an output. I can see in fiddler that my Ajax call is made, and data is returned just fine from the API, but the callback inside the call is never called. I have tested this code on another project, so I know my code should work as is. Can someone please help me understand why the callback is not being called in the Engine file? What I need to do to have these callbacks be called, ect...

I moved the code to the GUI file, and there it did hit the callback just fine. However I do not see an event I can use to hook into when the user runs the workflow. I only see before load and after load, which both run way before the user has entered all needed info and hit play. I am fine with moving the ajax call to the GUI, if there is a proper event I can use for this. Any help would be much appreciated. I am pasting the code below...

GUI FILE....

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript Plugin Example</title>
<script type="text/javascript">
// Include version 1 of the base GUI library.
document.write('<link rel="import" href="' + window.Alteryx.LibDir + '1/lib/alteryx/gui/includes.html">');
</script>
</head>
<body>
<form>

<fieldset>
<legend>Read Configuration</legend>
<label for="auth">Auth Key</label>
<alteryx-pluginwidget data-props='{type:"TextBox",id:"auth",debug:"true",dataName:"auth"}'></alteryx-pluginwidget>

<label for="dropDownList">Type</label>
<alteryx-pluginwidget data-props='{type:"DropDown",id:"dropDownList",dataName:"dropDownList",ignoremissingfields:"true"}'>
<alteryx-option id="default" default>Select a storage engine...</alteryx-option>
<alteryx-option id="sqlserver">MS SQL Server</alteryx-option>
<alteryx-option id="mysql">MySQL / AWS Aurora</alteryx-option>
<alteryx-option id="postgres">PostgreSQL / AWS Redshift</alteryx-option>
<alteryx-option id="oracle">Oracle</alteryx-option>
<alteryx-option id="snowflake">Snowflake</alteryx-option>
<alteryx-option id="documentdb">Azure Document DB</alteryx-option>
<alteryx-option id="mongodb">MongoDB</alteryx-option>
<alteryx-option id="azureblob">Azure Blob Storage</alteryx-option>
<alteryx-option id="s3">AWS S3</alteryx-option>
<alteryx-option id="http">HTTP</alteryx-option>
</alteryx-pluginwidget>
</fieldset>

</form>

/**
* Specify actions that will take place before the tool's configuration is loaded into the manager.
*
* @param manager The data manager.
* @param AlteryxDataItems The data items in use on this page.
*/
Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems) {
};

/**
* Set the tool's default annotation on the canvas.
*
* @param manager The data manager.
* @returns {string}
*/
Alteryx.Gui.Annotation = function (manager) {
return "Set Values of the Configuration Fields to Connect"
//manager.GetDataItem("dropDownList").value;
};

//function updateCodeEditorHintListFromTextBox() {
// var codeEditor = window.Alteryx.Gui.renderer.getReactComponentByDataName('FormulaFields2');
// codeEditor.editor.options.hintList = document.getElementById('csvCodeEditorHintListTextBox').value;
//}

//window.Alteryx.Gui.manager.AppendAlteryxTag({ dataname: 'dataName' + Math.random(), type: 'CheckBox', text: 'this is a dynamically added checkbox' })

</body>
</html>

ENGINE FILE....

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">


<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
// Include version 1 of the engine base library.
document.write('<link rel="import" href="' + window.Alteryx.LibDir + '1/lib/alteryx/engine/includes.html">');

</script>

var auth = '';
var myData = {};
var configToSend = {
};

/**
* Called at the beginning of plugin lifetime with the plugin's configuration properties.
* This implementation contains example code that prints each configuration key/value pair as
* an engine output message.
*
* @params config The plugin's configuration.
*/
Alteryx.Plugin.PI_Init = function (config) {
//Builds out the object that I need to send to the READ API
Alteryx.Engine.SendMessage.Info("Config properties:");
var splitID = [];
for (var i in config.Configuration) {
Alteryx.Engine.SendMessage.Info(i + ": " + config.Configuration[i]);
if (config.Configuration[i]) {
if (i != "dropDownList" && i != "auth") {
splitID = String(i).split(".");
if (splitID.length > 2) {
configToSend.credentials[splitID[2]] = config.Configuration[i];
} else if (splitID.length == 2) {
configToSend[splitID[1]] = config.Configuration[i];
}
} else if (i == "dropDownList") {
if (configToSend["credentials"]) {
configToSend["credentials"]["type"] = connectionType(config.Configuration[i]);
} else {
configToSend["credentials"] = {};
configToSend["credentials"]["type"] = connectionType(config.Configuration[i]);
}
} else {
auth = config.Configuration[i];
}
}
}
//set the config property
Alteryx.Engine.SendMessage.Info(JSON.stringify(configToSend));
};

//takes in the string value of the dropdown connttion type and returns value used in backend
function connectionType(type) {
switch (type) {
case 'MS SQL Server': {
return 'sqlserver';
} case 'MySQL / AWS Aurora': {
return 'mysql';
}
case 'PostgreSQL / AWS Redshift': {
return 'postgres';
}
case 'Oracle': {
return 'oracle';
}
case 'Snowflake': {
return 'snowflake';
}
case 'Azure Document DB': {
return 'documentdb';
}
case 'MongoDB': {
return 'mongodb';
}
case 'Azure Blob Storage': {
return 'azureblob';
}
case 'AWS S3': {
return 's3';
}
case 'HTTP': {
return 'http';
}
}
}

/**
* Called once for each incoming connection with the connection's metainfo. When a per-connection init comes in,
* we would probably store off the incoming RecordInfo.
*
* @params metaInfo The meta-information for the current incoming connection.
*/
Alteryx.Plugin.II_Init = function (metaInfo) {
Alteryx.Engine.SendMessage.RecordInfo("Output", metaInfo.RecordInfo)
};

/**
* After II_Init has been called for each incoming connection, II_PushRecords is called for each non-empty
* incoming connection with that connection's records. This implementation contains example code that
* pushes out the same records it receives.
*
* @param data The incoming records.
*/
Alteryx.Plugin.II_PushRecords = function (data) {
Alteryx.Engine.SendMessage.Info("I AM IN PUSH RECORDS");
var myRecords = [];
var myRow = [];

configToSend["auth"] = auth;
configToSend["truncate"] = false;
// Alteryx.Engine.SendMessage.Info(JSON.stringify(configToSend));

var url = 'this is my url..com';

$.ajax({
url: url,
data: JSON.stringify(configToSend),
contentType: 'application/json',
type: 'POST',
context: document.body,
dataType: 'json'

}).done(function (data) {
myData = data;
Alteryx.Engine.SendMessage.Info("TELL ME I HIT DONE: ");
}).always(function () {
Alteryx.Engine.SendMessage.Info("TELL ME I HIT ALWAYS: ");
}).fail(function () {
Alteryx.Engine.SendMessage.Info("TELL ME I HIT FAIL: ");
})

//THis is alteryx demo code that I will probably need once my ajax calls hit the callbacks correctly
//for (var i = 0; i < data.Records.length; i++) {
// myRow = [];
// for (var j = 0; j < data.Records[i].length; j++) {
// myRow.push(data.Records[i][j]);
// }
// myRecords.push(myRow);
//}
Alteryx.Engine.SendMessage.PushRecords("Output", myData);
};

/**
* II_AllClosed is called with no arguments after all incoming connections have closed. This implementation
* sends a CloseOutput message with the name of the outgoing connection to close.
*
* All code paths must terminate with a call to Alteryx.Engine.SendMessage.Complete()
*/
Alteryx.Plugin.II_AllClosed = function () {
Alteryx.Engine.SendMessage.CloseOutput(Alteryx.Plugin.DefineConnections().OutgoingConnections[0].name);
Alteryx.Engine.SendMessage.Complete();
};

/**
* If the tool has no input:
* PI_PushAllRecords is called instead of the II functions.
* It is also called at configure time with a record limit of 0.
*
* If this function is implemented, all code paths must signal completion with a call to
* Alteryx.Engine.SendMessage.Complete()
*
* @param recordLimit The maximum number of records that this function should return.
*/

//For now, I have an input and an output, but once I remove the input, this is where the API call will need to live.
Alteryx.Plugin.PI_PushAllRecords = function (recordLimit) {
Alteryx.Engine.SendMessage.Error("This tool requires an input connection.");
Alteryx.Engine.SendMessage.Complete();
};

/**
* PI_Close is called with no arguments at the end of the plugin's lifetime.
* All code paths must terminate with a call to Alteryx.Engine.SendMessage.PI_Close()
*/
Alteryx.Plugin.PI_Close = function () {
Alteryx.Engine.SendMessage.PI_Close();
};

</script>
</head>
<body>
</body>
</html>

stizz001 · ‎05-23-2017

Ok I figured out my own answer, thankfully. For those of you that may be dealing with similar issue, what I found was the problem was Alteryx.Engine.SendMessage.Complete() was being called inside of PI_PushAllRecords, before the callback came back from the ajax call in II_PushRecords was called and run. I was focusing on the II_PushRecords instead of the PI_PushAllRecords because I had an input in the connector. It had an input because I could not figure out what to modify to remove the input and have it not timeout. I have since figured that out too, and thus moved the ajax call to the PushAllRecords, and moved the Alteryx.Engine.SendMessage.Complete() inside of the callback. This totally fixed my issue and now I am getting proper data, and am able to load it into Alteryx. I still need to get the proper types and sizes, but for now, at least I am getting the data correctly and everything. The code now looks like below....

return $.ajax({
url: 'this is my url endpoint',
data: JSON.stringify(dataToSend),
contentType: 'application/json',
type: 'POST',
context: document.body,
dataType: 'json'
}).success(function (myData) {
if (myData.length) {
var mapFieldNames = [];
// Define the column metadata based on the first row returned
for (var field in myData[0]) {
// Add that new field's metainfo to the output
mapFieldNames.push({
name: field,
type: "V_WString",
size: 999999
});
}
// Tell alteryx the metadata for the fields
Alteryx.Engine.SendMessage.RecordInfo("Output", { "Field": mapFieldNames });
// Need to return the rows as an array of arrays
Alteryx.Engine.SendMessage.PushRecords("Output", myData.map(function (row) {
return mapFieldNames.map(function (col) {
if (typeof row[col.name] != "undefined") {
return row[col.name];
}
return null;
});
}));
}
}).fail(function (e) {
Alteryx.Engine.SendMessage.Error(JSON.stringify(e));
}).always(function () {
Alteryx.Engine.SendMessage.Complete();
});

Dev Space

Javascript Plugin Connector With AJAX Callback Not Being Run