Dev Space

Customize & extend the power of Alteryx. SDKs, APIs, custom tools, and more!
SOLVED

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

Highlighted
Alteryx Certified Partner
Alteryx Certified Partner

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,

Highlighted
Alteryx Certified Partner
Alteryx Certified Partner

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

 

 

Highlighted
10 - Fireball

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

  1. Add <html> and <head> tags.  Crucially, the <head> tag should contain a script tag that imports the Alteryx GUI SDK libraries
  2. 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>

 

 

Highlighted
Alteryx Certified Partner
Alteryx Certified Partner

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!

Highlighted
Alteryx Certified Partner
Alteryx Certified Partner

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,

Highlighted
10 - Fireball

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

 

  1. The BeforeLoad function is called by Alteryx.  Your function sets up the DataItem that will handle the persistance for you.
  2. Alteryx loads the tool's settings into the DataItem
  3. 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.