Use only SetConfiguration and GetConfiguration

SetConfiguration and GetConfiguration can be used without data items or widgets to fill in a completed UI's fields from the tool XML.

This approach requires two functions:

window.Alteryx.Gui.SetConfiguration: Executes when the tool configuration window is clicked to display the UI with any completed fields.
window.Alteryx.Gui.GetConfiguration: Executes when the tool configuration window closes to transfer the configuration data from the UI to the workflow.

Create a tool GUI

Set window.Alteryx.Gui equal to an object. This object contains the SetConfiguration and GetConfiguration functions.

window.Alteryx.Gui = {}

Define the SetConfiguration function and pass the current configuration xml as a parameter. Within the function, check for the configuration xml and verify that the tool configuration is confirmed.

SetConfiguration: function (currentToolConfiguration) {
        if (currentToolConfiguration && currentToolConfiguration.IsFirstConfig === false) {
        }
}

Within the final bracket of the SetConfiguration function, call:

window.Alteryx.JsEvent(JSON.stringify({Event: 'SetConfiguration'}))

This call informs Designer that the configuration is set and it can begin to process the GetConfiguration function.

Within the window.Alteryx.Gui object, call the GetConfiguration function, which does not require any parameters. Separate the Set and GetConfiguration functions with a comma.

window.Alteryx.Gui = {
    SetConfiguration: function (currentToolConfiguration) {
...
    },
    GetConfiguration: function () {
...
    }
}

Within the GetConfiguration function, call the window.Alteryx.JsEvent function to pass a stringified configuration object to Designer.

window.Alteryx.JsEvent(JSON.stringify({
           Event: 'GetConfiguration',
           Configuration: {
             Configuration: {
               X: xVal,
               Y: yVal
             },
             Annotation: 'X:' + xVal + '\nY:' + yVal
           }
         }))

Executable example


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Location tool</title>
</head>
<body>
  <h1>Location:</h1>
  <br />
  <label>X:</label><input type="text" id="locationXValue" />
  <br /> 
  <label>Y:</label><input type="text" id="locationYValue" />
  <script type="text/javascript">

     window.Alteryx.Gui = {
       SetConfiguration: function (currentToolConfiguration) {	
         // Grab the values from the incoming tool configuration, and set the UI
         var xVal = currentToolConfiguration.Configuration.Configuration.X
         var yVal = currentToolConfiguration.Configuration.Configuration.Y
         document.getElementById('locationXValue').value = xVal
         document.getElementById('locationYValue').value = yVal

         // Notify the Alteryx Designer you are done handling SetConfiguration
         // If you don’t do this, the GetConfiguration will not be called
         window.Alteryx.JsEvent(JSON.stringify({Event: 'SetConfiguration'}))	
       },
       GetConfiguration: function () {
         var xVal = document.getElementById('locationXValue').value
         var yVal = document.getElementById('locationYValue').value
         // The Alteryx Designer has requested the tools configuration
         // Provide the configuration to the Alteryx Designer with
         // a call back through JsEvent like this:
         window.Alteryx.JsEvent(JSON.stringify({
           Event: 'GetConfiguration',
           Configuration: {
             Configuration: {
               X: xVal,
               Y: yVal
             },
             Annotation: 'X:' + xVal + '\nY:' + yVal
           }
         }))
       }
     }

  </script>
</body>
</html>