+ Sorry, no results found.
+
+ );
+ } else {
+ // Load the template
+ if (typeof this.props.externalTemplate !== 'undefined') {
+ /* tslint:disable:variable-name */
+ const CrntComponent: any = this.props.externalTemplate.component;
+ /* tslint:disable:variable-name */
+ return
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/samples/react-search-wp/src/webparts/searchSpfx/templates/TableTemplate.tsx b/samples/react-search-wp/src/webparts/searchSpfx/templates/TableTemplate.tsx
new file mode 100644
index 000000000..44cc3ff22
--- /dev/null
+++ b/samples/react-search-wp/src/webparts/searchSpfx/templates/TableTemplate.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { css } from 'office-ui-fabric-react';
+import ModuleLoader from '@microsoft/sp-module-loader';
+
+import styles from '../SearchSpfx.module.scss';
+import { ISearchSpfxWebPartProps } from '../ISearchSpfxWebPartProps';
+
+import * as moment from 'moment';
+
+export interface ITableTemplate extends ISearchSpfxWebPartProps {
+ results: any[];
+}
+
+export default class TableTemplate extends React.Component
+
+ Search results for query: {this.props.query}
+ { + this.props.results.map((result, index) => { + return (Result { index + 1 }: {result.Title}
); + }) + } +
+ {
+ (() => {
+ // Check if you need to show a title
+ if (this.props.title !== "") {
+ return
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/samples/react-search-wp/src/webparts/searchSpfx/templates/TemplateLoader.ts b/samples/react-search-wp/src/webparts/searchSpfx/templates/TemplateLoader.ts
new file mode 100644
index 000000000..1b8044add
--- /dev/null
+++ b/samples/react-search-wp/src/webparts/searchSpfx/templates/TemplateLoader.ts
@@ -0,0 +1,20 @@
+import { ITemplates } from '../utils/ITemplates';
+
+export const allTemplates: ITemplates[] = [
+ { key: 'DefaultTemplate', text: 'Default template', mappings: 'Path,Title' },
+ { key: 'TableTemplate', text: 'Table template', mappings: 'Path,Title,Filename,Fileextension,ModifiedOWSDATE,EditorOWSUSER' }
+];
+
+export default class TemplateLoader {
+ public getComponent(templateToLoad: string): Promise{this.props.title}
; + } + })() + } + +| Type | +Name | +Modified | +Modified by | +
|---|---|---|---|
|
+ |
+ + {result.Filename !== null ? result.Filename.substring(0, result.Filename.lastIndexOf('.')) : ""} + | +{this.getDateFromString(result.ModifiedOWSDATE)} | +{this.getAuthorDisplayName(result.EditorOWSUSER)} | +