community
cancel
Showing results for 
Search instead for 
Did you mean: 

Dev Space

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

HTML SDK - Triggering Events with Alteryx Plugin Widget

Alteryx Certified 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}/>
);

 

and 

 

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(',')) {
selected.push(i);
}
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;
this.dataItem.setValue(this.dataItem.value);
}

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

this.updateParentDataItem();
}

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

Try...

Alteryx.Gui.AfterLoad = function(manager, AlteryxDataItems) {
   manager.GetDataItem("models").BindUserDataChanged(test);
}
Alteryx
Alteryx

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
Bolide

Hello,

 

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
public 

bindDataItemToWidget(dataItem: DataItem, widgetId: string)

Binds a data item to a widget.

 
public 

deleteProp(widgetId: string, prop: string)

Deletes a property from a widget.

 
public 

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

Returns the value of a widget property.

 
public 

removeWidget(widgetId: string, removeTag: boolean)

Removes a widget from the manager.

 
public 

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

Sets a property of a widget.

 
public 

setProps(widgetId: string, props: object)

Sets multiple properties of a widget.

 
public 

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.

 

Thanks,

 

Rick