Showing results for 
Search instead for 
Did you mean: 

Dev Space

Customize & extend the power of Alteryx. SDKs, APIs, custom tools, and more!

HTML Help with GUI in Alteryx




I'm new to HTML (more of an r guy) and I'm having trouble developing a gui.  I would like to have the knots text box appear multiple times beside each variable that will show up under the "select variables with splines."  That way when a variable is selected to be segmented with splines, the text box right beside that variable will be the place the user puts where she/he wants to place each spline.  I'm not sure how to do that. 


The community would not let me attach the .html file so I pasted the code below the graphic.  Any advice from the smart people out there?



spline_html.JPG<!DOCTYPE html>
    <meta charset="UTF-8">
Piece Wise Linear Frequency Model
    <link href='./assets/entypo/entypo.css' rel='stylesheet' />
    <link rel="stylesheet" href="./assets/alteryx-utils.css" charset="utf-8">
    <link rel="stylesheet" href="app.css" media="screen" charset="utf-8">
    <script type="text/javascript">
      // Include version 1 of the base GUI library.
        '<link rel="import" href="' + window.Alteryx.LibDir + '1/lib/alteryx/gui/includes.html">'
<div class='page has-hint' id='page-basic'>
  <div class='fd-header'>
    <div class='fd-header-title-text'>Setup</div>
  <div class='content'>
    <div class='content-padded'>
      <div id='yvar' class="qconst">
<!--  Y Var  -->
<label for="Y Var">Select the target variable</label>
<alteryx-pluginwidget type="DropDown" dataType="FieldSelector" inputNumber="0" connectionNumber="0" fieldType="Numeric" id="Y Var" dataName="Y Var"></alteryx-pluginwidget>
      <div id='xvars' class="qconst">
<!--  X Vars  -->
<label for="X Vars">Select the predictor variables</label>
<alteryx-pluginwidget type="MultiSelectListBox" dataType="MultiStringSelector" inputNumber="0" connectionNumber="0" fieldType="All" id="X Vars" dataName="X Vars"></alteryx-pluginwidget>
      <!-- Spline Variables  -->
<label for="Spline Location">Select the predictor variables with splines</label>
<alteryx-pluginwidget type="MultiSelectListBox" dataType="MultiStringSelector" inputNumber="0" connectionNumber="0" fieldType="All" id="Spline Location" dataName="Spline Location"></alteryx-pluginwidget>   <label for="Enter Knots">Enter Knots</label>
<alteryx-pluginwidget type="TextBox" password="false" id="Enter Knots" dataName="Enter Knots"></alteryx-pluginwidget>

Alteryx Alumni (Retired)

Hey there @jbh1128d1!


I was wondering what version of Alteryx you are using? We have a new version of this sdk available - v2 - with our latest release 11.7.




Hi @TashaA.  I'm on 11.5.  I thought it may be an HTML coding issue.  Do you think it's a version issue?

Alteryx Alumni (Retired)



I see in your code sample you are importing the HTML GUI SDK version 1. If you are on 11.5 that is still supported, however version 2 is available with 11.5!


The sample code for importing V2 can be seen here underneath "Using BeforeLoad with DataItems" -> "Loading the SDK Javascript UI Library" . 


It is important to note that all of the help located here for 11.5 will correspond to V2 of the SDK, so it is useful to upgrade if you can.