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

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>

 

Asteroid
Spoiler
Challenge 143.png
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.

Alteryx Certified Partner

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

I'm new with Alteryx SDKs !

 

Spoiler
challenge.JPG

 

Alteryx
Alteryx
 
Bolide
Bolide

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

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

 

Asteroid

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

 

challenge_143.png

Quasar

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

Sr. Instructional Designer
Sr. Instructional Designer

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!

 

Interface.jpgChallenge 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>