Support textarea widget for multifield (array) properties (#43)

wcm-io · Sep 26, 2024 · 2b6ccc6 · 2b6ccc6
1 parent 6bbdc0a
commit 2b6ccc6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/bundle/src/main/resources/angularjs-partials/multifield.html b/bundle/src/main/resources/angularjs-partials/multifield.html
@@ -34,8 +34,14 @@
              ng-model="effectiveValue.value" />
       <span class="coral-Checkbox-checkmark"></span>
     </label>
+    <textarea is="coral-textarea"
+              bo-if="type==='textarea'"
+              disabled
+              readonly
+              ng-attr-rows="{{textareaRows}}"
+              ng-model="effectiveValue.value"></textarea>
     <input is="coral-textfield" type="type"
-           bo-if="type!=='checkbox'"
+           bo-if="type!=='checkbox' && type!=='textarea'"
            disabled
            readonly
            ng-model="effectiveValue.value" />
@@ -57,8 +63,14 @@
              ng-model="value.value" />
       <span class="coral-Checkbox-checkmark"></span>
     </label>
+    <textarea is="coral-textarea"
+              bo-if="type==='textarea'"
+              disabled
+              readonly
+              ng-attr-rows="{{textareaRows}}"
+              ng-model="value.value"></textarea>
     <input is="coral-textfield" type="type"
-           bo-if="type!=='checkbox'"
+           bo-if="type!=='checkbox' && type!=='textarea'"
            disabled
            readonly
            ng-model="value.value" />
@@ -81,8 +93,16 @@
       <span class="coral-Checkbox-checkmark"></span>
     </label>
     <div class="caconfig-textfield-wrapper">
+      <textarea is="coral-textarea"
+                bo-if="type==='textarea'"
+                ng-model="value.value"
+                ng-trim="false"
+                ng-required="{{property.metadata.properties.required && !property.overridden && !property.inherited && !property.readOnly}}"
+                caconfig-validation="{{validation}}"
+                ng-attr-rows="{{textareaRows}}"
+                name="inputField"></textarea>
       <input is="coral-textfield" type="type"
-             bo-if="type!=='checkbox'"
+             bo-if="type!=='checkbox' && type!=='textarea'"
              ng-model="value.value"
              ng-trim="false"
              ng-pattern="pattern"

diff --git a/...main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/js/widgets/multifield.directive.js b/...main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/js/widgets/multifield.directive.js
@@ -55,6 +55,12 @@
       scope.validation = props.validation;
       scope.validationMessage = props.validationMessage ? Granite.I18n.get(props.validationMessage) : undefined;
 
+      // special handling for textarea
+      if (props.widgetType === "textarea") {
+        scope.type = "textarea";
+        scope.textareaRows = props.textareaRows;
+      }
+
       setValueArray(scope.property.effectiveValue, scope.effectiveValues);
       setValueArray(scope.property.value, scope.values);
 

diff --git a/changes.xml b/changes.xml
@@ -24,6 +24,9 @@
   <body>
 
     <release version="1.16.6" date="not released">
+      <action type="update" dev="sseifert" issue="43">
+        Support textarea widget for multifield (array) properties.
+      </action>
       <action type="fix" dev="sseifert" issue="44">
         Textarea widget: Apply custom number of rows also in readonly/disabled state.
       </action>