{
+
+ /*************************************************************************************
+ * Component's constructor
+ * @param props
+ * @param state
+ *************************************************************************************/
+ constructor(props: ITextDialogProps, state: ITextDialogState) {
+ super(props);
+ this.state = { dialogText: this.props.dialogTextFieldValue, showDialog: false };
+ }
+
+
+ /*************************************************************************************
+ * Shows the dialog
+ *************************************************************************************/
+ private showDialog() {
+ this.setState({ dialogText: this.state.dialogText, showDialog: true });
+ }
+
+
+ /*************************************************************************************
+ * Notifies the parent with the dialog's latest value, then closes the dialog
+ *************************************************************************************/
+ private saveDialog() {
+ this.setState({ dialogText: this.state.dialogText, showDialog: false });
+
+ if(this.props.onChanged) {
+ this.props.onChanged(this.state.dialogText);
+ }
+ }
+
+
+ /*************************************************************************************
+ * Closes the dialog without notifying the parent for any changes
+ *************************************************************************************/
+ private cancelDialog() {
+ this.setState({ dialogText: this.state.dialogText, showDialog: false });
+ }
+
+
+ /*************************************************************************************
+ * Updates the dialog's value each time the textfield changes
+ *************************************************************************************/
+ private onDialogTextChanged(newValue: string) {
+ this.setState({ dialogText: newValue, showDialog: this.state.showDialog });
+ }
+
+
+ /*************************************************************************************
+ * Called immediately after updating occurs
+ *************************************************************************************/
+ public componentDidUpdate(prevProps: ITextDialogProps, prevState: ITextDialogState): void {
+ if (this.props.disabled !== prevProps.disabled || this.props.stateKey !== prevProps.stateKey) {
+ this.setState({ dialogText: this.props.dialogTextFieldValue, showDialog: this.state.showDialog });
+ }
+ }
+
+
+ /*************************************************************************************
+ * Renders the the TextDialog component
+ *************************************************************************************/
+ public render() {
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src/webparts/contentQuery/ContentQueryWebPart.manifest.json b/src/webparts/contentQuery/ContentQueryWebPart.manifest.json
index 97af5efe7..4c4d7c6f3 100644
--- a/src/webparts/contentQuery/ContentQueryWebPart.manifest.json
+++ b/src/webparts/contentQuery/ContentQueryWebPart.manifest.json
@@ -9,15 +9,15 @@
"preconfiguredEntries": [{
"groupId": "46edf08f-95c7-4ca7-9146-6471f9f471be",
- "group": { "default": "Under Development" },
- "title": { "default": "Content by Query WebPart" },
+ "group": { "default": "SPP Technologies" },
+ "title": { "default": "React Content Query WebPart" },
"description": {
"default": "A react content by query WebPart for querying items within a site and easily displaying them using a simple yet powerfull HandleBars templating engine.",
"fr-FR": "Un composante React permettant d'effectuer des requêtes sur les items et de facilement afficher les résultat à l'aide de gabarits HandleBars fournit par l'utilisateur"
},
"officeFabricIconFontName": "Page",
"properties": {
- "description": "Content by Query WebPart"
+ "description": "React Content Query WebPart"
}
}]
}
diff --git a/src/webparts/contentQuery/ContentQueryWebPart.ts b/src/webparts/contentQuery/ContentQueryWebPart.ts
index 691d886e4..7d8d9d31a 100644
--- a/src/webparts/contentQuery/ContentQueryWebPart.ts
+++ b/src/webparts/contentQuery/ContentQueryWebPart.ts
@@ -16,6 +16,7 @@ import { IContentQueryWebPartProps }
import { PropertyPaneAsyncDropdown } from '../../controls/PropertyPaneAsyncDropdown/PropertyPaneAsyncDropdown';
import { PropertyPaneQueryFilterPanel } from '../../controls/PropertyPaneQueryFilterPanel/PropertyPaneQueryFilterPanel';
import { PropertyPaneAsyncChecklist } from '../../controls/PropertyPaneAsyncChecklist/PropertyPaneAsyncChecklist';
+import { PropertyPaneTextDialog } from '../../controls/PropertyPaneTextDialog/PropertyPaneTextDialog';
import { IQueryFilter } from '../../controls/PropertyPaneQueryFilterPanel/components/QueryFilter/IQueryFilter';
import { IQueryFilterField } from '../../controls/PropertyPaneQueryFilterPanel/components/QueryFilter/IQueryFilterField';
import { IChecklistItem } from '../../controls/PropertyPaneAsyncChecklist/components/AsyncChecklist/IChecklistItem';
@@ -46,6 +47,7 @@ export default class ContentQueryWebPart extends BaseClientSideWebPart;
private filtersPanel: PropertyPaneQueryFilterPanel;
private viewFieldsChecklist: PropertyPaneAsyncChecklist;
+ private templateTextDialog: PropertyPaneTextDialog;
private templateUrlTextField: IPropertyPaneField;
@@ -88,6 +90,7 @@ export default class ContentQueryWebPart extends BaseClientSideWebPart { return checkedKeys; });
+ // Updates the default template text if it hasn't been altered by the user
+ if(!this.properties.hasDefaultTemplateBeenUpdated) {
+ let generatedTemplate = this.ContentQueryService.generateDefaultTemplate(checkedKeys);
+ update(this.properties, ContentQueryConstants.propertyTemplateText, (): any => { return generatedTemplate; });
+ this.templateTextDialog.properties.dialogTextFieldValue = generatedTemplate;
+ this.templateTextDialog.render();
+ }
+
// refresh web part
this.onPropertyPaneFieldChanged(propertyPath, oldValue, checkedKeys);
}
+ /***************************************************************************
+ * Handles the change of the viewFields property
+ ***************************************************************************/
+ private onTemplateTextChange(propertyPath: string, text: string) {
+ Log.verbose(this.logSource, "WebPart property 'templateText' has changed, refreshing WebPart...", this.context.serviceScope);
+ const oldValue = get(this.properties, propertyPath);
+
+ // Stores the new value in web part properties
+ update(this.properties, propertyPath, (): any => { return text; });
+
+ // Updates the "hasDefaultTemplateBeenUpdated" to true so the WebPart doesn't override the user template after updating view fields
+ if(!this.properties.hasDefaultTemplateBeenUpdated) {
+ update(this.properties, ContentQueryConstants.propertyhasDefaultTemplateBeenUpdated, (): any => { return true; });
+ }
+
+ // refresh web part
+ this.onPropertyPaneFieldChanged(propertyPath, oldValue, text);
+ }
+
+
/***************************************************************************
* Validates the templateUrl property
***************************************************************************/
@@ -505,4 +555,4 @@ export default class ContentQueryWebPart extends BaseClientSideWebPart('handlebars-helpers')({
+ handlebars: Handlebars
+ });
+
this.onGoingAsyncCalls = [];
this.state = { loading: true, processedTemplateResult: null, error: null };
- }
+ }
/*************************************************************************************
@@ -65,7 +70,7 @@ export default class ContentQuery extends React.Component {
// Loads the handlebars template
- this.props.onLoadTemplate(this.props.templateUrl).then((templateContent: string) => {
+ this.loadTemplate().then((templateContent: string) => {
// Only process the result of the current async call if it's the last in the ordered queue
if(this.isLastExecutedCall(templateContext.callTimeStamp)) {
@@ -91,6 +96,26 @@ export default class ContentQuery extends React.Component {
+ // Resolves the template content if no template url
+ if(isEmpty(this.props.templateUrl)) {
+ return Promise.resolve(this.props.templateText);
+ }
+
+ return new Promise((resolve,reject) => {
+ this.props.onLoadTemplate(this.props.templateUrl).then((templateContent: string) => {
+ resolve(templateContent);
+ })
+ .catch((error: string) => {
+ reject(error);
+ });
+ });
+ }
+
+
/*************************************************************************************
* Process the specified handlebars template with the given template context
* @param templateContent : The handlebars template that needs to be compiled
@@ -120,7 +145,7 @@ export default class ContentQuery extends React.Component
- Configure the following mandatory properties in order to display results :
+ { this.props.strings.mandatoryProperties }
-
+
}
diff --git a/src/webparts/contentQuery/components/IContentQueryProps.ts b/src/webparts/contentQuery/components/IContentQueryProps.ts
index 55efc6d6c..6803ea265 100644
--- a/src/webparts/contentQuery/components/IContentQueryProps.ts
+++ b/src/webparts/contentQuery/components/IContentQueryProps.ts
@@ -7,7 +7,8 @@ export interface IContentQueryProps {
onLoadTemplate: (templateUrl: string) => Promise;
onLoadTemplateContext: (querySettings: IQuerySettings, callTimeStamp: number) => Promise;
querySettings: IQuerySettings;
- templateUrl: string;
+ templateText?: string;
+ templateUrl?: string;
strings: IContentQueryStrings;
stateKey: string;
}
\ No newline at end of file
diff --git a/src/webparts/contentQuery/components/IContentQueryStrings.ts b/src/webparts/contentQuery/components/IContentQueryStrings.ts
index 552983e68..ea04c2698 100644
--- a/src/webparts/contentQuery/components/IContentQueryStrings.ts
+++ b/src/webparts/contentQuery/components/IContentQueryStrings.ts
@@ -1,5 +1,6 @@
export interface IContentQueryStrings {
loadingItems: string;
+ mandatoryProperties: string;
errorLoadingQuery: string;
errorLoadingTemplate: string;
errorProcessingTemplate: string;
diff --git a/src/webparts/contentQuery/loc/en-us.js b/src/webparts/contentQuery/loc/en-us.js
index 83a84d1f1..980c5dd4e 100644
--- a/src/webparts/contentQuery/loc/en-us.js
+++ b/src/webparts/contentQuery/loc/en-us.js
@@ -2,10 +2,12 @@ define([], function() {
return {
SourcePageDescription: "Specify where the WebPart should get the results from.",
QueryPageDescription: "If needed, choose the sorting behavior, limit the results, or add filters in order to narrow the query down.",
- DisplayPageDescription: "Finally, specify which fields should be available for rendering within the HandleBars template, and specify the URL of the said template.",
+ DisplayPageDescription: "Specify which fields should be available for rendering within the HandleBars template, and edit your handlebars template.",
+ ExternalPageDescription: "Optionally, externalize the properties below by specifying valid sharepoint urls.",
SourceGroupName: "Source",
QueryGroupName: "Query",
DisplayGroupName: "Display",
+ ExternalGroupName: "External Resources",
WebUrlFieldLabel: "Web Url",
WebUrlFieldPlaceholder: "Select the source web...",
WebUrlFieldLoadingLabel: "Loading webs from current site...",
@@ -29,6 +31,7 @@ define([], function() {
ErrorProcessingTemplate: "An error occured while processing the handlebars template : {0}",
ShowItemsAscending: "Show items in ascending order",
ShowItemsDescending: "Show items in descending order",
+ DynamicallyGeneratedTemplate: "Dynamically generated template",
queryFilterPanelStrings: {
filtersLabel: "Filters",
addFilterLabel: "Add filter",
@@ -80,8 +83,18 @@ define([], function() {
loading: 'Loading fields from specified list...',
errorFormat: 'An error occured while loading fields : {0}'
},
+ templateTextStrings: {
+ dialogTitle: "Edit template content",
+ dialogSubText: "Edit your handlebars template in this dialog. Note that the inline template specified within this dialog will be ignored if a template url is specified.",
+ dialogButtonLabel: "Template",
+ dialogButtonText: "Edit template content",
+ dialogTextBoxPlaceholder: "Edit your handlebars template here...",
+ saveButtonText: 'Save',
+ cancelButtonText: 'Cancel'
+ },
contentQueryStrings: {
loadingItems: 'Processing query',
+ mandatoryProperties: 'Configure the following mandatory properties in order to display results :',
errorLoadingQuery: 'An error occured while processing the query : {0}',
errorLoadingTemplate: 'An error occured while loading the template: {0}',
errorProcessingTemplate: 'An error occured while processing the handlebars template : {0}'
diff --git a/src/webparts/contentQuery/loc/mystrings.d.ts b/src/webparts/contentQuery/loc/mystrings.d.ts
index 6df24ef0c..fa264466d 100644
--- a/src/webparts/contentQuery/loc/mystrings.d.ts
+++ b/src/webparts/contentQuery/loc/mystrings.d.ts
@@ -2,9 +2,11 @@ declare interface IContentQueryStrings {
SourcePageDescription: string;
QueryPageDescription: string;
DisplayPageDescription: string;
+ ExternalPageDescription: string;
SourceGroupName: string;
QueryGroupName: string;
DisplayGroupName: string;
+ ExternalGroupName: string;
WebUrlFieldLabel: string;
WebUrlFieldPlaceholder: string;
WebUrlFieldLoadingLabel: string;
@@ -27,8 +29,10 @@ declare interface IContentQueryStrings {
ErrorWebNotFound: string;
ShowItemsAscending: string;
ShowItemsDescending: string;
+ DynamicallyGeneratedTemplate: string;
queryFilterPanelStrings: any;
viewFieldsChecklistStrings: any;
+ templateTextStrings: any;
contentQueryStrings: any;
}