You are here:

Configure an Alteryx Tool

The term “HTML5 Plugin” loosely describes a custom tool consisting of two components:

the GUI, shown in Designer’s Configuration window
the Engine, which processes logic to handle records passed to and from the Alteryx Engine

The GUI component must be written in HTML5 using the HTML GUI SDK. The engine component can be written in any of the supported languages:

To see C++ and legacy documentation, check your Alteryx installation location for \Alteryx\APIs\AlteryxSDK.zip\Documentation\AlteryxSDK.chm.

Tool location

An HTML5 Plugin and its components reside in the Alteryx installation location:

\bin\HtmlPlugins

The name of the directory is used as the label for the tool in Designer.

\bin\HtmlPlugins\MyNewPlugin

The directory must include a configuration file and all dependencies required by the tool, such as JavaScript libraries, style sheets, and help.

Tool files

A custom tool needs the following files to execute correctly. These pages can be built manually, or can be created using the Alteryx Tool Generator.

Configuration XML file

The configuration file name must be the directory name with the suffix "Config.xml".

\bin\HtmlPlugins\MyNewPlugin\MyNewPluginConfig.xml

Example XML

<AlteryxJavaScriptPlugin>
	<EngineSettings EngineDll="HTML" EngineDllEntryPoint="JavaScriptCountEngine.html" />
 	<GuiSettings Help="JavaScriptCountEngine.html" Html="JavaScriptCountGui.html" Icon="JavaScriptCountIcon.png">
		<InputConnection>
			<Connection Name="Input1" AllowMultiple="False" Optional="True" Type="Connection" Label="I" />
		</InputConnection>
		<OutputConnection>
			Connection Name="Output" AllowMultiple="True" Optional="True" Type="Connection" Label="O" />
		</OutputConnection>
	</GuiSettings>
</AlteryxJavaScriptPlugin>

The file must contain the tag <AlteryxJavaScriptPlugin> with two children:

EngineSettings element: How the plugin interacts with the Designer engine:

EngineSettings attributes

Attribute	Required	Settings
EngineDll	Yes	Set to HTML if the Engine plugin is written in HTML5. Set to the name of the plugin if using any other plugin's Dll. The file must adhere to the JavaScript Engine Plugin API.
EngineDllEntryPoint	Yes	If EngineDll is set to HTML, set to the name of the HTML5 containing the engine plugin logic. If EngineDll is not set to HTML, set to the name of the function entry point in the corresponding engine plugin. The file must adhere to the Engine Plugin API.

Attribute

Required

Settings

EngineDll

Yes

Set to HTML if the Engine plugin is written in HTML5.

Set to the name of the plugin if using any other plugin's Dll.

The file must adhere to the JavaScript Engine Plugin API.

EngineDllEntryPoint

Yes

If EngineDll is set to HTML, set to the name of the HTML5 containing the engine plugin logic.

If EngineDll is not set to HTML, set to the name of the function entry point in the corresponding engine plugin.

The file must adhere to the Engine Plugin API.

GuiSettings element: How the plugin interacts with the Designer GUI.

GuiSettings attributes

Attribute	Required	Settings
Help	No	Leave blank to reference HTML-<plugin_directory_name> If the directory name contains spaces, the spaces will be removed when generating the file name. The directory name cannot contain :/?#[]@!$&'(,;= Set to the full URL for a custom help page. Set to the name a .html file containing a custom help page
Html	Yes	Set to the name of the HTML5 file containing the GUI component of your plugin.
Icon	No	Set to the name of a .png file containing your plugin's icon.

Attribute

Required

Settings

Help

Leave blank to reference HTML-<plugin_directory_name>

If the directory name contains spaces, the spaces will be removed when generating the file name. The directory name cannot contain :/?#[]@!$&'(,;=

Set to the full URL for a custom help page.

Set to the name a .html file containing a custom help page

Html

Yes

Set to the name of the HTML5 file containing the GUI component of your plugin.

Icon

Set to the name of a .png file containing your plugin's icon.

InputConnections element: Define parameters for incoming data streams.

InputConnections attributes

Attribute	Required	Settings
Name	Yes	The name of the Input tab.
AllowMultiple	No	Set to "True" to allow multiple connections on a tab.
Optional	No	Set to "True" if the connection is optional.
Type	No	Set to "Connection".
Label	No	Set to a single character to create a label for the input connection.

OutputConnections element: Define parameters for output data streams.

OutputConnections attributes

Attribute	Required	Settings
Name	Yes	The name of the Input tab.
AllowMultiple	No	Set to "True" to allow multiple connections on a tab.
Optional	No	Set to "True" if the connection is optional.
Type	No	Set to "Connection".
Label	No	Set to a single character to create a label for the input connection.