Fix issue with numberOfLines not reflected in edit panel for multi-li…

…ne fields #1500

CHANGELOG.md

@@ -28,7 +28,8 @@ Sjekk ut [release notes](./releasenotes/1.9.0.md) for høydepunkter og mer detal
 - Rettet et problem med visning av tallverdier i aggregerte oversikter hvor det ble lagt på en stor mengde desimaler [#1498](https://github.com/Puzzlepart/prosjektportalen365/issues/1498)
 - Rettet et problem hvor publiseringsikon ikke ble vist i historikk nedtrekksmeny for `Statusrapporter` [#1350](https://github.com/Puzzlepart/prosjektportalen365/issues/1350)
 - Rettet et problem hvor noen Idémodul listekommandoer ikke ble vist dersom andre Idé-lister var definert i `Idékonfigurasjon` [#1430](https://github.com/Puzzlepart/prosjektportalen365/issues/1430)
-- Rettet et problem hvor avviklede termer ble vist i nedtrekksmenyer for taksonomi felter [1499](https://github.com/Puzzlepart/prosjektportalen365/issues/1499)
+- Rettet et problem hvor avviklede termer ble vist i nedtrekksmenyer for taksonomi felter [#1499](https://github.com/Puzzlepart/prosjektportalen365/issues/1499)
+- Rettet et problem hvor antall linjer angitt for et 'multi-linje' felt ikke ble reflektert i det nye redigeringspanelet [#1500](https://github.com/Puzzlepart/prosjektportalen365/issues/1500)
 
 ### Forbedringer
 

SharePointFramework/shared-library/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/Note.tsx

@@ -7,6 +7,13 @@ import { FieldElementComponent } from './types'
 
 export const Note: FieldElementComponent = ({ field }) => {
   const context = useCustomEditPanelContext()
+
+  const calculateHeight = () => {
+    const lineHeight = 24
+    const lines = field.numberOfLines || 3
+    return `${lineHeight * lines}px`
+  }
+
   return (
     <FieldContainer
       iconName='TextAlignLeft'
@@ -18,6 +25,9 @@ export const Note: FieldElementComponent = ({ field }) => {
         defaultValue={context.model.get<string>(field)}
         onChange={(_, data) => context.model.set(field, data.value)}
         placeholder={strings.Placeholder.TextField}
+        resize='vertical'
+        style={{ height: 'fit-content' }}
+        textarea={{ style: { height: calculateHeight() } }}
       />
     </FieldContainer>
   )

SharePointFramework/shared-library/src/models/EditableSPField.ts

@@ -45,6 +45,11 @@ export class EditableSPField extends SPField {
    */
   public required: boolean
 
+  /**
+   * The number of lines for the field.
+   */
+  public numberOfLines?: number
+
   /**
    * Whether the field is read-only.
    */
@@ -90,6 +95,7 @@ export class EditableSPField extends SPField {
     this.type = _field.TypeAsString
     this.isReadOnly = _field.SchemaXml ? _field.SchemaXml.indexOf('ReadOnly="TRUE"') !== -1 : false
     this.required = _field.Required
+    this.numberOfLines = _field.NumberOfLines ?? 3
     this._fieldValueMap = createFieldValueMap()
   }
 

SharePointFramework/shared-library/src/models/SPField.ts

@@ -23,6 +23,7 @@ export class SPField {
   public ShowInEditForm?: boolean
   public ShowInNewForm?: boolean
   public ShowInDisplayForm?: boolean
+  public NumberOfLines?: number = 3
 
   /**
    * Constructs a new `SPField` instance.