Weekly Challenge

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

We're actively looking for ideas on how to improve Weekly Challenges and would love to hear what you think!

Submit Feedback
We've recently made an accessibility improvement to the community and therefore posts without any content are no longer allowed. Please use the spoiler feature or add a short message in the message body in order to submit your weekly challenge.

Challenge #143: Developer Community Anniversary Edition

Highlighted
Alteryx Community Team
Alteryx Community Team

@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>  
Highlighted
9 - Comet

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!

Highlighted
Alteryx Certified Partner
Alteryx Certified Partner

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

 

Challenge_0143-CharlieS_Solution.png

 

 

 

 

 

 

 

 

 

 

 

 

 

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


  

Highlighted
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?

Highlighted
Alteryx Community Team
Alteryx Community Team
@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.
Highlighted
14 - Magnetar
14 - Magnetar

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?

Highlighted
Alteryx Community Team
Alteryx Community Team

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

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

Highlighted
Alteryx Community Team
Alteryx Community Team

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