Added support for MGT

samples/react-content-query-online/README.md

@@ -283,16 +283,19 @@ Property | Description
 `{{MyField.htmlValue}}` | Renders the HTML value of the field. For example, a *Link* field HTML value would render something like `<a href="...">My Link Field</a>`
 `{{MyField.rawValue}}`  | Returns the raw value of the field. For example, a *Taxonomy* field raw value would return an object which contains the term `wssId` and its label
 `{{MyField.jsonValue}}`  | Returns a JSON object value of the field. For example, an *Image* field JSON value would return a JSON object which contains the `serverRelativeUrl` property
+`{{MyField.personValue}}`  | Returns an object value of a person field. The `personValue` property provides `email`, `displayName` and `image` properties. The `image` property contains `small`, `medium`, and `large` properties, each of which pointing to the profile image URL for the small, medium, and large profile images.
+
 
 ##### Handlebars
 
 ```handlebars
 {{#each items}}
     <div class="item">
-        <p>MyUserField text value : {{MyUserField.textValue}}</p>
+        <p>MyField text value : {{MyField.textValue}}</p>
-        <p>MyUserField html value : {{MyUserField.htmlValue}}</p>
+        <p>MyField html value : {{MyField.htmlValue}}</p>
-        <p>MyUserField raw value : {{MyUserField.rawValue}}</p>
+        <p>MyField raw value : {{MyField.rawValue}}</p>
         <p>MyImageField JSON value : {{MyImageField.jsonValue}}</p>
+        <p>MyPersonField person value : {{MyPersonField.personValue}}</p>
     </div>
 {{/each}}
 ```
@@ -301,10 +304,11 @@ Property | Description
 
 ```html
 <div class="item">
-    <p>MyUserField text value : Simon-Pierre Plante</p>
+    <p>MyField text value : Simon-Pierre Plante</p>
-    <p>MyUserField html value : <a href="..." onclick="...">Simon-Pierre Plante</a></p>
+    <p>MyField html value : <a href="..." onclick="...">Simon-Pierre Plante</a></p>
-    <p>MyUserField raw value : 26</p>
+    <p>MyField raw value : 26</p>
     <p>MyImageField JSON value: [Object] </p>
+    <p>MyPersonField person value: [Object] </p>
 </div>
 ...
 ```
@@ -315,6 +319,12 @@ You can use `JSONValue` to parse complex fields -- such as image fields -- and d
 <img src="{{MyImageField.jsonValue.serverRelativeUrl}}" />
 ```
 
+For fields containing person values (e.g.: the `Author`, `Editor` fields and **Person or Group** fields), you can use the `personValue` property to retrieve values such as `email`, `displayName`, and `image.small`, `image.medium`, `image.large`.
+
+```html
+<img src="{{MyPersonField.personValue.image.small}}" />
+```
+
 ### Including your own external scripts and/or block helpers
 
 #### Including basic library files

samples/react-content-query-online/package-lock.json

@@ -12483,6 +12483,23 @@
       "integrity": "sha1-5zA08A3MH0CHYAj9IP6ud71LfC8=",
       "dev": true
     },
+    "array-sort": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/array-sort/-/array-sort-0.1.4.tgz",
+      "integrity": "sha512-BNcM+RXxndPxiZ2rd76k6nyQLRZr2/B/sdi8pQ+Joafr5AH279L40dfokSUTp8O+AaqYjXWhblBWa2st2nc4fQ==",
+      "requires": {
+        "default-compare": "^1.0.0",
+        "get-value": "^2.0.6",
+        "kind-of": "^5.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+        }
+      }
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -18708,23 +18725,6 @@
         "to-gfm-code-block": "^0.1.1"
       },
       "dependencies": {
-        "array-sort": {
-          "version": "0.1.4",
-          "resolved": "https://registry.npmjs.org/array-sort/-/array-sort-0.1.4.tgz",
-          "integrity": "sha512-BNcM+RXxndPxiZ2rd76k6nyQLRZr2/B/sdi8pQ+Joafr5AH279L40dfokSUTp8O+AaqYjXWhblBWa2st2nc4fQ==",
-          "requires": {
-            "default-compare": "^1.0.0",
-            "get-value": "^2.0.6",
-            "kind-of": "^5.0.2"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "5.1.0",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
-            }
-          }
-        },
         "for-in": {
           "version": "0.1.8",
           "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",

samples/react-content-query-online/package.json

@@ -34,7 +34,7 @@
     "fstream": ">=1.0.12",
     "growl": ">=1.10.0",
     "handlebars": "^4.0.6",
-    "handlebars-helpers": "^0.8.2",
+    "handlebars-helpers": "^0.8.4",
     "hoek": ">=4.2.1",
     "is-my-json-valid": ">=2.17.2",
     "js-yaml": ">=3.13.1",

samples/react-content-query-online/src/common/dataContracts/INormalizedResult.ts

@@ -1,9 +1,9 @@
-import { IUserValue } from "./IUserValue";
+import { IPersonValue } from "./IPersonValue";
 
 export interface INormalizedResult {
   textValue: string;
   htmlValue: string;
   rawValue: any;
   jsonValue: any;
-  userValue?: IUserValue;
+  personValue?: IPersonValue;
 }

samples/react-content-query-online/src/common/dataContracts/IPersonValue.ts

@@ -0,0 +1,9 @@
+export interface IPersonValue {
+  email: string;
+  displayName: string;
+  picture: {
+    small: string;
+    medium: string;
+    large: string;
+  };
+}

samples/react-content-query-online/src/common/dataContracts/IUserValue.ts

@@ -1,4 +0,0 @@
-export interface IUserValue {
-  email: string;
-  name: string;
-}

samples/react-content-query-online/src/common/services/ContentQueryService.ts

@@ -16,6 +16,7 @@ import { SearchService } from './SearchService';
 import { PeoplePickerService } from './PeoplePickerService';
 import { TaxonomyService } from './TaxonomyService';
 import { INormalizedResult } from '../dataContracts/INormalizedResult';
+import { IPersonValue } from '../dataContracts/IPersonValue';
 
 export class ContentQueryService implements IContentQueryService {
 
@@ -610,25 +611,9 @@ export class ContentQueryService implements IContentQueryService {
           textValue: result.FieldValuesAsText[formattedName],
           htmlValue: htmlValue,
           rawValue: result[viewField] || result[viewField + 'Id'],
-          jsonValue: this.jsonParseField(result[viewField] || result[viewField + 'Id'])
+          jsonValue: this.jsonParseField(result[viewField] || result[viewField + 'Id']),
+          personValue: this.extractPersonInfo(htmlValue)
         };
-
-        // Try to extract the user email and name
-        const sipIndex = htmlValue.indexOf(`sip='`);
-        if (sipIndex > -1) {
-          // Get the email address
-          const sipValue = htmlValue.substring(sipIndex + 5, htmlValue.indexOf(`'`, sipIndex + 5));
-          const anchorEnd: number = htmlValue.lastIndexOf('</a>');
-          const anchorStart: number = htmlValue.substring(0, anchorEnd).lastIndexOf('>');
-          const name: string = htmlValue.substring(anchorStart + 1, anchorEnd);
-
-          normalizedResult[viewField].userValue = {
-            email: sipValue,
-            displayName: name
-          };
-
-        }
-
       }
 
       return normalizedResult;
@@ -657,6 +642,50 @@ export class ContentQueryService implements IContentQueryService {
     return value;
   }
 
+  /**
+   * Returns user profile information based on a user field
+   * @param htmlValue : A string representation of the HTML field rendering
+   * This function does a very rudimentary extraction of user information based on very limited
+   * HTML parsing. We need to update this in the future to make it more sturdy.
+   */
+  private extractPersonInfo(htmlValue: string): IPersonValue {
+
+    try {
+      const sipIndex = htmlValue.indexOf(`sip='`);
+      if (sipIndex === -1) {
+        return null;
+      }
+      // Try to extract the user email and name
+
+      // Get the email address -- we should use RegExp for this, but I suck at RegExp
+      const sipValue = htmlValue.substring(sipIndex + 5, htmlValue.indexOf(`'`, sipIndex + 5));
+      const anchorEnd: number = htmlValue.lastIndexOf('</a>');
+      const anchorStart: number = htmlValue.substring(0, anchorEnd).lastIndexOf('>');
+      const name: string = htmlValue.substring(anchorStart + 1, anchorEnd);
+
+      // Generate picture URLs
+      const smallPictureUrl: string = `/_layouts/15/userphoto.aspx?size=S&username=${sipValue}`;
+      const medPictureUrl: string = `/_layouts/15/userphoto.aspx?size=M&username=${sipValue}`;
+      const largePictureUrl: string = `/_layouts/15/userphoto.aspx?size=L&username=${sipValue}`;
+
+
+      let result: IPersonValue = {
+        email: sipValue,
+        displayName: name,
+        picture: {
+          small: smallPictureUrl,
+          medium: medPictureUrl,
+          large: largePictureUrl
+        }
+      };
+      return result;
+
+    } catch (error) {
+
+      return null;
+    }
+  }
+
 
   /**************************************************************************************************
    * Returns an error message based on the specified error object

samples/react-content-query-online/src/webparts/contentQuery/ContentQueryWebPart.manifest.json

@@ -19,7 +19,8 @@
     },
     "officeFabricIconFontName": "QueryList",
     "properties": {
-      "description": "Content Query"
+      "description": "Content Query",
+      "enableMGT": false
     }
   }]
 }

samples/react-content-query-online/src/webparts/contentQuery/ContentQueryWebPart.ts

@@ -97,10 +97,7 @@ export default class ContentQueryWebPart
     // Register a handler to be notified if the theme variant changes
     this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);
 
-    // ADDED: For MGT support
+    return new Promise<void>((resolve, _reject) => {
-    Providers.globalProvider = new SharePointProvider(this.context);
-
-    return new Promise<void>((resolve, reject) => {
       this.ContentQueryService = new ContentQueryService(this.context, this.context.spHttpClient);
       this.properties.webUrl = this.properties.siteUrl || this.properties.webUrl ? this.properties.webUrl : this.context.pageContext.web.absoluteUrl.toLocaleLowerCase().trim();
       this.properties.siteUrl = this.properties.siteUrl ? this.properties.siteUrl : this.context.pageContext.site.absoluteUrl.toLowerCase().trim();
@@ -117,6 +114,10 @@ export default class ContentQueryWebPart
       // Select a dummy item
       this.selectedItem = { webUrl: '', listId: '', itemId: -1 };
 
+      if (this.properties.enableMGT === undefined) {
+        this.properties.enableMGT = false;
+      }
+
       resolve();
     });
   }
@@ -137,6 +138,12 @@ export default class ContentQueryWebPart
       viewFields: this.properties.viewFields,
     };
 
+    // Enable MGT support if provider isn't registered and we requested MGT support
+    if (this.properties.enableMGT && Providers.globalProvider === undefined) {
+      Providers.globalProvider = new SharePointProvider(this.context);
+    }
+
+
     const element: React.ReactElement<IContentQueryProps> = React.createElement(ContentQuery,
       {
         onLoadTemplate: this.loadTemplate.bind(this),
@@ -316,11 +323,6 @@ export default class ContentQueryWebPart
                 this.listTitleDropdown
               ]
             },
-        //   ]
-        // },
-        // {
-        //   header: { description: strings.QueryPageDescription },
-        //   groups: [
             {
               groupName: strings.QueryGroupName,
               groupFields: [
@@ -335,11 +337,6 @@ export default class ContentQueryWebPart
                 this.filtersPanel
               ]
             },
-        //   ]
-        // },
-        // {
-        //   header: { description: strings.DisplayPageDescription },
-        //   groups: [
             {
               groupName: strings.DisplayGroupName,
               groupFields: [
@@ -353,18 +350,19 @@ export default class ContentQueryWebPart
                 this.templateUrlTextField
               ]
             },
-        //   ]
-        // },
-        // {
-        //   header: { description: strings.ExternalPageDescription },
-        //   groups: [
             {
               groupName: strings.ExternalGroupName,
               groupFields: [
                 PropertyPaneLabel(ContentQueryConstants.propertyExternalScripts, {
                   text: strings.ExternalPageDescription
                 }),
-                this.externalScripts
+                this.externalScripts,
+                PropertyPaneToggle("enableMGT", {
+                  label: "Microsoft Graph Toolkit support",
+                  checked: this.properties.enableMGT,
+                  offText: "Disabled",
+                  onText: "Enabled"
+                })
               ]
             }
           ]

samples/react-content-query-online/src/webparts/contentQuery/IContentQueryWebPartProps.ts

@@ -1,6 +1,4 @@
 import { IQueryFilter }         from "../../controls/PropertyPaneQueryFilterPanel/components/QueryFilter/IQueryFilter";
-import { IPropertyFieldSite }   from "@pnp/spfx-property-controls/lib/PropertyFieldSitePicker";
-
 
 export interface IContentQueryWebPartProps {
   siteUrl: string;
@@ -19,4 +17,5 @@ export interface IContentQueryWebPartProps {
   externalScripts: string;
   itemSelectorEnabled: boolean;
   idFieldForciblyAdded: boolean;
+  enableMGT: boolean;
 }