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
12 - Quasar
12 - Quasar

Such a great challenge! I have been wanting to expand the app building I am doing into HTML UI. With a bunch of trial and error I was finally able to get the UI to work and was also able to set the default value of the spinner to 3 with the help of the HTML - GUI Library.

Spoiler
Challenge 143 UI.PNG
The final code I used is:
<body>
<legend class = "title">Outlier</legend>
<div class="widgetLabel">Z</div>
<ayx data-ui-props='{type:"NumericSpinner", widgetId:"z_spinner"}' data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat", min:0, max:10, allowedprecision:1}'></ayx>
<br />
<br />
<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 type="text/javascript">
Alteryx.Gui.AfterLoad = function (manager) {
// Set the value of the progress bar
manager.getDataItem('z_spinner').setValue(3)
}
</script>
</body>

I am very excited to dive into this more and develop tools for others to use that can simplify what they do.

Highlighted
14 - Magnetar
14 - Magnetar
Spoiler
Newbie here!

Capture.PNG
Highlighted
16 - Nebula
16 - Nebula

Great challenge @NeilR  - thank you for continuing to find areas of the platform that we may not have explored yet.

 

Also thank you to @jdunkerley79  - his excellent blog post here steered me through this!

https://jdunkerley.co.uk/2017/12/03/grouped-record-id-tool-macro-based-with-javascript-ui/

 

Achieved the outcome - notes in the spoiler below.     Gotta say - awesome creativity @Verakso 

 

NewUI.png:

 

 

Spoiler

Similar to @patrick_digan@JoeS@danilang @ChristineB  , added the controls to the top section of the HTML, except I followed @jdunkerley79 's blog and did some of the lifting in the Script section (which helps with setting the default)

Here's the code:
Section 1 is the HTML - this adds the controls to the form but the controls do not have any behaviours at this stage

section1-HTML Section.png

Section 2 is where the behavior is added using Java Scripting to the controls.

Section2-Script section.png



 

 

Highlighted
Alteryx Certified Partner

26

 

Spoiler
Capture.PNG
Highlighted
11 - Bolide

This was a bit over my head - I've never used any of the SDKs before (but, I guess that was the point of this challenge!) I used the hint, but made a couple of adjustments such as changing the text size and adding a title.

 

 

Spoiler
challenge_143.PNG


  <h3>Outlier detection configuration</h3>

  <label>Z:</label>
  <ayx data-ui-props='{type:"NumericSpinner", widgetId:"z_spinner"}' data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat"}'></ayx>
  <br>
  <br>
  <label>Field to test:</label>
  <ayx data-ui-props='{type:"DropDown", widgetId:"field_dropDown"}' data-item-props='{dataName:"field_dropDown", dataType:"FieldSelector"}'></ayx>​

 

Highlighted
Alteryx Community Team
Alteryx Community Team

@kelly_gilbert you completed the challenge and even customized the solution, so i guess not over your head, after all 🙂

Highlighted
Alteryx Certified Partner
Alteryx Certified Partner

First time using the HTML SDK (and not really familiar with HTML). But finally I managed to find a solution.

 

Spoiler
12-08-_2019_14-39-20.png
Highlighted
Alteryx Certified Partner

I don't understand what is asked of me... I shall return 🙂

Highlighted
Alteryx Partner
Spoiler
143. Macros.PNG

I used https://help.alteryx.com/developer/current/HTML/Overview.htm to add a date selector to the options
Highlighted
Alteryx
Alteryx

This was a part of Alteryx I was totally unaware of. The recommended posting was the only thing that made this challenge even possible for me to get through. Shamelessly borrowed a good piece of the code from their example. Attached my test program and included my changes to the GUI.html in a spoiler. Not that different from most of the other solutions.

Spoiler
2019-09-27_12-34-31.png<body>
<label>Z Value</label>
<ayx data-ui-props='{type:"NumericSpinner", widgetId:"z_spinner", searchable: true, placeholder:"Z"}' data-item-props='{dataName:"z_spinner", dataType:"SimpleFloat"}'></ayx>
<label>Choose Field to Test</label>
<ayx data-ui-props='{type:"DropDown", widgetId:"field_dropDown", searchable: true, placeholder:"Test Field"}' data-item-props='{dataName:"field_dropDown", dataType:"FieldSelector"}'></ayx>
</body>