Community Spring Cleaning week is here! Join your fellow Maveryx in digging through your old posts and marking comments on them as solved. Learn more here!

Weekly Challenges

Solve the challenge, share your solution and summit the ranks of our Community!

Also available in | Français | Português | Español | 日本語
IDEAS WANTED

Want to get involved? We're always looking for ideas and content for Weekly Challenges.

SUBMIT YOUR IDEA

Challenge #143: Developer Community Anniversary Edition

NeilR
Alteryx Alumni (Retired)

@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 - Bolide

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
17 - Castor
17 - Castor

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

 

Challenge_0143-CharlieS_Solution.png

 

 

 

 

 

 

 

 

 

 

 

 

 

kat
12 - Quasar

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>


  

kat
12 - Quasar

@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
Alteryx Alumni (Retired)
@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
15 - Aurora
15 - Aurora

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

Fascinating!

 

image.pngimage.pngThanks 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
Alteryx Alumni (Retired)

@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)...

  1. go to help.alteryx.com
  2. click on DEVELOPER HELP (bottom right hand corner)
  3. click on HTML GUI SDK
  4. click Supported Data Items
  5. click FieldSelector (the data item type we're using for the drop down widget to select an incoming field)
  6. 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 - Quasar

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

NeilR
Alteryx Alumni (Retired)

@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)