HTML GUI SDK

The HTML GUI SDK is a library that provides a variety of extensions for creating the graphical user interface (GUI) in a tool's configuration window in a Alteryx Designer workflow. This library enables users to quickly create configuration panels for their custom tools with consistent appearance and easy maintenance.

Prerequisites

Creating a custom tool with an HTML GUI involves working with an SDK. For this reason, it is assumed you have familiarity with

HTML
JavaScript
File management

The library consists of three categories of classes:

Widgets: Classes that creates the user interface, providing control appearance and action.
Data items: Classes that store values and configuration, allowing for persistence in the configuration between interactions with the tool.
Core: Classes that manage the tool life cycle and connect widgets and data items.

For more information about these classes, see API reference documentation.

SDK Use

To use the SDK, you need to determine how your tool needs to handle configuration loading and persistence, and how the tool synchronizes data. There are a number of lifecycle method options, which provide different levels of persistence and difficulty. See Lifecycle Methods to determine the best approach for your tool.

Once you have determined the functionality of your tool:

See Supported Widgets for what interface elements you can use to match the Alteryx style.
See Supported Data Items to determine how to store the user data from the widgets.

Should you need to debug the CEF while developing, see Debugging the CEF.

Build your own tool checklist

	Create a folder with the name of your tool. See Build Custom Tools.
	Create icon and save it inside the tool folder. See Build Custom Tools.
	Create a GUI file and save it inside the folder. See HTML GUI SDK.
	Create your back end and save it inside the folder. See Macro or Python SDK.
	Create a configuration file and save it inside the folder. See Tool Configuration File.
	Create a package configuration file and save it with the folder. Package a Tool.
	Package the package configuration file and tool folder as a yxi. See Package a Tool.