Dev Space
Customize and extend the power of Alteryx with SDKs, APIs, custom tools, and more.
Hey Taylor:
See below for example setting it all up. Stuck in one file but I'd have as two by default:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello From JavaScript</title>
<script>
document.write(`<link rel="stylesheet" type="text/css" href="${window.Alteryx.LibDir}1/css/alteryx-config.css">`)
document.write(`<link rel="stylesheet" type="text/css" href="${window.Alteryx.LibDir}1/lib/alteryx/gui/plugin-widgets/alteryx-desktop-widgets.css">`)
document.write(`<link rel="stylesheet" type="text/css" href="${window.Alteryx.LibDir}1/lib/build/designerDesktop.css">`)
document.write(`<script src="${window.Alteryx.LibDir}1/lib/build/designerDesktop.bundle.js">\x3c/script>`)
</script>
<script>
function setupItem(manager, AlteryxDataItems, name, password) {
if (!manager.GetDataItemByDataName(name)) {
manager.AddDataItem(new AlteryxDataItems.SimpleString({ dataname: name, id: name, initialValue: '', password: (password ? 'true': '') }));
}
}
function wireUpTextbox(manager, name) {
const item = manager.GetDataItemByDataName(name)
const element = document.getElementById(name)
element.value = item.getValue()
element.onkeyup = (event) => item.setValue(event.target.value)
}
Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
setupItem(manager, AlteryxDataItems, 'siteUrl');
setupItem(manager, AlteryxDataItems, 'userName');
setupItem(manager, AlteryxDataItems, 'userPass', true);
}
Alteryx.Gui.AfterLoad = function (manager, AlteryxDataItems) {
wireUpTextbox(manager, 'siteUrl')
wireUpTextbox(manager, 'userName')
wireUpTextbox(manager, 'userPass')
}
</script>
</head>
<body>
<form>
<!-- Site URL -->
<div class="field">
<label for="siteUrl">Site URL</label>
<input placeholder="https://example.atlassian.net" id="siteUrl" name="siteUrl" type="text">
</div>
<!-- Username or Email -->
<div class="field">
<label for="userName">Username or Email</label>
<input placeholder="your.username" id="userName" name="userName" type="text">
</div>
<!-- Password -->
<div class="field">
<label for="userPass">Password</label>
<input placeholder="your password" id="userPass" name="userPass" type="password">
</div>
<form>
</body>
</html>Doesn't use the plugin widgets but uses the manager. Password will be stored encrypted (there are a few quirks to the data items!).
UI looks like:
Resulting in a configuration of:
<Configuration> <Value name="siteUrl">http://www.google.co</Value> <Value name="userName">jdunkerley</Value> <Value name="userPass">40CF28641A05AAA25911179DFD26A4BB78D82002D755C4FED37D7502FC3B1190540F9170A878D715AAB1911A90F89CF0F26A8B9207517CB7B6591B34E6AC89192C39C7AE9C2B79A11D78C5BD3106D45BBA6A5068C4EE474D7616E541603C992FB3D3788C985095284854EE4E639CA</Value> </Configuration>
Hopefully enough for you to pull apart but happy to help as you need
Best
James
Thanks, @jdunkerley79 - this works like a charm.
I'm still a little perplexed in trying to understand why my original attempt won't work. To be more clear, I was using 2/lib/build/designerDesktop.bundle.js
document.write(`<script src="${window.Alteryx.LibDir}2/lib/build/designerDesktop.bundle.js">\x3c/script>`)(v2 of SDK?) - Not sure what the difference is at this point. I noticed you were using 1/lib/build/designerDesktop.bundle.js
Anyway, using 2/lib/build/designerDesktop.bundle.js with the original JavaScript above, here is the behaviour.
New Tool instance saves DataItems to Manager and writes to config with no issues:
But loses the Password in AfterLoad...(encrypted pass is still visible in the config)
Again, a bit perplexed about why that is happening and I'm sure I've missed something. For now, however, I'll switch over to the 1/lib/build/designerDesktop.bundle.js and begin using your refactored approach (TypeScript, I assume?)
Thanks a bunch!
I still prefer some aspects of the v1 API over v2 but in general, can do same things in both. I do need to update my typings file for v2.
As a quick example I added a list of items to the UI:
Basically, I chose to keep a data item inline with the UL via JSON serialization on each change. Seemed to work pretty well
Script looks like:
function setupItem(manager, AlteryxDataItems, name, password) {
if (!manager.getDataItem(name)) {
manager.addDataItem(new AlteryxDataItems.SimpleString(name, { password: !!password }) );
}
}
function wireUpTextbox(manager, name) {
const item = manager.getDataItem(name)
const element = document.getElementById(name)
item.registerPropertyListener('value', (propertyChangeEvent) => element.value = propertyChangeEvent.value)
element.value = item.getValue()
element.onkeyup = (event) => item.setValue(event.target.value)
}
Alteryx.Gui.BeforeLoad = (manager, AlteryxDataItems, json) => {
setupItem(manager, AlteryxDataItems, 'siteUrl')
setupItem(manager, AlteryxDataItems, 'userName')
setupItem(manager, AlteryxDataItems, 'userPass', true)
setupItem(manager, AlteryxDataItems, 'dataitems')
}
Alteryx.Gui.AfterLoad = (manager, AlteryxDataItems) => {
wireUpTextbox(manager, 'siteUrl')
wireUpTextbox(manager, 'userName')
wireUpTextbox(manager, 'userPass')
const itemsElement = document.getElementById('items')
const dataitems = manager.getDataItem('dataitems')
const createItem = (text) => `<li onclick="removeItem(this)">${v}</li>`
window.removeItem = (item) => {
itemsElement.removeChild(item)
dataitems.setValue(JSON.stringify([...itemsElement.children].map(e => e.innerHTML)))
}
if (dataitems.getValue()) {
JSON.parse(dataitems.getValue()).forEach(v => itemsElement.innerHTML += createItem(v))
}
const itemElement = document.getElementById('item')
itemElement.onkeyup = (event) => {
if (event.keyCode === 13) {
itemsElement.innerHTML += createItem(v)
itemElement.value = ""
dataitems.setValue(JSON.stringify([...itemsElement.children].map(e => e.innerHTML)))
}
}
}and new UL in body:
<!-- Demo List -->
<div class="field">
<ul id="items"></ul>
<input placeholder="Item to add" id="item" name="item" type="text">
</div>
As a side note: @TashaA / @LeahK - we badly need to be able to attach html/js/zip and pretty much whatever devs need to these threads
@RyanSw Thanks for the tip regarding the asynchronicity! Probably a good idea to get that documented sooner rather than later :-) Nonetheless, it was an easy fix to the problem at hand and I've gone back to v2 of the SDK.
Per using the BeforeGetConfiguration and AfterGetConfiguration methods...
How would one go about updating this "later on". For example, given this form, a user logs in (connects to JIRA) and I immediately call a project API endpoint that returns a list of available projects for the user. When I get the json back (asynchronously) from the call, I'd like to SetConfiguration and update the list of available projects (config shown below).
Is this where window.Alteryx.JsEvent methods come in handy? Obviously, window.Alteryx.Gui.BeforeGetConfiguration has long been called at this point. Again, the goal is to not have to call the API to get a list of projects every single time the tool is instantiated, but only when the user either needs to update their login credentials or manually asks for the project list to be refreshed. Just trying to be agile and lean at the same time..
UI
// User Login
$('#loginForm').submit(function(event){
event.preventDefault();
userLogin();
});See line # ~27 --> if (loginResponse == 'OK')
var userLogin = function userLogin() {
message(false, null, null, null)
$('#loginForm').form('validate form')
if ($('#loginForm').form('is valid')) {
loader(true, 'Logging in to JIRA...')
// Get user input
var baseUrl = $('#siteUrl').val()
var uri = baseUrl + '/rest/api/latest/project'
var auth = 'Basic ' + btoa($('#userName').val() + ':' + $('#userPass').val())
$.ajax({
url: uri,
type: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': auth
},
success: function (data, status, response) {
var loginResponse = response.getResponseHeader('x-seraph-loginreason')
if (loginResponse == 'OK') {
updateProjects(data) // I WANT THIS METHOD TO UPDATE THE CONFIG WITH THE PROJECT LIST
loadPage('projects')
} else if (loginResponse == 'AUTHENTICATED_FAILED') {
loader(false,null)
message(true, 'negative', 'Whoops!', 'Authentication failed. Double check your username and password.')
} else if (loginResponse == 'AUTHENTICATION_DENIED') {
loader(false,null)
message(true, 'negative', 'Whoops!', 'Authentication was denied. This is often due to CAPTCHA triggered from failed login attempts. This can usually be fixed by signing in to JIRA in your browser. (sign out, first)')
} else if (!loginResponse) {
loader(false,null)
message(true, 'negative', 'Whoops!', 'Authentication failed because the response from <strong>' + baseUrl + '</strong> didn\'t includes the correct headers. Perhaps the URL was mistyped?')
} else {
message(true, 'negative', 'Whoops!', 'Authentication failed for an unknown reason.')
loader(false,null)
}
},
error: function (data, status, response) {
loader(false,null)
message(true, 'negative', 'Whoops!', 'Authentication failed...<br><br>Status: ' + JSON.stringify(status) + '<br>Response: ' + JSON.stringify(response))
}
});
Ideally this would update the config to look like this:
Furthermore, to access the XML config object called jiraprojects at any time, is this correct syntax?
window.Alteryx.JsEvent(JSON.stringify({ Event: 'GetConfiguration', Configuration: { Configuration: { jiraprojects } } }))
Lastly... @TashaA / @LeahK ... +1 on @jdunkerley79's suggestion
we badly need to be able to attach html/js/zip and pretty much whatever devs need to these threads
