Challenge #143: Developer Community Anniversary Edition

The solution to last week's Challenge can be found HERE!

Sometimes, Designer doesn't do what you want it to. Fortunately, it is endlessly extensible. This week's challenge will ease you into the world of the Alteryx SDKs - upon successful completion of the challenge, you will be an Alteryx Developer. You can do this - REALLY!

For the purposes of this exercise, you have already extended Alteryx by creating a macro (Outlier.yxmc attached to this post). Eventually, you may want to further extend your new tool by leveraging open source Python functionality with the Python SDK. After you do that, you might want to make a fancy new interface with the HTML GUI SDK (see here for inspiration). But we're going to take baby steps, and will start by simply replicating the macro's UI using the HTML GUI SDK.

Advanced Challenge: Do this on your own with nothing but Developer Community (happy one year anniversary!) and the documentation to guide you (this post is also very helpful).

Basic Challenge: Place the Outlier folder contained within the attached zip file in your HTML plugins folder (e.g. C:\Program Files\Alteryx\bin\HtmlPlugins\ for an admin install). Restart Alteryx. You will now see the Outlier tool in the Data Investigation category. But the tool's interface is blank! Modify the Gui.html file to add the appropriate controls.

Hint below...

Spoiler

Add the following lines of code between the body tags:

<div class="widgetLabel">Z</div>
<ayx data-ui-props='{type:"NumericSpinner", widgetId:"z_spinner"}' data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat"}'></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>

Outlier.zip

Macros

Join

Transform

Predictive

Expert

Difficult

Accepted answers

All comments

CHarrison

Spoiler

Challenge 143.yxmd

patrick_digan

Spoiler

Here is the code I went with between the body tags:

      <legend class="title">Outlier</legend>
      <label>Field to Test</label>
      <ayx data-ui-props='{type:"DropDown", widgetId:"field_dropDown", searchable: true, placeholder:"Select field to test..."}' data-item-props='{dataName:"field_dropDown", dataType:"FieldSelector"}'></ayx>
      <br />
      <br />
	  <label>Z</label>
      <ayx data-ui-props='{type:"NumericSpinner", widgetId:"z_spinner"}' data-item-props='{dataName:"z_spinner", dataType:"ConstrainedFloat", min:0, max:10, step:1, allowedPrecision:1}'></ayx>

The only thing I couldn't replicate from the macro itself was setting the default on the numeric spinner to 3.

olivia_paquot

Done the basic challenge, & with the hint :-)

I'm new with Alteryx SDKs !

Spoiler

WilliamR

ggruccio

SDKs are really something I need to get more exposure to so thank you for the challenge! Although I needed to rely heavily on your hints. I entered a list of data and it calculated the outlier based on Z score greater than 2. (3000 = True)

challenge_143_gg_finish.yxmd

JoeS

Spoiler

<legend class="title">Outlier</legend>
<div class="widgetLabel">Z Score to check against</div>
<ayx data-ui-props='{type:"NumericSpinner", widgetId:"z_spinner"}' data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat"}'></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>

I added the title as well, as the examples suggest, I think it rounds (pun intended!) the UI off nicely

pasccout

Here is my solution (basic)... Nice to see the flexibility behind this!

challenge_143.yxmd

danilang

My solution to the basic challenge. Hints were used as well. A lot of learning to be done here

Spoiler

my final GUI.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>
Outlier
</title>

    <script type="text/javascript">
     // Include the base GUI library.
     document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">');
    </script>
    <style type="text/css">
      body {
        margin-left: 15px;
		margin-right: 15px;
      }

	  .widgetLabel {
        padding-top: 15px;
        font-size: 1.556em;
        color: #52617f;
      }
    </style>	
  </head>
  <body>

<div class="widgetLabel">Z</div>
<ayx data-ui-props='{type:"NumericSpinner", widgetId:"z_spinner"}' data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat"}'></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>




  </body>
</html>

Dan

Challenge_143_solution_DL.yxmd

ChristineB

Great challenge, @NeilR! This was my first time using the HTML SDK, and I learned a lot from this one! The article you suggested was super helpful. I had to peek at your hints and other posted solutions, but I got the confidence to tinker around with adding an additional element: a button to say I completed the challenge!

I have the same question as @patrick_digan...Did anyone figure out how to set a default value in the numeric spinner? I'd like to know how to do that!

Challenge Complete? Yes!

Spoiler

My HTML in the body tags:
<body>
<fieldset>
<legend class = "title">ZScore</legend>

<label>Choose Field </label>
<ayx data-ui-props='{type:"DropDown", widgetId:"DropDown1"}'></ayx>
<br />
<br />
<section>
<label>ZScore</label>
<ayx data-ui-props='{type:"NumericSpinner", widgetId:"NumericSpinner1"}'data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat"}'></ayx>
<br />
<br />
<label>Challenge Complete</label>
<ayx data-ui-props='{type:"Button", widgetId:"buttonPrimary", label:"YES"}'></ayx>
</section>
</fieldset>
</body>

terry10

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!

challenge_143_terry10.yxmd

CharlieS

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

kat

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>

OutlierInstall.zip

kat

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

estherb47

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?

Outlier_EHB.zip

NeilR

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

Verakso

Working my way down from this years Sanatalytics, I went all goofy and made this

Spoiler

I saw someone mention that they would have liked the initial value of the spinner be set to 3,

So that was yet another challenge I have tried to solve, before I went total Christmas Crazy.

Happy Holidays

/Thomas

JoBen

Cheers! This was my first time really playing around with HTML within Alteryx, and it was fun! I took the time to try to come up with a fun looking interface for this tool and included a hyperlink to a Wikipedia article on the Z score. I've attached my HTML script within the attached workflow.

Spoiler

My interface

challenge_143_Joben_Solution.yxmd

jamielaird

Spoiler

challenge_143_JL.yxmd

JosephSerpis

Spoiler

Challenge Completed

challenge_143_Joe_Serpis.yxmd

philipmannering

Managed to do it with the hints. I will expand on this another time and create my own HTML GUI. One thing I'm not sure of is how you know which ayx elements exist to make the interface. Is there a list of these?

Spoiler

HTML GUI

NeilR

@PhilipMannering the list of supported widgets is here. There are examples of them in action in the HTML - GUI Library example tool.

jasperlch

Done it with the hint. First time playing with the Alteryx SDKs. Thanks for the challenge!

Spoiler

ipeng

Spoiler

Done!

IP_Challenge_143.yxmd

RichoBsJ

Thank you very much @NeilR for this amazing challenge! I've discovered a new world!! I'm freaking out with SDKs, seriously (and thank you very much @Ozzie for this post)

Spoiler

I tried writing my own code in HTML file, it didn't work....I tried using the hint, it didn't work, so....

Spoiler

...I modified the tool/macro

The problem (don't know if this happened to anyone else or it just was me) was that the DropDown was always empty, no options inside as I think it's natural, so the field that GUI is sending to the macro is called "", and macro fails as it can't find any field called "" (more specifically, the Summarize tool that it's the first tool that need a field name)....

...so I replaced the DropDown by a TextBox where the user can write manually the name of the field:

challenge_143_richobsj.zip

NicoleJohnson

Finally getting around to this one... put it off for a while largely because it terrified me. But after playing around with it a bit, ended up with a sort of hybrid beginner-advanced solution where I started with the spoiler hint, combined it with some knowledge gained from this extremely helpful article, and ended up with something that was at least a little bit customized! Not as scary as expected. Still no idea what I'm doing... But I am definitely intrigued and will be looking into this more! Note: I especially like the cool things I saw here in this inspirational post... hoping to be better prepared to participate the next time a challenge like that comes around!

Spoiler

Body section of GUI.html:
<body>
<br />
<label>A quick and dirty outlier detection tool using the z-score methodology.</label>
<br />
<br />
<fieldset>
<legend class="title">Outlier Tool Configuration</legend>
<br />
<label>Choose Z-Score:</label>
<ayx data-ui-props='{type:"NumericSpinner", widgetID:"z_spinner"}'
data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat"}'></ayx>
<br />
<br />
<label>Select Field to Test:</label>
<ayx data-ui-props='{type:"DropDown", widgetID:"field_dropDown"}'
data-item-props='{dataName:"field_dropDown", dataType:"FieldSelector"}'></ayx>
<br />
</fieldset>
</body>

Cheers!

challenge_143_NicoleJohnson.yxmd

cplewis90

Such a great challenge! I have been wanting to expand the app building I am doing into HTML UI. With a bunch of trial and error I was finally able to get the UI to work and was also able to set the default value of the spinner to 3 with the help of the HTML - GUI Library.

Spoiler

The final code I used is:
<body>
<legend class = "title">Outlier</legend>
<div class="widgetLabel">Z</div>
<ayx data-ui-props='{type:"NumericSpinner", widgetId:"z_spinner"}' data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat", min:0, max:10, allowedprecision:1}'></ayx>
<br />
<br />
<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 type="text/javascript">
Alteryx.Gui.AfterLoad = function (manager) {
// Set the value of the progress bar
manager.getDataItem('z_spinner').setValue(3)
}
</script>
</body>

I am very excited to dive into this more and develop tools for others to use that can simplify what they do.

challenge_143_CL.yxmd

Kenda

Spoiler

Newbie here!

New Workflow1.yxmd

SeanAdams

Great challenge @NeilR - thank you for continuing to find areas of the platform that we may not have explored yet.

Also thank you to @jdunkerley79 - his excellent blog post here steered me through this!

https://jdunkerley.co.uk/2017/12/03/grouped-record-id-tool-macro-based-with-javascript-ui/

Achieved the outcome - notes in the spoiler below. Gotta say - awesome creativity @Verakso

Spoiler

Similar to @patrick_digan ; @JoeS ; @danilang @ChristineB , added the controls to the top section of the HTML, except I followed @jdunkerley79 's blog and did some of the lifting in the Script section (which helps with setting the default)

Here's the code:
Section 1 is the HTML - this adds the controls to the form but the controls do not have any behaviours at this stage

section1-HTML Section.png

Section 2 is where the behavior is added using Java Scripting to the controls.

Section2-Script section.png

Gui.html.zip

LordNeilLord

Spoiler

Gui.zip

kelly_gilbert

This was a bit over my head - I've never used any of the SDKs before (but, I guess that was the point of this challenge!) I used the hint, but made a couple of adjustments such as changing the text size and adding a title.

Spoiler

  <h3>Outlier detection configuration</h3>

  <label>Z:</label>
  <ayx data-ui-props='{type:"NumericSpinner", widgetId:"z_spinner"}' data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat"}'></ayx>
  <br>
  <br>
  <label>Field to test:</label>
  <ayx data-ui-props='{type:"DropDown", widgetId:"field_dropDown"}' data-item-props='{dataName:"field_dropDown", dataType:"FieldSelector"}'></ayx>&#8203;

NeilR

@kelly_gilbert you completed the challenge and even customized the solution, so i guess not over your head, after all 🙂

RolandSchubert

First time using the HTML SDK (and not really familiar with HTML). But finally I managed to find a solution.

Spoiler

Gui.zip

Outlier_Test.yxmd

RWvanLeeuwen

I don't understand what is asked of me... I shall return 🙂

TimothyManning

Spoiler

I used https://help.alteryx.com/developer/current/HTML/Overview.htm to add a date selector to the options

143. Macros.yxzp

TonyA

This was a part of Alteryx I was totally unaware of. The recommended posting was the only thing that made this challenge even possible for me to get through. Shamelessly borrowed a good piece of the code from their example. Attached my test program and included my changes to the GUI.html in a spoiler. Not that different from most of the other solutions.

Spoiler

<body>
<label>Z Value</label>
<ayx data-ui-props='{type:"NumericSpinner", widgetId:"z_spinner", searchable: true, placeholder:"Z"}' data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat"}'></ayx>
<label>Choose Field to Test</label>
<ayx data-ui-props='{type:"DropDown", widgetId:"field_dropDown", searchable: true, placeholder:"Test Field"}' data-item-props='{dataName:"field_dropDown", dataType:"FieldSelector"}'></ayx>
</body>

challenge_143_TonyA.yxmd

OllieClarke

Used the zip file, then changed the set up just a little 🙂

Spoiler

challenge_143_OC_solution.zip

T_Willins

It took me a bit to get this and had to use the hint, but I learned a lot about how to write the code and not just read it (usually to parse it). My coding training a long time ago was in FORTRAN and FORTH (long time ago as in Disco sucks, New Wave is awesome), but I am learning Python and HTML to improve my Alteryx skills. I also modified the macro to bring in the input Z. I felt like I was in the tesseract in Interstellar being able to "pluck the strings" behind the scenes and affect what was happening on the Alteryx Canvas.

Spoiler

Workflow 143.yxmd

Outlier Macro 143.yxmc

philipmannering

Forgot to attach my solution,

Outlier.zip

Quick Links

This months top contributors

atcodedog05 19458

Qiu 15866

binu_acs 15708

MarqueeCrew 13708

apathetichell 13703