community
cancel
Showing results for 
Search instead for 
Did you mean: 
Announcement | Get certified today - take the Alteryx Designer Core and Advanced exams on-demand now!
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.

Challenge #143: Developer Community Anniversary Edition

Comet

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
Spoiler
Newbie here!

Capture.PNG
Aurora
Aurora

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