Merge pull request #2202 from Abderahman88/patch-2200

[react-advanced-page-properties] Fix currency/date/number formatting

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

@@ -50,6 +50,7 @@ Version|Date|Comments
 1.0.0|March 30, 2021|Initial release
 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
 
 ## Minimal Path to Awesome
 
@@ -75,3 +76,27 @@ Basically add and remove properties until you are satisfied and you're good to g
 
 ![configure the part](./assets/props.gif)
 
+
+## Help
+
+We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for  community members to volunteer their time and help resolve issues.
+
+If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
+
+You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-advanced-page-properties%22) to see if anybody else is having the same issues.
+
+You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-advanced-page-properties) and see what the community is saying.
+
+If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-advanced-page-properties&template=bug-report.yml&sample=react-advanced-page-properties&authors=@Abderahman88%20@mhomol&title=react-advanced-page-properties%20-%20).
+
+For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-advanced-page-properties&template=question.yml&sample=react-advanced-page-properties&authors=@Abderahman88%20@mhomol&title=react-advanced-page-properties%20-%20).
+
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-advanced-page-properties&template=suggestion.yml&sample=react-advanced-page-properties&authors=@Abderahman88%20@mhomol&title=react-advanced-page-properties%20-%20).
+
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+
+<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-advanced-page-properties" />

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

@@ -15,7 +15,7 @@
       "- Improved support for dates"
     ],
     "creationDateTime": "2021-03-30",
-    "updateDateTime": "2021-12-24",
+    "updateDateTime": "2022-01-12",
     "products": [
       "SharePoint"
     ],

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

@@ -3,7 +3,7 @@
   "solution": {
     "name": "Advanced Page Properties",
     "id": "daae06a2-8599-445c-93c0-3bd739305f56",
-    "version": "1.0.2.0",
+    "version": "1.0.3.0",
     "includeClientSideAssets": true,
     "isDomainIsolated": false,
     "developer": {

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

@@ -75,8 +75,9 @@ export default class AdvancedPagePropertiesWebPart extends BaseClientSideWebPart
     Log.Write(`${fi.length.toString()} fields retrieved!`);
     fi.forEach((f) => {
       if (!f.FromBaseType && !f.Hidden && f.SchemaXml.indexOf("ShowInListSettings=\"FALSE\"") === -1
-          && f.TypeAsString !== "Boolean" && f.TypeAsString !== "Note" && f.TypeAsString !== "User") {
+          && f.TypeAsString !== "Boolean" && f.TypeAsString !== "Note") {
-        this.availableProperties.push({ key: f.InternalName, text: f.Title });
+        const internalFieldName = f.InternalName == "LinkTitle" ? "Title" : f.InternalName;
+        this.availableProperties.push({ key: internalFieldName, text: f.Title });
         Log.Write(f.TypeAsString);
       }
     });

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

@@ -44,7 +44,7 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
       var allValues: any = {};
       const sitePagesList = await sp.web.lists.ensureSitePagesLibrary();
       if (props.context.pageContext.listItem !== undefined && props.context.pageContext.listItem !== null) {
-        allValues = await sitePagesList.items.getById(props.context.pageContext.listItem.id).select(...props.selectedProperties).get();
+        allValues = await sitePagesList.items.getById(props.context.pageContext.listItem.id).select(...props.selectedProperties).fieldValuesAsText();
       }
 
       for (let i = 0; i < props.selectedProperties.length; i++) {
@@ -57,19 +57,21 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
 
         // Establish the values array
         var values: any[] = [];
-        if (allValues.hasOwnProperty(prop)) {
+        if (allValues.hasOwnProperty(field.InternalName)) {
           switch (field.TypeAsString) {
+            case "UserMulti":
             case "TaxonomyFieldTypeMulti":
+              values = _.clone(allValues[field.InternalName].split(";"));
+              break;
             case "MultiChoice":
-              values = _.clone(allValues[prop]);
+              values = _.clone(allValues[field.InternalName].split(","));
               break;
             case "Thumbnail":
-              values.push(JSON.parse(allValues[prop]));
+              values.push(JSON.parse(allValues[field.InternalName]));
               break;
-
             default:
               // Default behavior is to treat it like a string
-              values.push(allValues[prop]);
+              values.push(allValues[field.InternalName]);
               break;
           }
         }
@@ -124,53 +126,27 @@ const AdvancedPageProperties: React.FunctionComponent<IAdvancedPagePropertiesPro
    */
    const RenderPagePropValue = (prop: PageProperty) => {
     var retVal = _.map(prop.values, (val) => {
-      if (val !== null) {
+      if (val !== null && val !== "") {
         switch (prop.info.TypeAsString) {
           case "URL":
+            const url_parts = val.split(",");
             return (
-              <span className={styles.urlValue}><a href={val.Url} target="_blank" style={{color: semanticColors.link}}>{val.Description}</a></span>
+              <span className={styles.urlValue}><a href={url_parts[0]} target="_blank" rel="noopener noreferrer" style={{color: semanticColors.link}}>{url_parts[1]}</a></span>
             );
           case "Thumbnail":
             return (
               <span><img className={styles.imgValue} src={val.serverRelativeUrl} /></span>
             );
           case "Number":
-            return (
-              <span className={styles.plainValue}>{(prop.info["ShowAsPercentage"] === true ? Number(val).toLocaleString(undefined,{style: 'percent', minimumFractionDigits:0}) : (prop.info["CommaSeparator"] === true ? val.toLocaleString('en') : val.toString()))}</span>
-            );
           case "Currency":
-            return (
-              <span className={styles.plainValue}>{(prop.info["CommaSeparator"] === true ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(val) : Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', useGrouping: false }).format(val))}</span>
-            );
           case "DateTime":
-            //,"",,
+            return (
-            switch (prop.info["DateFormat"]) {
+              <span className={styles.plainValue}>{val}</span>
-              case "StandardUS":
+            );
-                return (
-                  <span className={styles.plainValue}>{new Date(val).toLocaleDateString()}</span>
-                );
-              case "ISO8601":
-                const d = new Date(val);
-                return (
-                  <span className={styles.plainValue}>{`${d.getFullYear().toString()}-${d.getMonth()}-${d.getDate()}`}</span>
-                );
-              case "DayOfWeek":
-                return (
-                  <span className={styles.plainValue}>{new Date(val).toLocaleDateString("en-US", { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}</span>
-                );
-              case "MonthSpelled":
-                return (
-                  <span className={styles.plainValue}>{new Date(val).toLocaleDateString("en-US", { month: 'long', day: 'numeric', year: 'numeric' })}</span>
-                );
-              default:
-                return (
-                  <span className={styles.plainValue}>{new Date(val).toLocaleDateString()}</span>
-                );
-            }
           case "TaxonomyFieldTypeMulti":
           case "TaxonomyFieldType":
             return (
-              <span className={styles.standardCapsule} style={{backgroundColor: semanticColors.accentButtonBackground, color: semanticColors.accentButtonText}}>{val.Label}</span>
+              <span className={styles.standardCapsule} style={{backgroundColor: semanticColors.accentButtonBackground, color: semanticColors.accentButtonText}}>{val}</span>
             );
           default:
             return (