Want to get involved? We're always looking for ideas and content for Weekly Challenges.
SUBMIT YOUR IDEA
That was tricky!
I was trying to recreate the macro set up but couldn't make it quite as much as I'd like (will try again soon)...
Focused on using the blog post listed in the instructions and repurposing files from HTML GUI SDK folder
Had to go down the basic route and use the hint but definitely a useful exercise to become more familiar with SDKs
It's fun challenge.
Code:
I referred the Record ID tool HTML_GUI and others.
I add also the feature of default values.
<style type="text/css">
/* CSS Resets */
.alteryx-text-box {
margin-top: 0;
margin-bottom: 0;
}
/* Tool Styling */
body {
padding: 10px;
margin: 0px;
min-width: 296px;
}
.header-ruler {
background-color: #cccccc;
height: 1px;
border: 0 none;
flex-grow: 1;
margin-top: 0.625em;
margin-left: 10px;
}
.header-message {
color: #52617f;
font-size: 1.78em;
font-weight: normal;
padding-bottom: 0px;
margin: 0px;
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
}
.header-message > div {
line-height: 1.125em;
}
.flex-row {
margin: 0;
padding: 0;
}
.flex-row li {
list-style: none;
}
.selectDropDown {
margin: 5px 5px 5px 0px;
flex-grow: 0.35;
transition: 2 ease-out;
}
.operatorDropDown {
margin: 5px 0px 5px 0px;
flex-grow: 0.25;
}
.operandTextBoxContainer {
margin: 5px 0px 5px 5px;
flex-grow: 0.45;
position: relative;
}
.simpleContainer {
padding-left: 2.0833em;
}
.simpleContainer .row {
display: flex;
}
.simpleContainer.alteryx-disabled dt {
color: #ADADAD;
}
.rowSecondary dl, .dateContainer dd {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
margin-top: 5px;
margin-bottom: 5px;
}
.rowSecondary dd {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}
.rowSecondary dl:first-child {
margin-right: 5px;
}
.dateContainer dd {
-webkit-margin-start: 0;
}
.customContainer {
padding-left: 2.0833em;
margin-top: 5px;
}
.operandTextBoxContainer ayx {
position: absolute;
}
.baseDateRowContainer, .baseDateTimeRowContainer {
justify-content: flex-end;
}
.baseDateRowContainer dl, .baseDateTimeRowContainer dl {
flex-flow: column;
}
.rowSecondary dt {
margin-bottom: 5px;
}
.baseDateRowContainer.rowSecondary dl:first-child, .baseDateTimeRowContainer.rowSecondary dl:first-child {
margin-right: 0;
}
.periodBeforeRowContainer,
.periodAfterRowContainer,
.periodBeforeDateTimeRowContainer,
.periodAfterDateTimeRowContainer,
.dateRangeRowContainer, .dateTimeRangeRowContainer {
justify-content: flex-end;
}
.periodBeforeRowContainer .periodTypeContainer,
.periodAfterRowContainer .periodTypeContainer,
.periodBeforeDateTimeRowContainer .periodTypeContainer,
.periodAfterDateTimeRowContainer .periodTypeContainer, {
min-width: 60px;
}
.periodBeforeRowContainer .periodCountContainer,
.periodAfterRowContainer .periodCountContainer,
.periodBeforeDateTimeRowContainer .periodCountContainer,
.periodAfterDateTimeRowContainer .periodCountContainer {
margin-left: 5px;
}
.periodBeforeRowContainer .dateContainer,
.periodAfterRowContainer .dateContainer,
.periodBeforeDateTimeRowContainer .dateContainer,
.periodAfterDateTimeRowContainer .dateContainer {
flex-grow: 1;
flex-flow: column;
}
.periodBeforeRowContainer .periodTypeContainer,
.periodAfterRowContainer .periodTypeContainer,
.periodBeforeDateTimeRowContainer .periodTypeContainer,
.periodAfterDateTimeRowContainer .periodTypeContainer {
width: 30%;
min-width: max-content;
}
.textForOperand .alteryx-text-box.alteryx-invalid {
border-color: red;
}
.ignoreTimesContainer {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="header-message">
<div>XMSG("Setting the Outliner")</div>
<hr class="header-ruler"></hr>
</div>
XMSG("Z")
<div class = "selectDropDown"><ayx data-ui-props = '{type:"NumericSpinner", widgetId:"z_spinner"}' data-item-props = '{dataName:"z_spinner",dataType:"SimpleFloat"}'></ayx></div>
<br>
XMSG("Field to Test")
<div class = "selectDropDown"><ayx data-ui-props =' {type:"DropDown", widgetId:"field_dropDown"}' data-item-props = '{dataName:"field_dropDown",dataType:"FieldSelector"}'></ayx></div>
<script>
Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
manager.getDataItem('z_spinner').setValue(3)
}
</script>
Needed the hint. No real point in attaching the workflow, but old habits die hard.
<!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>
<script>
Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
manager.getDataItem('z_spinner').setValue(3)
}
</script>
Here is my submission.