diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts index 492c7d20be..f3de00e749 100644 --- a/api/js/etemplate/Et2Widget/Et2Widget.ts +++ b/api/js/etemplate/Et2Widget/Et2Widget.ts @@ -161,14 +161,30 @@ const Et2WidgetMixin = (superClass : T) => class: {type: String, reflect: true}, /** - * Defines whether this widget is visible. - * Not to be confused with an input widget's HTML attribute 'disabled'.", + * Defines whether this widget is visibly disabled. + * + * The widget is still visible, but clearly cannot be interacted with. Widgets disabled in the template + * will not return a value to the application code, even if re-enabled via javascript before submitting. + * To allow a disabled widget to be re-enabled and return a value, disable via javascript in the app's + * et2_ready() instead of an attribute in the template file. */ disabled: { type: Boolean, reflect: true }, + /** + * The widget is not visible. + * + * As far as the user is concerned, the widget does not exist. Widgets hidden with an attribute in the + * template may not be created in the DOM, and will not return a value. Widgets can be hidden after creation, + * and they may return a value if hidden this way. + */ + hidden: { + type: Boolean, + reflect: true + }, + /** * Accesskey provides a hint for generating a keyboard shortcut for the current element. * The attribute value must consist of a single printable character. @@ -350,12 +366,17 @@ const Et2WidgetMixin = (superClass : T) => /** * Wrapper on this.disabled because legacy had it. * + * @deprecated Use widget.disabled for visually disabled, widget.hidden for visually hidden. + * Widgets that are hidden from the server via attribute or $readonlys will not be created. + * Widgets that are disabled from the server will not return a value to the application code. + * * @param {boolean} value */ set_disabled(value : boolean) { let oldValue = this.disabled; this.disabled = value; + this.hidden = value; this.requestUpdate("disabled", oldValue); } @@ -760,7 +781,7 @@ const Et2WidgetMixin = (superClass : T) => { widget = loadWebComponent(_nodeName, _node, this); - if(this.addChild) + if(this.addChild && widget) { // webcomponent going into old et2_widget this.addChild(widget); @@ -1434,6 +1455,13 @@ export function loadWebComponent(_nodeName : string, _template_node : Element|{[ throw Error("Unknown or unregistered WebComponent '" + _nodeName + "', could not find class. Also checked for " + tries.join(',')); } } + + // Don't need to create hidden elements + if(parent.hidden || attrs["hidden"] && parent.getArrayMgr("content") && parent.getArryMgr("content").parseBoolExpression(attrs["hidden"])) + { + return null; + } + const readonly = parent?.getArrayMgr("readonlys") ? (parent.getArrayMgr("readonlys")).isReadOnly( attrs["id"], attrs["readonly"], diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index 7518fe9bb5..5c3c7df412 100644 --- a/api/templates/default/etemplate2.css +++ b/api/templates/default/etemplate2.css @@ -78,6 +78,9 @@ display: none; } +*[hidden] { + display: none !important; +} /** * VBox widget