Dev Space

Customize & extend the power of Alteryx. SDKs, APIs, custom tools, and more!
It's the most wonderful time of the year - Santalytics 2020 is here! This year, Santa's workshop needs the help of the Alteryx Community to help get back on track, so head over to the Group Hub for all the info to get started!
SOLVED

Using DataItemContainer in HTML SDK

Highlighted
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.

 

Regards,

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

Highlighted
7 - Meteor

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

registerPropertyListener method in the Docs.
This worked perfectly.