community
cancel
Showing results for 
Search instead for 
Did you mean: 
Do you have the skills to make it to the top? Subscribe to our weekly challenges. Try your best to solve the problem, share your solution, and see how others tackled the same problem. We share our answer too.
Weekly Challenge
Do you have the skills to make it to the top? Subscribe to our weekly challenges. Try your best to solve the problem, share your solution, and see how others tackled the same problem. We share our answer too.
Unable to display your progress at this time. Please try again a little later, or contact an administrator if you continue to see this error.

Challenge #143: Developer Community Anniversary Edition

Sr. Community Content Manager
Sr. Community Content Manager

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

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!

Alteryx Certified Partner

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

 

Challenge_0143-CharlieS_Solution.png

 

 

 

 

 

 

 

 

 

 

 

 

 

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>


  

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?

Sr. Community Content Manager
Sr. Community Content Manager
@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.
Bolide

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?

Sr. Community Content Manager
Sr. Community Content Manager

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

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

Sr. Community Content Manager
Sr. Community Content Manager

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