honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Small adjustments on the code and improvements on the readme.

This commit is contained in:
Vesa Juvonen 2016-11-04 10:43:11 +02:00
parent e36c8c344b
commit eae60906b9
3 changed files with 75 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
samples/js-display-list/.vscode/settings.json vendored
View File

@ -18,4 +18,6 @@
"lib": true,
"temp": true
}
,
"typescript.check.workspaceVersion": false
}

11
samples/js-display-list/README.md
View File

@ -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.

139
samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts
View File

@ -38,7 +38,7 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
}
public render(): void {
debugger;
// debugger;
this.context.statusRenderer.clearError(this.domElement);
this.context.statusRenderer.displayLoadingIndicator(this.domElement, strings.Loading);
Log.verbose('js-display-List', 'Invoking render');
@ -62,8 +62,8 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
groupFields: [
PropertyPaneDropdown('listTitle', {
label: 'List Title',
options: this._dropdownOptions
label: 'List Title',
options: this._dropdownOptions
})
]
}
@ -73,84 +73,77 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
};
}
private _dropdownOptions: IPropertyPaneDropdownOption[] = [];
private _dropdownOptions: IPropertyPaneDropdownOption[] = [];
public onInit<T>(): Promise<T> {
this._getListTitles()
.then((response) => {
public onInit<T>(): Promise<T> {
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<ISPLists> {
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<ISPLists> {
private _getListData(listName: string): Promise<ISPLists> {
//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 += `
<div class="${styles.row} ms-Grid-row " }>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">${title}</div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">${created.substring(0, created.length - 1).replace('T', ' ')}</div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">${item['Author'].Title}</div>
</div>`;
});
if (items.length == 0) {
html = '<br /><p class="ms-font-m-plus">The selected list is empty</p>';
if (item.Title === null)
{
title= "Missing title for item with ID= " + item.Id;
}
else
{
title= item.Title;
}
var created = item["Created"];
html += `
<div class="${styles.row} ms-Grid-row " }>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">${title}</div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">${created.substring(0,created.length-1).replace('T',' ')}</div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">${item['Author'].Title}</div>
</div>`;
});
if (items.length == 0)
{
html ='<br /><p class="ms-font-m-plus">The selected list is empty</p>';
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 = `
<div className='wrapper'>
<p class="ms-font-l ms-bgColor-themeDark ms-fontColor-white"><span class="ms-fontWeight-semibold">${this.properties.listTitle}</span> List</p>
<div class="ms-Grid ${styles.jsDisplayList}" }>
@ -165,26 +158,26 @@ public onInit<T>(): Promise<T> {
</div>
</div>`;
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 = '<p> Local test environment [No connection to SharePoint]</p>';
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 = '<p> Local test environment [No connection to SharePoint]</p>';
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);
});
}
}
}