Dear all & @rpaugh , hello!
1- How to use the BindUserDataChanged method to control the display and hide properties of document.getElementById("Base") according to the value of showMap? To achieve the effect of real-time update.
2- If the checkbox is selected, the TextBox is displayed. If the checkbox is not selected, the TextBox is hidden. It is necessary to achieve a real-time WYSIWYG effect.
3- Please help me fix the code, thank you!
<!DOCTYPE html>
<html>
<head>
// ***some code
<form>
<div id="showMapUid">
<br />
<ayx data-ui-props='{type:"CheckBox", widgetId:"showMapUid", label:"XMSG("Rest GUI")"}'></ayx>
</div>
<fieldset id="Base">
<ayx data-ui-props='{type:"TextBox", widgetId:"Mini"}' data-item-props='{dataName: "Mini"}'></ayx>
</fieldset>
</form>
<script type="text/javascript">
window.Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
var showMap = new AlteryxDataItems.SimpleBool('showMapUid');
manager.bindDataItemToWidget(showMap, 'showMapUid');
manager.addDataItem(showMap);
showMap.setValue(0);
document.getElementById('showMapUid').onclick = function (uiValue) {
showMap.setValue(uiValue.target.value);
};
}
window.Alteryx.Gui.AfterLoad = function (manager, AlteryxDataItems) {
var showMap = manager.getDataItem('showMapUid');
document.getElementById('showMapUid').value = showMap.getValue();
//How to use the BindUserDataChanged method to control the display and hide properties of document.getElementById("Base") according to the value of showMap. To achieve the effect of real-time update.
// the following code is invalid:
//Invalid const showMapChanged = (v) => {
// if(v) {
// document.getElementById("Base").classList.remove("hide");
// } else {
// document.getElementById("Base").classList.add("hide");
// }
//};
//showMap.BindUserDataChanged(showMapChanged);
}
</script>
</body>
</html>
