Merge pull request #3734 from NishkalankBezawada/issue-3732-react-adv-page-props

issue-3732-Support for Multiline text field

samples/react-advanced-page-properties/README.md

@@ -10,6 +10,7 @@ Attempts to replicate the functionality of Page Properties with the following im
 - Support for hyperlink fields
 - Support for currency
 - Improved support for dates
+- Support for Multiline text fields
 
 ![see the difference](./assets/diff-screencap.png)
 
@@ -47,6 +48,7 @@ None
 - [Mike Homol](https://github.com/mhomol)
 - [Abderahman Moujahid](https://github.com/Abderahman88)
 - [Valeras Narbutas](https://github.com/ValerasNarbutas)
+- [Nishkalank Bezawada](https://github.com/NishkalankBezawada)
 
 ## Version history
 
@@ -56,6 +58,8 @@ Version|Date|Comments
 1.0.1|September 22, 2021|Added support for multi-language sites
 1.0.2|December 24, 2021|Fix retrieving fields from SitePages
 1.0.3|January 12, 2022|Fix formatting of date, number and currency values
+1.0.5|June 05, 2023|Support for Multiline text fields
+
 
 ## Minimal Path to Awesome
 

samples/react-advanced-page-properties/assets/sample.json

@@ -12,7 +12,8 @@
       "- Support for image fields",
       "- Support for hyperlink fields",
       "- Support for currency",
-      "- Improved support for dates"
+      "- Improved support for dates",
+      "- Support for Multiline text fields"
     ],
     "creationDateTime": "2021-03-30",
     "updateDateTime": "2023-03-06",
@@ -69,6 +70,12 @@
         "company": "",
         "pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460\u0026u=afdd5f6681bc375ee3811482dec79824c12d8170\u0026v=4",
         "name": "Abderahman Moujahid"
+      },
+      {
+        "gitHubAccount": "NishkalankBezawada",
+        "company": "Tietoevry, Sweden",
+        "pictureUrl": "https://avatars.githubusercontent.com/u/47456098?v=4",
+        "name": "Nishkalank Bezawada"
       }
     ],
     "references": [

samples/react-advanced-page-properties/src/webparts/advancedPageProperties/AdvancedPagePropertiesWebPart.ts

@@ -82,7 +82,8 @@ export default class AdvancedPagePropertiesWebPart extends BaseClientSideWebPart
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _fields.forEach((field: any) => {
       if (!field.FromBaseType && !field.Hidden && field.SchemaXml.indexOf("ShowInListSettings=\"FALSE\"") === -1
-          && field.TypeAsString !== "Boolean" && field.TypeAsString !== "Note") {
+          //&& field.TypeAsString !== "Boolean" && field.TypeAsString !== "Note") {
+          && field.TypeAsString !== "Boolean") {
         const internalFieldName = field.InternalName == "LinkTitle" ? "Title" : field.InternalName;
         this._availableProperties.push({ key: internalFieldName, text: field.Title });
         Log.Write(field.TypeAsString);

samples/react-advanced-page-properties/src/webparts/advancedPageProperties/components/AdvancedPageProperties.module.scss

@@ -41,6 +41,25 @@
     width: max-content;
   }
 
+  .multiTextCapsule{
+    width: 100%;
+    display: -webkit-box !important;
+    word-break: break-word;
+    line-height: 1.4;
+    max-height: 50%;
+    max-width: 100%;
+    -webkit-line-clamp: 10;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    white-space: normal;
+    box-sizing: border-box;
+    padding: 4px 8px 5px 8px;
+    border-radius: 16px;
+    -ms-flex-align: center;
+    align-items: center;
+
+  }
+
   .urlValue {
     margin: 4px 4px 4px 4px;
     cursor: pointer;

samples/react-advanced-page-properties/src/webparts/advancedPageProperties/components/AdvancedPageProperties.tsx

@@ -151,6 +151,10 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
             return (
               <span className={styles.standardCapsule} style={{backgroundColor: semanticColors.accentButtonBackground, color: semanticColors.accentButtonText}}>{val}</span>
             );
+          case "Note":
+            return (
+              <span className={styles.multiTextCapsule} style={{backgroundColor: semanticColors.accentButtonBackground, color: semanticColors.accentButtonText}}>{val}</span>
+            );
           default:
             return (
               <span className={styles.standardCapsule} style={{backgroundColor: semanticColors.accentButtonBackground, color: semanticColors.accentButtonText}}>{val}</span>