honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-02-09 22:44:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added support for MGT

Browse Source
This commit is contained in:
Hugo Bernier 2021-01-06 21:42:17 -05:00
parent 6d146dfe2f
commit a7422d9985
10 changed files with 166 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
samples/react-content-query-online/README.md
View File

@ -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.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.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.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
```handlebars ```handlebars
{{#each items}} {{#each items}}
<div class="item"> <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>MyImageField JSON value : {{MyImageField.jsonValue}}</p>
<p>MyPersonField person value : {{MyPersonField.personValue}}</p>
</div> </div>
{{/each}} {{/each}}
``` ```
@ -301,10 +304,11 @@ Property | Description
```html ```html
<div class="item"> <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>MyImageField JSON value: [Object] </p>
<p>MyPersonField person value: [Object] </p>
</div> </div>
... ...
``` ```
@ -315,6 +319,12 @@ You can use `JSONValue` to parse complex fields -- such as image fields -- and d
<img src="{{MyImageField.jsonValue.serverRelativeUrl}}" /> <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 your own external scripts and/or block helpers
#### Including basic library files #### Including basic library files

34
samples/react-content-query-online/package-lock.json generated
View File

@ -12483,6 +12483,23 @@
"integrity": "sha1-5zA08A3MH0CHYAj9IP6ud71LfC8=", "integrity": "sha1-5zA08A3MH0CHYAj9IP6ud71LfC8=",
"dev": true "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": { "array-union": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@ -18708,23 +18725,6 @@
"to-gfm-code-block": "^0.1.1" "to-gfm-code-block": "^0.1.1"
}, },
"dependencies": { "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": { "for-in": {
"version": "0.1.8", "version": "0.1.8",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz", "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",

2
samples/react-content-query-online/package.json
View File

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

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

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

9
samples/react-content-query-online/src/common/dataContracts/IPersonValue.ts Normal file
View File

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

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

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

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

@ -16,6 +16,7 @@ import { SearchService } from './SearchService';
import { PeoplePickerService } from './PeoplePickerService'; import { PeoplePickerService } from './PeoplePickerService';
import { TaxonomyService } from './TaxonomyService'; import { TaxonomyService } from './TaxonomyService';
import { INormalizedResult } from '../dataContracts/INormalizedResult'; import { INormalizedResult } from '../dataContracts/INormalizedResult';
import { IPersonValue } from '../dataContracts/IPersonValue';
export class ContentQueryService implements IContentQueryService { export class ContentQueryService implements IContentQueryService {
@ -610,25 +611,9 @@ export class ContentQueryService implements IContentQueryService {
textValue: result.FieldValuesAsText[formattedName], textValue: result.FieldValuesAsText[formattedName],
htmlValue: htmlValue, htmlValue: htmlValue,
rawValue: result[viewField] || result[viewField + 'Id'], 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; return normalizedResult;
@ -657,6 +642,50 @@ export class ContentQueryService implements IContentQueryService {
return value; 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 * Returns an error message based on the specified error object

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

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

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

@ -1,35 +1,35 @@
import * as React from 'react'; import * as React from 'react';
import * as ReactDom from 'react-dom'; import * as ReactDom from 'react-dom';
import * as strings from 'contentQueryStrings'; import * as strings from 'contentQueryStrings';
import { Version, Text, Log } from '@microsoft/sp-core-library'; import { Version, Text, Log } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base"; import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, IPropertyPaneField } from "@microsoft/sp-property-pane"; import { IPropertyPaneConfiguration, IPropertyPaneField } from "@microsoft/sp-property-pane";
import { IPropertyPaneTextFieldProps, PropertyPaneTextField } from "@microsoft/sp-property-pane"; import { IPropertyPaneTextFieldProps, PropertyPaneTextField } from "@microsoft/sp-property-pane";
import { IPropertyPaneChoiceGroupProps, PropertyPaneChoiceGroup } from "@microsoft/sp-property-pane"; import { IPropertyPaneChoiceGroupProps, PropertyPaneChoiceGroup } from "@microsoft/sp-property-pane";
import { } from "@microsoft/sp-webpart-base"; import { } from "@microsoft/sp-webpart-base";
import { IPropertyPaneToggleProps, PropertyPaneToggle } from "@microsoft/sp-property-pane"; import { IPropertyPaneToggleProps, PropertyPaneToggle } from "@microsoft/sp-property-pane";
import { IPropertyPaneLabelProps, PropertyPaneLabel } from "@microsoft/sp-property-pane"; import { IPropertyPaneLabelProps, PropertyPaneLabel } from "@microsoft/sp-property-pane";
import { IPropertyPaneButtonProps, PropertyPaneButton, PropertyPaneButtonType } from "@microsoft/sp-property-pane"; import { IPropertyPaneButtonProps, PropertyPaneButton, PropertyPaneButtonType } from "@microsoft/sp-property-pane";
import { update, get, isEmpty } from '@microsoft/sp-lodash-subset'; import { update, get, isEmpty } from '@microsoft/sp-lodash-subset';
import { IDropdownOption, IPersonaProps, ITag } from 'office-ui-fabric-react'; import { IDropdownOption, IPersonaProps, ITag } from 'office-ui-fabric-react';
import ContentQuery from './components/ContentQuery'; import ContentQuery from './components/ContentQuery';
import { IContentQueryProps } from './components/IContentQueryProps'; import { IContentQueryProps } from './components/IContentQueryProps';
import { IQuerySettings } from './components/IQuerySettings'; import { IQuerySettings } from './components/IQuerySettings';
import { IContentQueryTemplateContext } from './components/IContentQueryTemplateContext'; import { IContentQueryTemplateContext } from './components/IContentQueryTemplateContext';
import { IContentQueryWebPartProps } from './IContentQueryWebPartProps'; import { IContentQueryWebPartProps } from './IContentQueryWebPartProps';
import { PropertyPaneAsyncDropdown } from '../../controls/PropertyPaneAsyncDropdown/PropertyPaneAsyncDropdown'; import { PropertyPaneAsyncDropdown } from '../../controls/PropertyPaneAsyncDropdown/PropertyPaneAsyncDropdown';
import { PropertyPaneQueryFilterPanel } from '../../controls/PropertyPaneQueryFilterPanel/PropertyPaneQueryFilterPanel'; import { PropertyPaneQueryFilterPanel } from '../../controls/PropertyPaneQueryFilterPanel/PropertyPaneQueryFilterPanel';
import { PropertyPaneAsyncChecklist } from '../../controls/PropertyPaneAsyncChecklist/PropertyPaneAsyncChecklist'; import { PropertyPaneAsyncChecklist } from '../../controls/PropertyPaneAsyncChecklist/PropertyPaneAsyncChecklist';
import { PropertyPaneTextDialog } from '../../controls/PropertyPaneTextDialog/PropertyPaneTextDialog'; import { PropertyPaneTextDialog } from '../../controls/PropertyPaneTextDialog/PropertyPaneTextDialog';
import { IQueryFilterField } from '../../controls/PropertyPaneQueryFilterPanel/components/QueryFilter/IQueryFilterField'; import { IQueryFilterField } from '../../controls/PropertyPaneQueryFilterPanel/components/QueryFilter/IQueryFilterField';
import { IChecklistItem } from '../../controls/PropertyPaneAsyncChecklist/components/AsyncChecklist/IChecklistItem'; import { IChecklistItem } from '../../controls/PropertyPaneAsyncChecklist/components/AsyncChecklist/IChecklistItem';
import { ContentQueryService } from '../../common/services/ContentQueryService'; import { ContentQueryService } from '../../common/services/ContentQueryService';
import { IContentQueryService } from '../../common/services/IContentQueryService'; import { IContentQueryService } from '../../common/services/IContentQueryService';
import { ContentQueryConstants } from '../../common/constants/ContentQueryConstants'; import { ContentQueryConstants } from '../../common/constants/ContentQueryConstants';
import { IDynamicDataPropertyDefinition } from '@microsoft/sp-dynamic-data'; import { IDynamicDataPropertyDefinition } from '@microsoft/sp-dynamic-data';
import { IDynamicDataCallables } from '@microsoft/sp-dynamic-data'; import { IDynamicDataCallables } from '@microsoft/sp-dynamic-data';
import { IDynamicItem } from '../../common/dataContracts/IDynamicItem'; import { IDynamicItem } from '../../common/dataContracts/IDynamicItem';
import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base'; import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';
import { Providers, SharePointProvider } from '@microsoft/mgt'; import { Providers, SharePointProvider } from '@microsoft/mgt';
@ -97,10 +97,7 @@ export default class ContentQueryWebPart
// Register a handler to be notified if the theme variant changes // Register a handler to be notified if the theme variant changes
this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent); 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.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.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(); 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 // Select a dummy item
this.selectedItem = { webUrl: '', listId: '', itemId: -1 }; this.selectedItem = { webUrl: '', listId: '', itemId: -1 };
if (this.properties.enableMGT === undefined) {
this.properties.enableMGT = false;
}
resolve(); resolve();
}); });
} }
@ -137,6 +138,12 @@ export default class ContentQueryWebPart
viewFields: this.properties.viewFields, 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, const element: React.ReactElement<IContentQueryProps> = React.createElement(ContentQuery,
{ {
onLoadTemplate: this.loadTemplate.bind(this), onLoadTemplate: this.loadTemplate.bind(this),
@ -308,7 +315,7 @@ export default class ContentQueryWebPart
{ {
groupName: strings.SourceGroupName, groupName: strings.SourceGroupName,
groupFields: [ groupFields: [
PropertyPaneLabel(ContentQueryConstants.propertySiteUrl,{ PropertyPaneLabel(ContentQueryConstants.propertySiteUrl, {
text: strings.SourcePageDescription text: strings.SourcePageDescription
}), }),
this.siteUrlDropdown, this.siteUrlDropdown,
@ -316,15 +323,10 @@ export default class ContentQueryWebPart
this.listTitleDropdown this.listTitleDropdown
] ]
}, },
// ]
// },
// {
// header: { description: strings.QueryPageDescription },
// groups: [
{ {
groupName: strings.QueryGroupName, groupName: strings.QueryGroupName,
groupFields: [ groupFields: [
PropertyPaneLabel(ContentQueryConstants.propertyOrderBy,{ PropertyPaneLabel(ContentQueryConstants.propertyOrderBy, {
text: strings.QueryPageDescription text: strings.QueryPageDescription
}), }),
this.orderByDropdown, this.orderByDropdown,
@ -335,15 +337,10 @@ export default class ContentQueryWebPart
this.filtersPanel this.filtersPanel
] ]
}, },
// ]
// },
// {
// header: { description: strings.DisplayPageDescription },
// groups: [
{ {
groupName: strings.DisplayGroupName, groupName: strings.DisplayGroupName,
groupFields: [ groupFields: [
PropertyPaneLabel(ContentQueryConstants.propertyViewFields,{ PropertyPaneLabel(ContentQueryConstants.propertyViewFields, {
text: strings.DisplayPageDescription text: strings.DisplayPageDescription
}), }),
this.viewFieldsChecklist, this.viewFieldsChecklist,
@ -353,18 +350,19 @@ export default class ContentQueryWebPart
this.templateUrlTextField this.templateUrlTextField
] ]
}, },
// ]
// },
// {
// header: { description: strings.ExternalPageDescription },
// groups: [
{ {
groupName: strings.ExternalGroupName, groupName: strings.ExternalGroupName,
groupFields: [ groupFields: [
PropertyPaneLabel(ContentQueryConstants.propertyExternalScripts,{ PropertyPaneLabel(ContentQueryConstants.propertyExternalScripts, {
text: strings.ExternalPageDescription text: strings.ExternalPageDescription
}), }),
this.externalScripts this.externalScripts,
PropertyPaneToggle("enableMGT", {
label: "Microsoft Graph Toolkit support",
checked: this.properties.enableMGT,
offText: "Disabled",
onText: "Enabled"
})
] ]
} }
] ]
@ -427,14 +425,14 @@ export default class ContentQueryWebPart
/*************************************************************************** /***************************************************************************
* Loads the HandleBars template from the specified url * Loads the HandleBars template from the specified url
***************************************************************************/ ***************************************************************************/
private loadTemplate(templateUrl:string): Promise<string> { private loadTemplate(templateUrl: string): Promise<string> {
return this.ContentQueryService.getFileContent(templateUrl); return this.ContentQueryService.getFileContent(templateUrl);
} }
/*************************************************************************** /***************************************************************************
* Loads the HandleBars context based on the specified query * Loads the HandleBars context based on the specified query
***************************************************************************/ ***************************************************************************/
private loadTemplateContext(querySettings:IQuerySettings, callTimeStamp: number): Promise<IContentQueryTemplateContext> { private loadTemplateContext(querySettings: IQuerySettings, callTimeStamp: number): Promise<IContentQueryTemplateContext> {
return this.ContentQueryService.getTemplateContext(querySettings, callTimeStamp); return this.ContentQueryService.getTemplateContext(querySettings, callTimeStamp);
} }
@ -469,14 +467,14 @@ export default class ContentQueryWebPart
/*************************************************************************** /***************************************************************************
* Loads the dropdown options for the listTitle property * Loads the dropdown options for the listTitle property
***************************************************************************/ ***************************************************************************/
private loadFilterFields():Promise<IQueryFilterField[]> { private loadFilterFields(): Promise<IQueryFilterField[]> {
return this.ContentQueryService.getFilterFields(this.properties.webUrl, this.properties.listId); return this.ContentQueryService.getFilterFields(this.properties.webUrl, this.properties.listId);
} }
/*************************************************************************** /***************************************************************************
* Loads the checklist items for the viewFields property * Loads the checklist items for the viewFields property
***************************************************************************/ ***************************************************************************/
private loadViewFieldsChecklistItems():Promise<IChecklistItem[]> { private loadViewFieldsChecklistItems(): Promise<IChecklistItem[]> {
return this.ContentQueryService.getViewFieldsChecklistItems(this.properties.webUrl, this.properties.listId); return this.ContentQueryService.getViewFieldsChecklistItems(this.properties.webUrl, this.properties.listId);
} }
@ -486,7 +484,7 @@ export default class ContentQueryWebPart
* @param currentPersonas : The IPersonaProps already selected in the people picker * @param currentPersonas : The IPersonaProps already selected in the people picker
* @param limitResults : The results limit if any * @param limitResults : The results limit if any
***************************************************************************/ ***************************************************************************/
private loadPeoplePickerSuggestions(filterText: string, currentPersonas: IPersonaProps[], limitResults?: number):Promise<IPersonaProps[]> { private loadPeoplePickerSuggestions(filterText: string, currentPersonas: IPersonaProps[], limitResults?: number): Promise<IPersonaProps[]> {
return this.ContentQueryService.getPeoplePickerSuggestions(this.properties.webUrl, filterText, currentPersonas, limitResults); return this.ContentQueryService.getPeoplePickerSuggestions(this.properties.webUrl, filterText, currentPersonas, limitResults);
} }
@ -497,7 +495,7 @@ export default class ContentQueryWebPart
* @param currentPersonas : The IPersonaProps already selected in the people picker * @param currentPersonas : The IPersonaProps already selected in the people picker
* @param limitResults : The results limit if any * @param limitResults : The results limit if any
***************************************************************************/ ***************************************************************************/
private loadTaxonomyPickerSuggestions(field: IQueryFilterField, filterText: string, currentTerms: ITag[]):Promise<ITag[]> { private loadTaxonomyPickerSuggestions(field: IQueryFilterField, filterText: string, currentTerms: ITag[]): Promise<ITag[]> {
return this.ContentQueryService.getTaxonomyPickerSuggestions(this.properties.webUrl, this.properties.listId, field, filterText, currentTerms); return this.ContentQueryService.getTaxonomyPickerSuggestions(this.properties.webUrl, this.properties.listId, field, filterText, currentTerms);
} }
@ -517,7 +515,7 @@ export default class ContentQueryWebPart
this.resetDependentPropertyPanes(propertyPath); this.resetDependentPropertyPanes(propertyPath);
// If the viewfields have changed, update the default template text if it hasn't been altered by the user // If the viewfields have changed, update the default template text if it hasn't been altered by the user
if(propertyPath == ContentQueryConstants.propertyViewFields && !this.properties.hasDefaultTemplateBeenUpdated) { if (propertyPath == ContentQueryConstants.propertyViewFields && !this.properties.hasDefaultTemplateBeenUpdated) {
let generatedTemplate = this.ContentQueryService.generateDefaultTemplate(newValue, this.properties.itemSelectorEnabled); let generatedTemplate = this.ContentQueryService.generateDefaultTemplate(newValue, this.properties.itemSelectorEnabled);
update(this.properties, ContentQueryConstants.propertyTemplateText, (): any => { return generatedTemplate; }); update(this.properties, ContentQueryConstants.propertyTemplateText, (): any => { return generatedTemplate; });
this.templateTextDialog.properties.dialogTextFieldValue = generatedTemplate; this.templateTextDialog.properties.dialogTextFieldValue = generatedTemplate;
@ -525,7 +523,7 @@ export default class ContentQueryWebPart
} }
// If the templateText have changed, update the "hasDefaultTemplateBeenUpdated" to true so the WebPart doesn't override the user template after updating view fields // If the templateText have changed, update the "hasDefaultTemplateBeenUpdated" to true so the WebPart doesn't override the user template after updating view fields
if(propertyPath == ContentQueryConstants.propertyTemplateText && !this.properties.hasDefaultTemplateBeenUpdated) { if (propertyPath == ContentQueryConstants.propertyTemplateText && !this.properties.hasDefaultTemplateBeenUpdated) {
update(this.properties, ContentQueryConstants.propertyhasDefaultTemplateBeenUpdated, (): any => { return true; }); update(this.properties, ContentQueryConstants.propertyhasDefaultTemplateBeenUpdated, (): any => { return true; });
} }
@ -534,7 +532,7 @@ export default class ContentQueryWebPart
if (!this.disableReactivePropertyChanges) if (!this.disableReactivePropertyChanges)
this.render(); this.render();
if(rerenderTemplateTextDialog) { if (rerenderTemplateTextDialog) {
this.templateTextDialog.render(); this.templateTextDialog.render();
} }
} }
@ -548,21 +546,21 @@ export default class ContentQueryWebPart
return new Promise<string>((resolve, reject) => { return new Promise<string>((resolve, reject) => {
// Doesn't raise any error if file is empty (otherwise error message will show on initial load...) // Doesn't raise any error if file is empty (otherwise error message will show on initial load...)
if(isEmpty(value)) { if (isEmpty(value)) {
resolve(''); resolve('');
} }
// Resolves an error if the file isn't a valid .htm or .html file // Resolves an error if the file isn't a valid .htm or .html file
else if(!this.ContentQueryService.isValidTemplateFile(value)) { else if (!this.ContentQueryService.isValidTemplateFile(value)) {
resolve(strings.ErrorTemplateExtension); resolve(strings.ErrorTemplateExtension);
} }
// Resolves an error if the file doesn't answer a simple head request // Resolves an error if the file doesn't answer a simple head request
else { else {
this.ContentQueryService.ensureFileResolves(value).then((isFileResolving:boolean) => { this.ContentQueryService.ensureFileResolves(value).then((isFileResolving: boolean) => {
resolve(''); resolve('');
}) })
.catch((error) => { .catch((error) => {
resolve(Text.format(strings.ErrorTemplateResolve, error)); resolve(Text.format(strings.ErrorTemplateResolve, error));
}); });
} }
}); });
} }
@ -586,14 +584,14 @@ export default class ContentQueryWebPart
* Resets dependent property panes if needed * Resets dependent property panes if needed
***************************************************************************/ ***************************************************************************/
private resetDependentPropertyPanes(propertyPath: string): void { private resetDependentPropertyPanes(propertyPath: string): void {
if(propertyPath == ContentQueryConstants.propertySiteUrl) { if (propertyPath == ContentQueryConstants.propertySiteUrl) {
this.resetWebUrlPropertyPane(); this.resetWebUrlPropertyPane();
this.resetListTitlePropertyPane(); this.resetListTitlePropertyPane();
this.resetOrderByPropertyPane(); this.resetOrderByPropertyPane();
this.resetFiltersPropertyPane(); this.resetFiltersPropertyPane();
this.resetViewFieldsPropertyPane(); this.resetViewFieldsPropertyPane();
} }
else if(propertyPath == ContentQueryConstants.propertyWebUrl) { else if (propertyPath == ContentQueryConstants.propertyWebUrl) {
this.resetListTitlePropertyPane(); this.resetListTitlePropertyPane();
this.resetOrderByPropertyPane(); this.resetOrderByPropertyPane();
this.resetFiltersPropertyPane(); this.resetFiltersPropertyPane();

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

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