Dev Space

Customize and extend the power of Alteryx with SDKs, APIs, custom tools, and more.

Using DataItemContainer in HTML SDK

7 - Meteor

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.



Alteryx Alumni (Retired)

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>
    <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">');
    <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 data-ui-props = "{type: 'TextArea', placeholder: 'Enter stuff'}" data-item-props =
        dataName: 'myContainer>text',
        dataType: 'SimpleString'
      window.Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
        manager.getDataItem('hideMyContainer').registerPropertyListener('value', function(dataItemEvent) {
          var shouldHideMyContainer = dataItemEvent.value;
          var myContainer = manager.getDataItem('myContainer');

If you have further questions, feel free to ask!

7 - Meteor

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

registerPropertyListener method in the Docs.
This worked perfectly.