@record-evolution/widget-form 1.0.25 → 1.0.27

package/src/definition-schema.json

@@ -174,13 +174,61 @@
                         "title": "Pre-filled Value",
                         "description": "Pre-filled value for this field when the form loads. Can be a static value or bound to a data source.",
                         "type": "string",
+                        "condition": {
+                            "relativePath": "../type",
+                            "showIfValueIn": ["dropdown", "textfield", "numberfield", "datetime"]
+                        },
                         "order": 7
                     },
+                    "preFilledValueMultiline": {
+                        "title": "Pre-filled Value",
+                        "description": "Pre-filled value for this field when the form loads. Can be a static value or bound to a data source.",
+                        "type": "textarea",
+                        "condition": {
+                            "relativePath": "../type",
+                            "showIfValueIn": ["textarea"]
+                        },
+                        "order": 8
+                    },
+                    "preFilledValueBoolean": {
+                        "title": "Pre-filled Value",
+                        "description": "Pre-filled checked state for this checkbox when the form loads. Can be a static value or bound to a data source.",
+                        "type": "boolean",
+                        "condition": {
+                            "relativePath": "../type",
+                            "showIfValueIn": ["checkbox"]
+                        },
+                        "order": 9
+                    },
                     "defaultValue": {
                         "title": "Default Value",
                         "description": "Default value for this field when the form loads. If the user does not provide a value, this default will be used. Can be a static value or bound to a data source.",
                         "type": "string",
-                        "order": 8
+                        "condition": {
+                            "relativePath": "../type",
+                            "showIfValueIn": ["dropdown", "textfield", "numberfield", "datetime"]
+                        },
+                        "order": 10
+                    },
+                    "defaultValueMultiline": {
+                        "title": "Default Value",
+                        "description": "Default value for this field when the form loads. If the user does not provide a value, this default will be used. Can be a static value or bound to a data source.",
+                        "type": "textarea",
+                        "condition": {
+                            "relativePath": "../type",
+                            "showIfValueIn": ["textarea"]
+                        },
+                        "order": 11
+                    },
+                    "defaultValueBoolean": {
+                        "title": "Default Value",
+                        "description": "Default checked state for this checkbox when the form loads. If the user does not change it, this state will be used. Can be a static value or bound to a data source.",
+                        "type": "boolean",
+                        "condition": {
+                            "relativePath": "../type",
+                            "showIfValueIn": ["checkbox"]
+                        },
+                        "order": 12
                     },
                     "min": {
                         "title": "Minimum Value",
@@ -191,7 +239,7 @@
                             "relativePath": "../type",
                             "showIfValueIn": ["numberfield"]
                         },
-                        "order": 9
+                        "order": 13
                     },
                     "max": {
                         "title": "Maximum Value",
@@ -202,7 +250,7 @@
                             "relativePath": "../type",
                             "showIfValueIn": ["numberfield"]
                         },
-                        "order": 10
+                        "order": 14
                     },
                     "validation": {
                         "title": "Validation Regex",
@@ -213,7 +261,7 @@
                             "relativePath": "../type",
                             "showIfValueIn": ["textfield"]
                         },
-                        "order": 11
+                        "order": 15
                     },
                     "values": {
                         "title": "Dropdown Values",
@@ -242,7 +290,30 @@
                                 }
                             }
                         },
-                        "order": 12
+                        "order": 16
+                    },
+                    "conditionalDisplay": {
+                        "title": "Conditional Display",
+                        "type": "object",
+                        "description": "Optionally show this field only when another field in this form currently holds one of a set of values. Leave the controlling field empty to always show this field.",
+                        "dataDrivenDisabled": true,
+                        "order": 17,
+                        "properties": {
+                            "conditionField": {
+                                "title": "Conditional On Field",
+                                "type": "string",
+                                "description": "The Label of another field in this form that controls whether this field is shown. Leave empty to always show this field. The match is against the other field's current value (for dropdowns, the option's stored value).",
+                                "dataDrivenDisabled": true,
+                                "order": 1
+                            },
+                            "conditionValues": {
+                                "title": "Show If Value In",
+                                "type": "string",
+                                "description": "Comma-separated list of values. This field is shown only when the field named in 'Conditional On Field' currently holds one of these values. Example: pump, valve. For a checkbox controller use true or false. Has no effect unless 'Conditional On Field' is set.",
+                                "dataDrivenDisabled": true,
+                                "order": 2
+                            }
+                        }
                     }
                 }
             }

package/src/widget-form.ts

@@ -43,6 +43,11 @@ export class WidgetForm extends LitElement {
 
     @state() private formKey = 0
 
+    // Current value of every field, keyed by field label. Rebuilt on each
+    // input/change so conditional-display rules (which reference a controlling
+    // field by its label) re-evaluate live as the user fills the form.
+    @state() private fieldValues: Record<string, string> = {}
+
     version: string = 'versionplaceholder'
 
     update(changedProperties: Map<string, any>) {
@@ -113,24 +118,21 @@ export class WidgetForm extends LitElement {
         const form = event.target as HTMLFormElement
         const formData = new FormData(form)
         const submitData = this.inputData?.formFields?.map((field, i) => {
-            const name = `column-${i}`
-            let rawValue: any
-
-            if (field.hiddenField) {
-                rawValue = field.preFilledValue ?? field.defaultValue ?? ''
-            } else if (field.type === 'checkbox') {
-                rawValue = formData.has(name) ? 'on' : 'off'
-            } else {
-                const entry = formData.get(name)
-                rawValue = entry === null || entry === '' ? (field.defaultValue ?? '') : entry
-            }
-
-            return {
+            const targetColumn = {
                 swarm_app_databackend_key: field.targetColumn?.swarm_app_databackend_key,
                 table_name: field.targetColumn?.tablename,
-                column_name: field.targetColumn?.column,
-                value: this.formatValue(rawValue, field.type ?? 'textfield')
+                column_name: field.targetColumn?.column
             }
+
+            // A field hidden by an unmet conditional-display rule is "not
+            // applicable": submit null and skip value/default resolution. Its
+            // required rule never fired because the element was absent from the DOM.
+            if (!field.hiddenField && !this.isFieldVisible(field)) {
+                return { ...targetColumn, value: null }
+            }
+
+            const rawValue = this.currentRawValue(field, i, formData)
+            return { ...targetColumn, value: this.formatValue(rawValue, field.type ?? 'textfield') }
         })
 
         if (this.inputData?.deleteFlagColumn)
@@ -169,6 +171,31 @@ export class WidgetForm extends LitElement {
         this.dialogOpen = false
     }
 
+    // preFilledValue/defaultValue and their *Multiline/*Boolean twins are separate
+    // config keys (the editor shows a single-line, multi-line or checkbox input
+    // depending on the field type). Resolve by the current type — normalizing the
+    // boolean keys to 'true'/'false' strings for the existing downstream logic —
+    // and fall back to the single-line key so fields configured before the split
+    // keep their values. A value lingering in a hidden twin key after a type
+    // switch is ignored.
+    effectivePreFilledValue(field: Column): string | undefined {
+        if (field.type === 'textarea')
+            return (field.preFilledValueMultiline as string | undefined) ?? field.preFilledValue
+        if (field.type === 'checkbox')
+            return field.preFilledValueBoolean != null
+                ? String(field.preFilledValueBoolean)
+                : field.preFilledValue
+        return field.preFilledValue
+    }
+
+    effectiveDefaultValue(field: Column): string | undefined {
+        if (field.type === 'textarea')
+            return (field.defaultValueMultiline as string | undefined) ?? field.defaultValue
+        if (field.type === 'checkbox')
+            return field.defaultValueBoolean != null ? String(field.defaultValueBoolean) : field.defaultValue
+        return field.defaultValue
+    }
+
     formatValue(value: string, type: string): any {
         switch (type) {
             case 'numberfield': {
@@ -183,6 +210,56 @@ export class WidgetForm extends LitElement {
         }
     }
 
+    // Resolve a field's current raw (string) value, applying the same
+    // empty-falls-back-to-default rule used at submit so condition evaluation and
+    // submission agree. Checkbox is normalized to 'true'/'false' (matching the
+    // literals designers use in a condition list); a field absent from the DOM
+    // (hidden by its own condition) yields its effective default value.
+    currentRawValue(field: Column, i: number, formData: FormData): string {
+        const name = `column-${i}`
+        if (field.hiddenField)
+            return this.effectivePreFilledValue(field) ?? this.effectiveDefaultValue(field) ?? ''
+        if (field.type === 'checkbox') return formData.has(name) ? 'true' : 'false'
+        const entry = formData.get(name)
+        return entry === null || entry === '' ? (this.effectiveDefaultValue(field) ?? '') : String(entry)
+    }
+
+    // Rebuild the label→value map on every input/change so conditional-display
+    // rules re-evaluate live. A single delegated listener on the <form> catches
+    // all field types (Material components bubble input/change within this root).
+    handleFieldChange(event: Event) {
+        const form = event.currentTarget as HTMLFormElement
+        if (!form) return
+        const formData = new FormData(form)
+        const values: Record<string, string> = {}
+        this.inputData?.formFields?.forEach((field, i) => {
+            if (field.label) values[field.label] = this.currentRawValue(field, i, formData)
+        })
+        this.fieldValues = values
+    }
+
+    // A field is visible unless it declares a conditional-display rule whose
+    // controlling field (referenced by label) does not currently hold one of the
+    // listed values. Fail-open on misconfiguration (unknown field / empty list)
+    // so a half-configured rule never silently hides a field and its data.
+    isFieldVisible(field: Column): boolean {
+        const ref = field.conditionalDisplay?.conditionField?.trim()
+        if (!ref) return true
+        const allowed = (field.conditionalDisplay?.conditionValues ?? '')
+            .split(',')
+            .map((v) => v.trim())
+            .filter((v) => v !== '')
+        if (allowed.length === 0) return true
+        const controller = this.inputData?.formFields?.find((f) => f.label === ref)
+        if (!controller) return true
+        const current =
+            this.fieldValues[ref] ??
+            this.effectivePreFilledValue(controller) ??
+            this.effectiveDefaultValue(controller) ??
+            ''
+        return allowed.includes(String(current))
+    }
+
     renderTextField(field: Column, i: number) {
         return html`
             <md-outlined-text-field
@@ -218,14 +295,16 @@ export class WidgetForm extends LitElement {
     }
 
     renderCheckbox(field: Column, i: number) {
+        const preFilledValue = this.effectivePreFilledValue(field)
+        const defaultValue = this.effectiveDefaultValue(field)
         return html`
             <div class="checkbox-container">
                 <md-checkbox
                     name="column-${i}"
                     aria-label=${field.label ?? ''}
-                    ?checked=${String(field.preFilledValue ?? field.defaultValue) === 'true'}
+                    ?checked=${String(preFilledValue ?? defaultValue) === 'true'}
                     supporting-text=${field.description ?? ''}
-                    ?required=${field.required && !field.defaultValue && !field.preFilledValue}
+                    ?required=${field.required && !defaultValue && !preFilledValue}
                 ></md-checkbox>
                 <label class="label"> ${field.label} </label>
             </div>
@@ -233,15 +312,17 @@ export class WidgetForm extends LitElement {
     }
 
     renderTextArea(field: Column, i: number) {
+        const preFilledValue = this.effectivePreFilledValue(field)
+        const defaultValue = this.effectiveDefaultValue(field)
         return html`
             <md-outlined-text-field
                 .name="column-${i}"
                 .label="${field.label ?? ''}"
                 type="textarea"
-                .value="${field.preFilledValue ?? ''}"
-                .placeholder="${field.defaultValue ?? ''}"
+                .value="${preFilledValue ?? ''}"
+                .placeholder="${defaultValue ?? ''}"
                 rows="3"
-                ?required=${field.required && !field.defaultValue && !field.preFilledValue}
+                ?required=${field.required && !defaultValue && !preFilledValue}
                 supporting-text=${field.description ?? ''}
             ></md-outlined-text-field>
         `
@@ -293,6 +374,7 @@ export class WidgetForm extends LitElement {
 
     resetForm() {
         this.formKey++
+        this.fieldValues = {}
     }
 
     resolveRoute(item?: any): string | undefined {
@@ -600,12 +682,15 @@ export class WidgetForm extends LitElement {
                     method="dialog"
                     class="form-content"
                     @submit=${this.handleFormSubmit}
+                    @input=${this.handleFieldChange}
+                    @change=${this.handleFieldChange}
                 >
                     ${repeat(
                         this.inputData?.formFields ?? [],
                         (field, i) => i,
                         (field, i) => {
                             if (field.hiddenField) return nothing
+                            if (!this.isFieldVisible(field)) return nothing
                             switch (field.type) {
                                 case 'textfield':
                                     return this.renderTextField(field, i)