HTML GUI SDK
Importante
The HTML GUI SDK uses outdated technology that limits your extension opportunities. We've built a new Platform SDK using Python and the latest open-source technology to deliver a vastly improved development experience. Go to Platform SDK to get started!
The HTML GUI SDK is a library of extensions used to create the graphical user interface (GUI) for the configuration panel for a custom Alteryx Designer tool.
Prerequisites
Creating a custom tool with an HTML GUI involves working with an SDK. For this reason, we assume you are familiar with:
HTML
JavaScript
File Management
The library consists of 3 categories of classes:
Widgets: Classes that create the user interface, providing control of 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's lifecycle, and connect widgets and data items.
For more information about these classes, go to API reference documentation.
SDK Use
To use the SDK, 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...
Go to Supported Widgets for interface elements you can use to match the Alteryx style.
Go to Supported Data Items to determine how to store the user data from the widgets.
To debug the CEF, refer to Debugging the CEF.
Build Your Own Tool Checklist
Create a folder with the name of your tool. Go to Build Custom Tools for more information.
Create an icon and save it inside the tool folder. Go to Build Custom Tools for more information.
Create a GUI file and save it inside the folder. Go to HTML GUI SDK for more information.
Create your back end and save it inside the folder. Go to C++ SDK, Macro, and Python SDK for more information.
Create a configuration file and save it inside the folder. Go to Tool Configuration File for more information.
Create a package configuration file and save it with the folder. Go to Package a Tool for more information.
Package the package configuration file and tool folder as a YXI. Go to Package a Tool for more information.