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
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.
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)
<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
Here is my solution (basic)... Nice to see the flexibility behind this!
My solution to the basic challenge. Hints were used as well. A lot of learning to be done here
<!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
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!
<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>
