Merge pull request #4104 from AriGunawan/feature/add_support_for_choi…

…ce_and_date

samples/react-enhanced-page-properties/.nvmrc

@@ -1 +1 @@
-v16.13.0
+v14.15.0

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

@@ -4,16 +4,25 @@
 
 This is a web part that goes beyond the standard SharePoint Page Properties web part, offering expanded support for various metadata types and configurations. Effortlessly display key page details based on metadata files, providing a comprehensive view of your content. Streamline information management and enhance user interaction with this versatile and customizable web part.
 
+Currently support following types:
+- Single line text
+- Multiple line text
+- Choice
+- Date
+
 ### Configuration
 
 - **Title**: Allow to set the displayed title. The built in SharePoint Page Properties web part doesn't allow user to change the displayed title. It will always be **Properties**
 - **Fields**: Allow to display multiple fields separated by comma (this will be improved in the future). It's already support multiple line type. The built in SharePoint Page Properties web part doesn't support it.
 
 ### Plan for next version
 
-- Support choice field view
+- Support taxonomy field view
 - Support people field view
-- Support date time field view
+- Support lookup field view
+- Support currency field view
+- Support hyperlink field view
+- Support image field view
 - Improve web part configuration
 
 ![Web part](assets/app.png)
@@ -30,7 +39,7 @@ This is a web part that goes beyond the standard SharePoint Page Properties web
 - [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
 - [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 
-> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/m365devprogram)
+> Get your own free development tenant by subscribing to [Microsoft 365 developer program](https://aka.ms/m365devprogram)
 
 ## Contributors
 
@@ -40,6 +49,7 @@ This is a web part that goes beyond the standard SharePoint Page Properties web
 
 Version|Date|Comments
 -------|----|--------
+1.1|October 23, 2023|Add support for choice and date fields
 1.0|September 23, 2023|Initial release
 
 ## Minimal path to awesome

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

@@ -10,7 +10,7 @@
       "This is a web part that goes beyond the standard SharePoint Page Properties web part, offering expanded support for various metadata types and configurations. Effortlessly display key page details based on metadata files, providing a comprehensive view of your content. Streamline information management and enhance user interaction with this versatile and customizable web part."
     ],
     "creationDateTime": "2023-09-23",
-    "updateDateTime": "2023-09-23",
+    "updateDateTime": "2023-10-10",
     "products": [
       "SharePoint"
     ],

samples/react-enhanced-page-properties/config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "Enhanced Page Properties",
     "id": "54ea24ef-5714-4f81-a9e6-e22f70e0c644",
-    "version": "1.0.0.0",
+    "version": "1.1.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,

samples/react-enhanced-page-properties/package.json

@@ -21,6 +21,7 @@
     "@microsoft/sp-property-pane": "1.17.4",
     "@microsoft/sp-webpart-base": "1.17.4",
     "@pnp/sp": "^3.17.0",
+    "date-fns": "^2.30.0",
     "office-ui-fabric-react": "^7.199.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",

samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/EnhancedPagePropertiesWebPart.ts

@@ -16,21 +16,21 @@ import { SPFI, spfi, SPFx } from "@pnp/sp";
 
 import EnhancedPageProperties from "./components/EnhancedPageProperties";
 import { IEnhancedPagePropertiesProps } from "./components/IEnhancedPagePropertiesProps";
+import { IFieldInfo } from "@pnp/sp/fields";
 
 export interface IEnhancedPagePropertiesWebPartProps {
   title: string;
   fields: string;
 }
 
 export interface propertyItem {
+  field?: IFieldInfo;
+  value: string | string[];
   label: string;
-  field: string;
-  value: string;
-  isAvailable: boolean;
 }
 
 export default class EnhancedPagePropertiesWebPart extends BaseClientSideWebPart<IEnhancedPagePropertiesWebPartProps> {
-  private readonly docLibTitle = 'Site Pages';
+  private readonly docLibTitle = "Site Pages";
   private _sp: SPFI;
 
   public async render(): Promise<void> {
@@ -59,11 +59,11 @@ export default class EnhancedPagePropertiesWebPart extends BaseClientSideWebPart
       .getByTitle(this.docLibTitle)
       .fields();
     // Filter to only non hidden fields
-    const filteredAvailableFields: Map<string, string> = new Map();
+    const filteredAvailableFields: Map<string, IFieldInfo> = new Map();
     for (let i = 0; i < availableFields.length; i++) {
       const field = availableFields[i];
       if (field.Hidden) continue;
-      filteredAvailableFields.set(field.InternalName, field.Title);
+      filteredAvailableFields.set(field.InternalName, field);
     }
 
     const selectedFields = this.convertSelectedFieldsString();
@@ -76,13 +76,12 @@ export default class EnhancedPagePropertiesWebPart extends BaseClientSideWebPart
         ...selectedFields.filter((field) => filteredAvailableFields.has(field))
       )();
     for (let i = 0; i < selectedFields.length; i++) {
-      const field = selectedFields[i];
-      const isAvailable = filteredAvailableFields.has(field);
+      const internalName = selectedFields[i];
+      const field = filteredAvailableFields.get(internalName);
       propertyItems.push({
         field,
-        isAvailable,
-        label: isAvailable ? (filteredAvailableFields.get(field) || '') : field,
-        value: currentPageProperties[field],
+        label: field ? field.Title : internalName,
+        value: currentPageProperties[internalName],
       });
     }
     return propertyItems;

samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.module.scss

@@ -18,6 +18,11 @@
         margin-bottom: 10px;
       }
 
+      .choice {
+        display: flex;
+        gap: 5px;
+      }
+
       span {
         background-color: #fafafa;
         padding: 8px 13px;
@@ -36,7 +41,6 @@
           background-color: #fce100;
         }
       }
-
     }
   }
 }

samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import styles from './EnhancedPageProperties.module.scss';
 import { IEnhancedPagePropertiesProps } from './IEnhancedPagePropertiesProps';
+import Value from './Value/Value';
 
 export default function EnhancedPageProperties(
   props: IEnhancedPagePropertiesProps
@@ -11,10 +12,10 @@ export default function EnhancedPageProperties(
       <h2>{props.title}</h2>
       <div className={styles.content}>
         {props.items.map((item) => (
-          <div key={item.field} className={styles.item}>
+          <div key={item.field?.Id} className={styles.item}>
             <h3>{item.label}</h3>
-            {item.isAvailable ? (
-              <span>{item.value || "-"}</span>
+            {item.field ? (
+              <Value field={item.field} value={item.value} />
             ) : (
               <span className={styles.errorMessage}>
                 Field not available in the Library metadata. Please check again the

samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/Value/Value.tsx

@@ -0,0 +1,34 @@
+import { IFieldInfo } from "@pnp/sp/fields";
+import { format } from "date-fns";
+import * as React from "react";
+import styles from "../EnhancedPageProperties.module.scss";
+
+export interface IValueProps {
+  field: IFieldInfo;
+  value: string | string[];
+}
+
+export default function Value(props: IValueProps): JSX.Element {
+  if (!props.value) return <span>-</span>;
+
+  switch (props.field.TypeDisplayName) {
+    case "Choice": {
+      const value = props.value as string[];
+      return (
+        <div className={styles.choice}>
+          {value.map((item: string) => (
+            <span key={item}>{item}</span>
+          ))}
+        </div>
+      );
+    }
+    case "Date and Time": {
+      return (
+        <span>{format(new Date(props.value as string), "dd MMMM yyyy")}</span>
+      );
+    }
+    default: {
+      return <span>{props.value}</span>;
+    }
+  }
+}