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,6 +41,7 @@ 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.

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');
@@ -73,9 +73,9 @@ 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()
       .then((response) => {
 
@@ -87,7 +87,7 @@ public onInit<T>(): Promise<T> {
         });
       });
     return Promise.resolve();
-}
+  }
 
 
   private _getListTitles(): Promise<ISPLists> {
@@ -109,43 +109,36 @@ public onInit<T>(): Promise<T> {
 
   private _renderList(items: ISPList[]): void {
     let html: string = '';
-    debugger;
-
 
     //debugger;
     items.forEach((item: ISPList) => {
-    let title:string = '';
+      let title: string = '';
 
-    if (item.Title === null)
+      if (item.Title === null) {
-    {
+        title = "Missing title for item with ID= " + item.Id;
-      title= "Missing title for item with ID= " + item.Id;
       }
-    else
+      else {
-    {
+        title = item.Title;
-      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">${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)
+    if (items.length == 0) {
-  {
+      html = '<br /><p class="ms-font-m-plus">The selected list is empty</p>';
-    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 {
@@ -168,7 +161,7 @@ public onInit<T>(): Promise<T> {
     const listContainer: Element = this.domElement.querySelector('#spListContainer');
 
     // Local environment
-      debugger;
+    // 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);