Showing results for 
Search instead for 
Did you mean: 

Dev Space

Customize & extend the power of Alteryx. SDKs, APIs, custom tools, and more!

HTML SDK - Triggering Events with Alteryx Plugin Widget

Alteryx Partner

I am using the (fairly) new HTML/Javascript SDK [which is awesome btw] but I am having a hard time on a specific action. 


Here is the html code I am trying (it's not triggering the test() function):


<alteryx-pluginwidget type="DropDown" id="model_dd" dataName="models" onchange="test()"></alteryx-pluginwidget>


this is a dropdown that i just want to trigger a function once a user changes the value in the dropdown, standard stuff. What's bizzare though is if I use some other events like "onmouseleave" it works in the way it should. 


I looked at the Dropdown.jsx file that I believe is rendering this alteryx-pluginwidget and I see this:


return (
<Select name="DropDownSelect" ref="widget" multi={this.state.isMultiselect}
value={newtonJsonSpecialValue} options={this.state.options ? this.state.options : options} searchable={false}
placeholder={this.props.placeholder ? this.props.placeholder : "Select..."} clearable={false}
onChange={this.handleChanged} {...this.props}/>




handleChanged = (value) => {

if (this.dataItem) {
let isAddFieldOption = value === DropDown.AddFieldLabel;
if(value.split(',').length > 1 && this.dataItem.GetFieldList){
let selected = [];
if (this.dataItem !== null) {
for (let i of value.split(',')) {
this.dataItem.setValue(selected, false);
else if(this.dataItem.setValue && value.split(',').length === 1){
if(value) {
this.dataItem.setValue(isAddFieldOption ? DropDown.AddFieldLabel : value, false, isAddFieldOption);
else {
let newValue = this.state.isMultiselect ? [] : null;
this.dataItem.setValue(isAddFieldOption ? DropDown.AddFieldLabel : newValue,false, isAddFieldOption);
else if(this.dataItem.value['#text']){
this.dataItem.value['#text'] = value;

if (isAddFieldOption) {
this.setState({displayAddFieldTextBox: true});


if (typeof this.props.onchange === 'function') this.props.onchange(value);
if (this.props.onChange) this.props.onChange(value);

this.setState({value: value});


I am not understanding how this piece is working: " onChange={this.handleChanged}"


any ideas?

Sr. Community Content Manager
Sr. Community Content Manager


Alteryx.Gui.AfterLoad = function(manager, AlteryxDataItems) {
Alteryx Alumni (Retired)

I wanted to update this thread to let you know that we have new SDK documentation available for our HTML GUI SDK, which was released in as a beta in 11.5. You can find documentation for both the HTML GUI SDK online. We'd love for you to provide your feedback here

Rachel Wynn
Product Manager - Designer



Has something changed?  I tried this and get the error "...manager.getDataItem(...).BindUserDataChanged is not a function".  I reviewed the documentation and this is what I see for the manager object:


Public Methods

bindDataItemToWidget(dataItem: DataItem, widgetId: string)

Binds a data item to a widget.


deleteProp(widgetId: string, prop: string)

Deletes a property from a widget.


getProp(widgetId: string, prop: string): *

Returns the value of a widget property.


removeWidget(widgetId: string, removeTag: boolean)

Removes a widget from the manager.


setProp(widgetId: string, prop: string, value: *)

Sets a property of a widget.


setProps(widgetId: string, props: object)

Sets multiple properties of a widget.


unbindDataItemFromWidget(dataItem: DataItem, widgetId: string)

Unbinds a data item from a widget.


What is the best way to trigger an event based on a drop-down selection change without the "BindUserDataChanged" method?


Update: I also reviewed all of the methods for the dataItem and extended objects and didn't see anything there either.


Update 2: it looks like "registerPropertyListener" is what I'm looking for so nevermind.