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)

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>

 

CHarrison
8 - Asteroid
Spoiler
Challenge 143.png
patrick_digan
17 - Castor
17 - Castor
Spoiler

Capture.PNG
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
8 - Asteroid

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

I'm new with Alteryx SDKs !

 

Spoiler
challenge.JPG

 

WilliamR
Alteryx
Alteryx
 
ggruccio
ACE Emeritus
ACE Emeritus

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)OutlierMacro.JPG

JoeS
Alteryx
Alteryx
Spoiler
GUI.png
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
8 - Asteroid

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

 

challenge_143.png

danilang
19 - Altair
19 - Altair

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

 

Solution.png

 

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

ChristineB
Alteryx Alumni (Retired)

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