Alteryx Designer Desktop Discussions
Find answers, ask questions, and share expertise about Alteryx Designer Desktop and Intelligence Suite.
Hi all!
I am currently trying to make a custom tool using the HTML GUI SDK. I have used the boilerplate/example tool given by Alteryx to develop my own. I've managed to create a tool that extracts a list of values from a json api response, display them in a searchable dropdown, and and allow the user to select one.
This works fantastic, it pulls the value through to my macro, and seems to work fine. The problem lies in when the tool is refreshed (reselected). It wipes the configuration.
I think I am missing something really obvious - I did have a look at the following:
https://help.alteryx.com/developer-help/use-beforeload-and-afterload-data-items
However, I'm not perfectly sure this directly aligns as it is relating to a text box rather than a dropdown, which the options for are being refreshed each run.
Below is my code, I have retracted specific elements, these are within double [[]] just to make them stand out.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>[[Title]]</title>
<script type="text/javascript">
// Include the base GUI library.
document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">');
</script>
<style type="text/css">
body {
margin: 15px;
}
#widgetList {
padding-bottom: 20px;
}
.header-ruler {
background-color: #cccccc;
height: 1px;
border: 0 none;
flex-grow: 1;
margin-top: 0.625em;
margin-left: 10px;
}
.header-message {
color: #52617f;
font-size: 1.78em;
font-weight: normal;
padding-bottom: 0px;
margin: 0px;
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
align-items: center;
}
h2 {
padding: 10px 0 5px 0;
margin: 15px 5px 5px 0;
font-size: 1.556em;
font-weight: normal;
color: #52617f;
}
h3 {
color: #8698ba;
font-size: 1.167em;
margin: 6px 0px 3px 0;
padding: 0;
font-weight: normal;
line-height: 1.42857143;
}
h3.container:first-child {
border-top: 0;
}
.flex-row {
margin: 0;
padding: 0;
}
.flex-row li {
list-style: none;
}
</style>
</head>
<body style="visibility: visible">
<div class="header-message">
<div>XMSG("[[header]]")</div>
<hr class="header-ruler">
</hr>
</div>
<article id="widgetList">
<section>
<h2>XMSG("Table Selector")</h2>
<h3> XMSG("Please select which table you would like to extract") </h3>
<ayx data-ui-props='{type:"DropDown", widgetId:"DropDown2", searchable: true}'></ayx>
</section>
</article>
<script type="text/javascript">
const request = new XMLHttpRequest();
request.open('GET', '[[URL]]', false);
request.setRequestHeader('Authorization', 'Basic ' + btoa('[[API]]'));
request.send();
var output = [];
JSON.parse(request.responseText).map(item => output.push({ label: item.title, value: item.value }));
console.log(output);
Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
var stringSelector = new AlteryxDataItems.StringSelector('DropDownStringSelector2', {
optionList: output
})
manager.addDataItem(stringSelector)
manager.bindDataItemToWidget(stringSelector, 'DropDown2') // Bind to widget
}
</script>
</body>
</html>
Any help would be massively appreciated!
