Weekly Challenges

NeilR · ‎11-28-2018

@ChristineB & @patrick_digan here's one way to set the default numeric spinner value (new code added to original hint in bold):

<div class="widgetLabel">Z</div>
<ayx data-ui-props='{type:"NumericSpinner", widgetId:"z_spinner"}' data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat", value:"1"}'></ayx>

<div class="widgetLabel">Field to test</div>
<ayx data-ui-props='{type:"DropDown", widgetId:"field_dropDown"}' data-item-props='{dataName:"field_dropDown", dataType:"FieldSelector"}'></ayx>
  
<script>
  Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
    manager.getDataItem('z_spinner').setValue(3)
  }
</script>

terry10 · ‎11-30-2018

I admit I was intimidated when I saw this weekly challenged involved HTML GUI SDK, but I was willing to take on the challenge. It turned out to be the easiest challenge yet and it's piqued my interest to learn more about Alteryx SDKs! Thank you!

CharlieS · ‎11-30-2018

Great challenge! I only slightly modified the basic challenge to allow decimal places.

kat · ‎12-02-2018

Started out with the download, but then did a lot of trial and error to expand on it a little. Trial and error involved looking through existing tools HTML and a whole lot of making small changes and seeing what happened.

But now it's a pretty install file (just change the extension to yxi - won't allow me to upload it as such) and a pretty interface that can do default values.

Challenge #143 confih.PNG

Spoiler

Getting defaults to work involved changing to Alteryx plugins instead of the given widgets. These seem a bit feature richer (from my very limited trial and error knowledge).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
     document.write('<link rel="stylesheet" type="text/css" href="' + window.Alteryx.LibDir + '1/css/alteryx-config.css">');
     document.write('<link rel="stylesheet" type="text/css" href="' + window.Alteryx.LibDir + '1/lib/alteryx/gui/plugin-widgets/alteryx-desktop-widgets.css">');
     document.write('<link rel="stylesheet" type="text/css" href="' + window.Alteryx.LibDir + '1/lib/build/designerDesktop.css">');
     document.write('<link rel="stylesheet" type="text/css" href="OutlierGui.css">');
     document.write('<script src="' + window.Alteryx.LibDir + '1/lib/build/designerDesktop.bundle.js">\x3c/script>');
    </script>
  </head>
  <body>
    <form>
      <fieldset>

        <legend class='blueTitle'>XMSG("Options")</legend>
          <div class='leftCon'>
            <label for="z_spinner">XMSG("Z")</label>
            <alteryx-pluginwidget type="NumericSpinner" allowedPrecision="2" id="z_spinner" theme="gray" dataName="z_spinner" default="3" max="999999999999999" width="70"></alteryx-pluginwidget>
          </div>

          <div class='leftCon'>
            <label for="field_dropDown">XMSG("Field to test")</label>
            <alteryx-pluginwidget type="DropDown" theme="gray" id="field_dropDown" dataName="field_dropDown" dataType="FieldSelector" inputNumber="0" connectionNumber="0" fieldType="All">
            </alteryx-pluginwidget>
          </div>

        </fieldset>
      </form>

  </body>
</html>

Getting defaults to work involved changing to Alteryx plugins instead of the given widgets. These seem a bit feature richer (from my very limited trial and error knowledge).<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> document.write('<link rel="stylesheet" type="text/css" href="' + window.Alteryx.LibDir + '1/css/alteryx-config.css">'); document.write('<link rel="stylesheet" type="text/css" href="' + window.Alteryx.LibDir + '1/lib/alteryx/gui/plugin-widgets/alteryx-desktop-widgets.css">'); document.write('<link rel="stylesheet" type="text/css" href="' + window.Alteryx.LibDir + '1/lib/build/designerDesktop.css">'); document.write('<link rel="stylesheet" type="text/css" href="OutlierGui.css">'); document.write('<script src="' + window.Alteryx.LibDir + '1/lib/build/designerDesktop.bundle.js">\x3c/script>'); </script> </head> <body> <form> <fieldset> <legend class='blueTitle'>XMSG("Options")</legend> <div class='leftCon'> <label for="z_spinner">XMSG("Z")</label> <alteryx-pluginwidget type="NumericSpinner" allowedPrecision="2" id="z_spinner" theme="gray" dataName="z_spinner" default="3" max="999999999999999" width="70"></alteryx-pluginwidget> </div> <div class='leftCon'> <label for="field_dropDown">XMSG("Field to test")</label> <alteryx-pluginwidget type="DropDown" theme="gray" id="field_dropDown" dataName="field_dropDown" dataType="FieldSelector" inputNumber="0" connectionNumber="0" fieldType="All"> </alteryx-pluginwidget> </div> </fieldset> </form> </body> </html>

kat · ‎12-02-2018

@NeilR - can you please explain the difference between the code type I used (alteryx-pluginwidget) and the example? I could only get it to work like this, but seeing your post now. When to use which?

NeilR · ‎12-02-2018

@kat nicely done! You're using the now deprecated version 1 of the HTML GUI SDK (instead of the current version 2). In some ways v1 was more user friendly but v2 is more stable and flexible. V2 is the way to go.

estherb47 · ‎12-03-2018

UPDATED: Now looks for only text fields in the drop-down. Thank you, @NeilR for the tips to find help!

Fascinating!

Thanks to @NeilR's instructions, I was able to set the default for the number spinner to 3.

Next question is how do we limit the drop-down to show numeric columns only?

NeilR · ‎12-03-2018

@estherb47 wrote:

Next question is how do we limit the drop-down to show numeric columns only?

Another excellent question. Here's how I found the answer in the documentation (navigating the help docs is a skill unto itself)...

go to help.alteryx.com
click on DEVELOPER HELP (bottom right hand corner)
click on HTML GUI SDK
click Supported Data Items
click FieldSelector (the data item type we're using for the drop down widget to select an incoming field)
click the FieldSelector link within the first paragraph

It's here I found the setFieldFilter function with the following description:

Function that changes the allowed field types for the data item by specifying a filter. Possible Filters: All, NoBinary, NoBlob, NoSpatial, String, Date, DateOrTime, StringOrDate, NumericOrString, Numeric, SpatialObj, Bool, Time, and Blob

Just what we need! See if you can get it to work using a similar line of code to the one to set the default value for the numeric spinner widget. Answer below...

Spoiler

manager.getDataItem('field_dropDown'). setFieldFilter('Numeric')

kat · ‎12-03-2018

Thanks @NeilR! Are there any example tools with v2? I always really like learning from examples

NeilR · ‎12-03-2018

@kat Here are a few example tools built for instructional purposes. And the Filter tool was recently re-skinned with v2 of the SDK (C:\Program Files\Alteryx\bin\HtmlPlugins\AlteryxBasePluginsGui.Filter.Filter\FilterGUI.html)

Weekly Challenges

IDEAS WANTED

Challenge #143: Developer Community Anniversary Edition