community
cancel
Showing results for 
Search instead for 
Did you mean: 

Dev Space

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

Using DataItemContainer in HTML SDK

Highlighted

How do I use the DataItemContainer data Item to control visibility of several UI elements.

Could someone please share an example of this.

Keep in mind I am using this with a Python backend not Javascript.

 

Regards,

Alteryx
Alteryx

I hope this example helps! It shows how you can have multiple data items automatically created inside of a data container by using a > in the dataName, and then uses an event listener to set the hidden property of that container.

 

You may of course, manually create your data item containers using the standard new DataItemContainer(dataName) approach, and add your data items to it. The approach using greater-thans is just a convenience for structuring your data items into containers automatically.

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>XMSG("HTML - GUI Library")</title>
    <script type="text/javascript">
      document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">');
    </script>
  </head>
  <body>
    <ayx data-ui-props = "{type: 'CheckBox'}" data-item-props = "{dataName: 'hideMyContainer'}"></ayx>
    <label>XMSG("Hide a data item container")</label>
    <ayx data-ui-props = "{type: 'TextBox', placeholder: 'Enter stuff'}" data-item-props =
      "{
        dataName: 'myContainer>description',
        dataType: 'SimpleString'
      }"
    ></ayx>
    <ayx data-ui-props = "{type: 'TextArea', placeholder: 'Enter stuff'}" data-item-props =
      "{
        dataName: 'myContainer>text',
        dataType: 'SimpleString'
      }"
    ></ayx>
    <script>
      window.Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
        manager.getDataItem('hideMyContainer').registerPropertyListener('value', function(dataItemEvent) {
          var shouldHideMyContainer = dataItemEvent.value;
          var myContainer = manager.getDataItem('myContainer');
          myContainer.setHidden(shouldHideMyContainer);
        });
      };
    </script>
  </body>
</html>

If you have further questions, feel free to ask!

Thanks....I hadn't even seen this

registerPropertyListener method in the Docs.
This worked perfectly.