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

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>

 

Highlighted
8 - Asteroid
Spoiler
Challenge 143.png
16 - Nebula
16 - Nebula
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.

Highlighted
Alteryx Certified Partner

Done the basic challenge, & with the hint 🙂

I'm new with Alteryx SDKs !

 

Spoiler
challenge.JPG

 

Highlighted
Alteryx
Alteryx
 
Highlighted
12 - Quasar
12 - Quasar

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

Highlighted
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

 

Highlighted
8 - Asteroid

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

 

challenge_143.png

Highlighted
17 - Castor
17 - Castor

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

Highlighted
Alteryx
Alteryx

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>