Small adjustments on the code and improvements on the readme.

samples/js-display-list/.vscode/settings.json

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

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.

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

@@ -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',
+                  label: 'List Title',
-                options: this._dropdownOptions
+                  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> {
+  public onInit<T>(): Promise<T> {
-  this._getListTitles()
+    this._getListTitles()
-    .then((response) => {
+      .then((response) => {
 
-      this._dropdownOptions = response.value.map((list: ISPList) => {
+        this._dropdownOptions = response.value.map((list: ISPList) => {
-        return {
+          return {
-          key: list.Title,
+            key: list.Title,
-          text: 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`)
+    return this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`)
-    .then((response: Response) => {
+      .then((response: Response) => {
-    return response.json();
+        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) => {
+      .then((response: Response) => {
-    return response.json();
+        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;
+      if (item.Title === null) {
-  items.forEach((item: ISPList) => {
+        title = "Missing title for item with ID= " + item.Id;
-    let title:string = '';
+      }
+      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
+    const listContainer: Element = this.domElement.querySelector('#spListContainer');
-    {
+    this.context.statusRenderer.clearLoadingIndicator(this.domElement);
-      title= item.Title;
+    listContainer.innerHTML = html;
-    }
-
-
-
-    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;
-}
 
 
-   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;
+    // debugger;
-      if (this.context.environment.type === EnvironmentType.Local) {
+    if (this.context.environment.type === EnvironmentType.Local) {
-        let html: string = '<p> Local test environment [No connection to SharePoint]</p>';
+      let html: string = '<p> Local test environment [No connection to SharePoint]</p>';
-        this.context.statusRenderer.clearLoadingIndicator(this.domElement);
+      this.context.statusRenderer.clearLoadingIndicator(this.domElement);
-        listContainer.innerHTML = html;
+      listContainer.innerHTML = html;
-      }
+    }
-      else {
+    else {
-        //debugger;
+      //debugger;
-        this._getListData(this.properties.listTitle).then((response) => {
+      this._getListData(this.properties.listTitle).then((response) => {
         this._renderList(response.value);
 
-        }).catch((err) => {
+      }).catch((err) => {
-          Log.error('js-display-List', err);
+        Log.error('js-display-List', err);
-            this.context.statusRenderer.clearLoadingIndicator(this.domElement);
+        this.context.statusRenderer.clearLoadingIndicator(this.domElement);
-            this.context.statusRenderer.renderError(this.domElement, err);
+        this.context.statusRenderer.renderError(this.domElement, err);
-          });
+      });
-      }
+    }
   }
 
 }