From eae60906b954fdc45efc8aea870b3dfee208f097 Mon Sep 17 00:00:00 2001 From: Vesa Juvonen Date: Fri, 4 Nov 2016 10:43:11 +0200 Subject: [PATCH] Small adjustments on the code and improvements on the readme. --- samples/js-display-list/.vscode/settings.json | 2 + samples/js-display-list/README.md | 11 +- .../jsDisplayList/JsDisplayListWebPart.ts | 139 +++++++++--------- 3 files changed, 75 insertions(+), 77 deletions(-) diff --git a/samples/js-display-list/.vscode/settings.json b/samples/js-display-list/.vscode/settings.json index ab46aaa4f..e948448d9 100644 --- a/samples/js-display-list/.vscode/settings.json +++ b/samples/js-display-list/.vscode/settings.json @@ -18,4 +18,6 @@ "lib": true, "temp": true } +, +"typescript.check.workspaceVersion": false } diff --git a/samples/js-display-list/README.md b/samples/js-display-list/README.md index 62f772b84..af0d67c3a 100644 --- a/samples/js-display-list/README.md +++ b/samples/js-display-list/README.md @@ -1,11 +1,13 @@ # Display List JavaScript Client-Side Web Part ## Summary -Sample Web Part that demonstrates the use of JavaScript in creating a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list. - +Simplistic sample Web Part that demonstrates the use of JavaScript in creating a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list. + ![Screeshot of the Display List web part](./assets/display-list-preview.png). +> Does only show data when hosted in SharePoint. No mock data at this point for local testing the rendering. + ## Applies to * [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) @@ -39,13 +41,14 @@ Version|Date|Comments - `tsd install` - `gulp serve` - `Open the *workbench* on your Office 365 Developer tenant` + - Basic functionality can be tested locally, data is only shown when used in context of SharePoint ## Features -The js-display-list web part displays the content of the list specified in the web part properties pane. +The js-display-list web part displays the content of the list specified in the web part properties pane. This Web Part illustrates the following concepts on top of the SharePoint Framework: -* Using a dynamic drop down box in the web part properties pane to display the titles of the lists in the current web +* Using a dynamic drop down box in the web part properties pane to display the titles of the lists in the current web * The use of a Loading Indicator * Logging * Rendering error messages. diff --git a/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts b/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts index 1e341ce85..5fb66609b 100644 --- a/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts +++ b/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts @@ -38,7 +38,7 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart(): Promise { - this._getListTitles() - .then((response) => { + public onInit(): Promise { + this._getListTitles() + .then((response) => { - this._dropdownOptions = response.value.map((list: ISPList) => { - return { - key: list.Title, - text: list.Title - }; + this._dropdownOptions = response.value.map((list: ISPList) => { + return { + key: list.Title, + text: list.Title + }; + }); }); - }); return Promise.resolve(); -} + } private _getListTitles(): Promise { - return this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`) - .then((response: Response) => { - return response.json(); - }); + return this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`) + .then((response: Response) => { + return response.json(); + }); } - private _getListData(listName: string): Promise { + private _getListData(listName: string): Promise { //return this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/Web/Lists(guid'${listName}')/items?$select=ID,Title,Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title`) return this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('${listName}')/items?$select=Title,ID,Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title`) - .then((response: Response) => { - return response.json(); - }); + .then((response: Response) => { + return response.json(); + }); } - private _renderList(items: ISPList[]): void { + private _renderList(items: ISPList[]): void { let html: string = ''; - debugger; + //debugger; + items.forEach((item: ISPList) => { + let title: string = ''; - //debugger; - items.forEach((item: ISPList) => { - let title:string = ''; + if (item.Title === null) { + title = "Missing title for item with ID= " + item.Id; + } + else { + title = item.Title; + } + + var created = item["Created"]; + + html += ` +
+
${title}
+
${created.substring(0, created.length - 1).replace('T', ' ')}
+
${item['Author'].Title}
+
`; + }); + + if (items.length == 0) { + html = '

The selected list is empty

'; - if (item.Title === null) - { - title= "Missing title for item with ID= " + item.Id; } - else - { - title= item.Title; - } - - - - var created = item["Created"]; - - html += ` -
-
${title}
-
${created.substring(0,created.length-1).replace('T',' ')}
-
${item['Author'].Title}
-
`; - }); - - if (items.length == 0) - { - html ='

The selected list is empty

'; - + const listContainer: Element = this.domElement.querySelector('#spListContainer'); + this.context.statusRenderer.clearLoadingIndicator(this.domElement); + listContainer.innerHTML = html; } - const listContainer: Element = this.domElement.querySelector('#spListContainer'); - this.context.statusRenderer.clearLoadingIndicator(this.domElement); - listContainer.innerHTML = html; -} - private _renderListAsync(): void { + private _renderListAsync(): void { - this.domElement.innerHTML = ` + this.domElement.innerHTML = `

${this.properties.listTitle} List

@@ -165,26 +158,26 @@ public onInit(): Promise {
`; - const listContainer: Element = this.domElement.querySelector('#spListContainer'); + const listContainer: Element = this.domElement.querySelector('#spListContainer'); // Local environment - debugger; - if (this.context.environment.type === EnvironmentType.Local) { - let html: string = '

Local test environment [No connection to SharePoint]

'; - this.context.statusRenderer.clearLoadingIndicator(this.domElement); - listContainer.innerHTML = html; - } - else { - //debugger; - this._getListData(this.properties.listTitle).then((response) => { + // debugger; + if (this.context.environment.type === EnvironmentType.Local) { + let html: string = '

Local test environment [No connection to SharePoint]

'; + this.context.statusRenderer.clearLoadingIndicator(this.domElement); + listContainer.innerHTML = html; + } + else { + //debugger; + this._getListData(this.properties.listTitle).then((response) => { this._renderList(response.value); - }).catch((err) => { - Log.error('js-display-List', err); - this.context.statusRenderer.clearLoadingIndicator(this.domElement); - this.context.statusRenderer.renderError(this.domElement, err); - }); - } + }).catch((err) => { + Log.error('js-display-List', err); + this.context.statusRenderer.clearLoadingIndicator(this.domElement); + this.context.statusRenderer.renderError(this.domElement, err); + }); + } } }