Dev Space

Thableaus · ‎03-18-2020

Hi everyone,

I'm playing around with HTML Macros and starting to build somethings. Using Widgets works pretty well, but I'm trying out some HTML elements. The main problem is that I'm having a hard time to pass these values to my macro, as it's simply not working.

Could someone offer some guidance please?

Here's the code - My interface tool in this case is a Numeric Up Down, and its Name is "NumUp".

I'm trying to use a range input, and pass this value as single number

Is there anything else I should do?

  <body>
    <div class="header-message">
      <div>XMSG("Test Macro")</div>
    </div>
  	<label for="RangeBox">Choose Number (between 0 and 100):</label>
    <br>
    <br>
    <section>
  	<input type="range" list="tickmarks" id="RangeBox" name="RangeBox" min="0" max="100" value="50" step="10">  
      <datalist id="tickmarks">
        <option value="0" label="0%">
        <option value="10">
        <option value="20">
        <option value="30">
        <option value="40">
        <option value="50" label="50%">
        <option value="60">
        <option value="70">
        <option value="80">
        <option value="90">
        <option value="100" label="100%">
      </datalist>
    </section>
    <script type="text/javascript">
     

      Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {

        var NumericDataItem = new AlteryxDataItems.ConstrainedFloat('NumUp')
        manager.addDataItem(NumericDataItem)


        document.getElementById('RangeBox').onkeyup = function (NumRange) {
        NumericDataItem.setValue(NumRange.target.value)
        }
	   }
  // window.Alteryx.Gui.AfterLoad = function (manager, AlteryxDataItems) {
  //   // The manager has filled the data items with values from the configuration now
  //   var NumericDataItem = manager.getDataItem('NumUp')

  //   // Pull the values from the data item, in case they did any type conversion
  //   document.getElementById('Valor').value = NumericDataItem.getValue()
  // }
	  
    </script>
  </body>

Thanks,

Thableaus · ‎03-20-2020

@BlytheE @NeilR @PaulN could you guys give me a hand on this one?

I think it's simple, it's just I'm not really proficient in JavaScript.

Thanks!

tlarsen7572 · ‎03-20-2020

Hi @Thableaus, the HTML below is working for me. The changes I made:

Add <html> and <head> tags. Crucially, the <head> tag should contain a script tag that imports the Alteryx GUI SDK libraries
I changed 'onkeyup' to 'onchange' in the BeforeLoad function. onkeyup was not getting called on my machine, but onchange was.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>XMSG("HTML Demo")</title>
    <script type="text/javascript">
     // Include the base GUI library.
     document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">');
    </script>
  </head>
  <body>
    <div class="header-message">
      <div>XMSG("Test Macro")</div>
    </div>
  	<label for="RangeBox">Choose Number (between 0 and 100):</label>
    <br>
    <br>
    <section>
  	<input type="range" list="tickmarks" id="RangeBox" name="RangeBox" min="0" max="100" value="50" step="10">  
      <datalist id="tickmarks">
        <option value="0" label="0%">
        <option value="10">
        <option value="20">
        <option value="30">
        <option value="40">
        <option value="50" label="50%">
        <option value="60">
        <option value="70">
        <option value="80">
        <option value="90">
        <option value="100" label="100%">
      </datalist>
    </section>
    <script type="text/javascript">
     

      Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {

        var NumericDataItem = new AlteryxDataItems.ConstrainedFloat('NumUp')
        manager.addDataItem(NumericDataItem)


        document.getElementById('RangeBox').onchange = function (NumRange) {
        NumericDataItem.setValue(NumRange.target.value)
        }
	   }
   window.Alteryx.Gui.AfterLoad = function (manager, AlteryxDataItems) {
     // The manager has filled the data items with values from the configuration now
     var NumericDataItem = manager.getDataItem('NumUp')

     // Pull the values from the data item, in case they did any type conversion
     document.getElementById('RangeBox').value = NumericDataItem.getValue()
   }
	  
    </script>
  </body>
</html>

Thableaus · ‎03-20-2020

Hey @tlarsen7572 thanks for your response!

I already had the <head> tag, I just didn't put out here cause it's pretty much the same across all HTML Macros, unless you import CSS attributes.

I'll test this "onchange" call you mentioned and will let you know if it works here.

Thanks a lot!

Thableaus · ‎03-21-2020

Worked like a charm! Thanks @tlarsen7572

Will explore more options around the "onchange" call.

Also, would you know why the AfterLoad parameter was necessary in this case? I never really know if it's needed or not.

Cheers,

tlarsen7572 · ‎03-21-2020

The 'AfterLoad' function is needed to set the slider's value in your HTML form. The following events are happening:

The BeforeLoad function is called by Alteryx. Your function sets up the DataItem that will handle the persistance for you.
Alteryx loads the tool's settings into the DataItem
The AfterLoad function is called by Alteryx

If you do nothing in AfterLoad, your webpage will be rendered with the slider's default value, 50, even if that is not what the saved configuration value is. The AfterLoad function allows you to prepare the webpage with the saved values so that the widgets in the page properly reflect the saved configuration values. You cannot do this in BeforeLoad because the saved configuration settings have not been loaded, yet.

The little table at the bottom of the Lifecycle Methods page of the HTML SDK documentation provide a nice overview of when to use the different lifecycle methods. If you decide to go with option 2 (use BeforeLoad and AfterLoad with DataItems), then just assume you will always use both BeforeLoad and AfterLoad. I have only ever used both of these methods together, never just 1. And I cannot think of a situation where I might use just 1.

Dev Space

How to pass values to HTML Macros using other HTML elements (not Widgets)