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.
Getting started with Designer? | Start your journey with our new Learning Path!

Challenge #143: Developer Community Anniversary Edition

Bolide

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.

Pulsar
Pulsar
Spoiler
Newbie here!

Capture.PNG
Nebula
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



 

 

Alteryx Certified Partner

26

 

Spoiler
Capture.PNG
Fireball

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

 

Sr. Community Content Manager
Sr. Community Content Manager

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

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
Alteryx Certified Partner

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

Alteryx Certified Partner
Spoiler
143. Macros.PNG

I used https://help.alteryx.com/developer/current/HTML/Overview.htm to add a date selector to the options
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>