SetConfiguration and GetConfiguration

Version:
Current
Last modified: June 15, 2020

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 2 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

HTML
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Location tool</title>
  6. </head>
  7. <body>
  8.   <h1>Location:</h1>
  9.   <br />
  10.   <label>X:</label><input type="text" id="locationXValue" />
  11.   <br /> 
  12.   <label>Y:</label><input type="text" id="locationYValue" />
  13.   <script type="text/javascript">
  14.  
  15.      window.Alteryx.Gui = {
  16.        SetConfiguration: function (currentToolConfiguration) {	
  17.          // Grab the values from the incoming tool configuration, and set the UI
  18.          var xVal = currentToolConfiguration.Configuration.Configuration.X
  19.          var yVal = currentToolConfiguration.Configuration.Configuration.Y
  20.          document.getElementById('locationXValue').value = xVal
  21.          document.getElementById('locationYValue').value = yVal
  22.  
  23.          // Notify the Alteryx Designer you are done handling SetConfiguration
  24.          // If you don’t do this, the GetConfiguration will not be called
  25.          window.Alteryx.JsEvent(JSON.stringify({Event: 'SetConfiguration'}))	
  26.        },
  27.        GetConfiguration: function () {
  28.          var xVal = document.getElementById('locationXValue').value
  29.          var yVal = document.getElementById('locationYValue').value
  30.          // The Alteryx Designer has requested the tools configuration
  31.          // Provide the configuration to the Alteryx Designer with
  32.          // a call back through JsEvent like this:
  33.          window.Alteryx.JsEvent(JSON.stringify({
  34.            Event: 'GetConfiguration',
  35.            Configuration: {
  36.              Configuration: {
  37.                X: xVal,
  38.                Y: yVal
  39.              },
  40.              Annotation: 'X:' + xVal + '\nY:' + yVal
  41.            }
  42.          }))
  43.        }
  44.      }
  45.  
  46.   </script>
  47. </body>
  48. </html>
  49.  
Was This Helpful?

Running into problems or issues with your Alteryx product? Visit the Alteryx Community or contact support.