Challenge #143: Developer Community Anniversary Edition

[AngelosPachis]

Challenge #143 solved

Spoiler

[balajilolla]

Spoiler

Solution Attached

[hanykowska]

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

Spoiler

Was trying to use ConstrainedFloat but for some reason, the value wouldn't stay selected. Decided to use SimpleFloat per hint (and the blog) and that seemed to work!

Changing it to SimpleFloat also made the default value show up 🙂

[JennyMartin]

Spoiler

Had to go down the basic route and use the hint but definitely a useful exercise to become more familiar with SDKs

[JethroChen]

Spoiler

[AkimasaKajitani]

It's fun challenge.

Spoiler

Code:

Spoiler

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>

[Jean-Balteryx]

My GUI file :

Spoiler

[PhilipMannering]

Forgot to attach my solution,

[mpennington]

Needed the hint. No real point in attaching the workflow, but old habits die hard.

Spoiler

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

[JasonHu]

Here is my submission.

Spoiler