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!
