SharePoint CRUD sample updated to SPFx 1.4.1

samples/sharepoint-crud/.yo-rc.json

@@ -1,8 +1,8 @@
 {
   "@microsoft/generator-sharepoint": {
+    "version": "1.4.1",
     "libraryName": "sharepoint-crud",
-    "framework": "react",
-    "version": "1.0.0",
-    "libraryId": "c51ba9f2-6f5c-412a-a5fc-76610f39be8c"
+    "libraryId": "037cc555-b7cd-4bdc-b661-0b38a09b5844",
+    "environment": "spo"
   }
 }

samples/sharepoint-crud/README.md

@@ -7,7 +7,7 @@ Sample Web Parts illustrating performing SharePoint CRUD operations in React, An
 ![Sample To do SharePoint Framework Client-Side Web Part built using Angular and ngOfficeUIFabric](./assets/preview.png)
 
 ## Used SharePoint Framework Version 
-![drop](https://img.shields.io/badge/drop-GA-green.svg)
+![drop](https://img.shields.io/badge/drop-1.4.1-green.svg)
 
 ## Applies to
 
@@ -18,12 +18,13 @@ Sample Web Parts illustrating performing SharePoint CRUD operations in React, An
 
 Solution|Author(s)
 --------|---------
-sharepoint-crud|Waldek Mastykarz (MVP, Rencore, @waldekm)
+sharepoint-crud|Waldek Mastykarz (MVP, Rencore, @waldekm), Gautam Sheth (SharePoint Consultant, RapidCircle)
 
 ## Version history
 
 Version|Date|Comments
 -------|----|--------
+1.2|March 30, 2018|Updated to SPFx 1.4.1
 1.1|March 9, 2017|Updated to SPFx GA
 1.0|September 16, 2016|Initial release
 

samples/sharepoint-crud/config/config.json

@@ -1,37 +1,51 @@
 {
-  "entries": [
-    {
-      "entry": "./lib/webparts/reactCrud/ReactCrudWebPart.js",
-      "manifest": "./src/webparts/reactCrud/ReactCrudWebPart.manifest.json",
-      "outputPath": "./dist/react-crud.bundle.js"
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "no-framework-crud-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/noFrameworkCrud/NoFrameworkCrudWebPart.js",
+          "manifest": "./src/webparts/noFrameworkCrud/NoFrameworkCrudWebPart.manifest.json"
+        }
+      ]
     },
-    {
-      "entry": "./lib/webparts/noFrameworkCrud/NoFrameworkCrudWebPart.js",
-      "manifest": "./src/webparts/noFrameworkCrud/NoFrameworkCrudWebPart.manifest.json",
-      "outputPath": "./dist/no-framework-crud.bundle.js"
+    "sp-pn-p-js-crud-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/spPnPJsCrud/SpPnPJsCrudWebPart.js",
+          "manifest": "./src/webparts/spPnPJsCrud/SpPnPJsCrudWebPart.manifest.json"
+        }
+      ]
     },
-    {
-      "entry": "./lib/webparts/angularCrud/AngularCrudWebPart.js",
-      "manifest": "./src/webparts/angularCrud/AngularCrudWebPart.manifest.json",
-      "outputPath": "./dist/angular-crud.bundle.js"
+    "react-crud-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/reactCrud/ReactCrudWebPart.js",
+          "manifest": "./src/webparts/reactCrud/ReactCrudWebPart.manifest.json"
+        }
+      ]
     },
-    {
-      "entry": "./lib/webparts/spPnPJsCrud/SpPnPJsCrudWebPart.js",
-      "manifest": "./src/webparts/spPnPJsCrud/SpPnPJsCrudWebPart.manifest.json",
-      "outputPath": "./dist/sp-pn-p-js-crud.bundle.js"
+    "angular-crud-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/angularCrud/AngularCrudWebPart.js",
+          "manifest": "./src/webparts/angularCrud/AngularCrudWebPart.manifest.json"
+        }
+      ]
     }
-  ],
+  },
   "externals": {
     "angular": {
-      "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js",
+      "path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js",
       "globalName": "angular"
     },
-    "ng-office-ui-fabric": "https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.12.3/ngOfficeUiFabric.js"
+    "ng-office-ui-fabric": "https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.16.0/ngOfficeUiFabric.min.js"
   },
   "localizedResources": {
-    "reactCrudStrings": "webparts/reactCrud/loc/{locale}.js",
-    "noFrameworkCrudStrings": "webparts/noFrameworkCrud/loc/{locale}.js",
-    "angularCrudStrings": "webparts/angularCrud/loc/{locale}.js",
-    "spPnPJsCrudStrings": "webparts/spPnPJsCrud/loc/{locale}.js"
+    "NoFrameworkCrudWebPartStrings": "lib/webparts/noFrameworkCrud/loc/{locale}.js",
+    "SpPnPJsCrudWebPartStrings": "lib/webparts/spPnPJsCrud/loc/{locale}.js",
+    "ReactCrudWebPartStrings": "lib/webparts/reactCrud/loc/{locale}.js",
+    "AngularCrudWebPartStrings": "lib/webparts/angularCrud/loc/{locale}.js"
   }
 }

samples/sharepoint-crud/gulpfile.js

@@ -2,5 +2,6 @@
 
 const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
 build.initialize(gulp);

samples/sharepoint-crud/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sharepoint-crud",
-  "version": "1.1.0",
+  "version": "1.4.1",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
@@ -9,32 +9,33 @@
     "name": "Waldek Mastykarz",
     "url": "https://rencore.com"
   },
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test"
+  },
   "dependencies": {
-    "@microsoft/sp-client-base": "~1.0.0",
-    "@microsoft/sp-core-library": "~1.0.0",
-    "@microsoft/sp-webpart-base": "~1.0.0",
-    "@types/react": "0.14.46",
-    "@types/react-addons-shallow-compare": "0.14.17",
-    "@types/react-addons-test-utils": "0.14.15",
-    "@types/react-addons-update": "0.14.14",
-    "@types/react-dom": "0.14.18",
+    "@microsoft/sp-core-library": "~1.4.1",
+    "@microsoft/sp-lodash-subset": "~1.4.1",
+    "@microsoft/sp-office-ui-fabric-core": "~1.4.1",
+    "@microsoft/sp-webpart-base": "~1.4.1",
+    "@pnp/common": "^1.0.3",
+    "@pnp/logging": "^1.0.3",
+    "@pnp/odata": "^1.0.3",
+    "@pnp/sp": "^1.0.3",
+    "@types/react": "15.6.6",
+    "@types/react-dom": "15.5.6",
     "@types/webpack-env": ">=1.12.1 <1.14.0",
-    "react": "15.4.2",
-    "react-dom": "15.4.2",
-    "sp-pnp-js": "^2.0.1"
+    "react": "15.6.2",
+    "react-dom": "15.6.2"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~1.0.0",
-    "@microsoft/sp-module-interfaces": "~1.0.0",
-    "@microsoft/sp-webpart-workbench": "~1.0.0",
-    "@types/angular": "^1.6.7",
+    "@microsoft/sp-build-web": "~1.4.1",
+    "@microsoft/sp-module-interfaces": "~1.4.1",
+    "@microsoft/sp-webpart-workbench": "~1.4.1",
+    "gulp": "~3.9.1",
     "@types/chai": ">=3.4.34 <3.6.0",
     "@types/mocha": ">=2.2.33 <2.6.0",
-    "gulp": "~3.9.1"
-  },
-  "scripts": {
-    "build": "gulp bundle",
-    "clean": "gulp clean",
-    "test": "gulp test"
+    "ajv": "~5.2.2"
   }
 }

samples/sharepoint-crud/src/webparts/angularCrud/AngularCrudWebPart.manifest.json

@@ -1,20 +1,31 @@
 {
-  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
-
-  "id": "d8e75c68-47f2-4c34-8fee-7ac83818ae72",
+  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "cceebf19-128e-4ffd-bb97-9989bf7c04d4",
   "alias": "AngularCrudWebPart",
   "componentType": "WebPart",
-  "version": "0.0.1",
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
   "manifestVersion": 2,
-
-  "preconfiguredEntries": [{
-    "groupId": "d8e75c68-47f2-4c34-8fee-7ac83818ae72",
-    "group": { "default": "Under Development" },
-    "title": { "default": "Angular CRUD" },
-    "description": { "default": "Sample implementation of SharePoint CRUD operations in Angular" },
-    "officeFabricIconFontName": "Page",
-    "properties": {
-      "listName": ""
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+  "preconfiguredEntries": [
+    {
+      "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+      "group": {
+        "default": "Under Development"
+      },
+      "title": {
+        "default": "Angular CRUD"
+      },
+      "description": {
+        "default": "Sample implementation of SharePoint CRUD operations in Angular"
+      },
+      "officeFabricIconFontName": "Page",
+      "properties": {
+        "listName": ""
+      }
     }
-  }]
-}
+  ]
+}

samples/sharepoint-crud/src/webparts/angularCrud/AngularCrud.module.scss → samples/sharepoint-crud/src/webparts/angularCrud/AngularCrudWebPart.module.scss

@@ -1,3 +1,5 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
 .angularCrud {
   .container {
     max-width: 700px;
@@ -60,4 +62,4 @@
       }
     }
   }
-}
+}

samples/sharepoint-crud/src/webparts/angularCrud/AngularCrudWebPart.ts

@@ -5,15 +5,18 @@ import {
   PropertyPaneTextField
 } from '@microsoft/sp-webpart-base';
 
-import styles from './AngularCrud.module.scss';
-import * as strings from 'angularCrudStrings';
-import { IAngularCrudWebPartProps } from './IAngularCrudWebPartProps';
+import styles from './AngularCrudWebPart.module.scss';
+import * as strings from 'AngularCrudWebPartStrings';
 
 import * as angular from 'angular';
 import './app/app-module';
 
+export interface IAngularCrudWebPartProps {
+  listName: string;
+}
+
 export default class AngularCrudWebPart extends BaseClientSideWebPart<IAngularCrudWebPartProps> {
-private $injector: angular.auto.IInjectorService;
+  private $injector: angular.auto.IInjectorService;
 
   public render(): void {
     if (this.renderedOnce === false) {

samples/sharepoint-crud/src/webparts/angularCrud/app/DataService.ts

@@ -24,7 +24,7 @@ export default class DataService implements IDataService {
 
     let listItemEntityTypeName: string = undefined;
     this.getListItemEntityTypeName(webUrl, listName)
-      .then((typeName: string): angular.IPromise<angular.IHttpPromiseCallbackArg<string>> => {
+      .then((typeName: string): angular.IPromise<string> => {
         listItemEntityTypeName = typeName;
         return this.getRequestDigest(webUrl);
       })
@@ -122,7 +122,7 @@ export default class DataService implements IDataService {
 
     let listItemEntityTypeName: string = undefined;
     this.getListItemEntityTypeName(webUrl, listName)
-      .then((typeName: string): angular.IPromise<angular.IHttpPromiseCallbackArg<string>> => {
+      .then((typeName: string): angular.IPromise<string> => {
         listItemEntityTypeName = typeName;
         return this.getRequestDigest(webUrl);
       })

samples/sharepoint-crud/src/webparts/angularCrud/app/HomeController.ts

@@ -79,9 +79,7 @@ export default class HomeController {
     this.dataService.readItems(this.webUrl, this.listName)
       .then((items: IListItem[]): void => {
         this.status = `Successfully loaded ${items.length} items`;
-        for (let i: number = 0; i < items.length; i++) {
-          this.items.push(items[i]);
-        }
+        this.items = items;
       }, (error: any): void => {
         this.status = 'Loading all items failed with error: ' + error;
       });

samples/sharepoint-crud/src/webparts/angularCrud/loc/en-us.js

@@ -1,4 +1,4 @@
-define([], function() {
+define([], function () {
   return {
     "PropertyPaneDescription": "Configure settings",
     "DataGroupName": "Data",

samples/sharepoint-crud/src/webparts/angularCrud/loc/mystrings.d.ts

@@ -1,10 +1,10 @@
-declare interface IAngularCrudStrings {
+declare interface IAngularCrudWebPartStrings {
   PropertyPaneDescription: string;
   DataGroupName: string;
   ListNameFieldLabel: string;
 }
 
-declare module 'angularCrudStrings' {
-  const strings: IAngularCrudStrings;
+declare module 'AngularCrudWebPartStrings' {
+  const strings: IAngularCrudWebPartStrings;
   export = strings;
 }

samples/sharepoint-crud/src/webparts/noFrameworkCrud/NoFrameworkCrudWebPart.manifest.json

@@ -1,20 +1,31 @@
 {
-  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
-
-  "id": "eef4a41c-7fd3-4cf4-85df-e1b8e6aaef6e",
+  "$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "dd6cd5e1-46e0-46cc-a0c9-be9e9adedcad",
   "alias": "NoFrameworkCrudWebPart",
   "componentType": "WebPart",
-  "version": "0.0.1",
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
   "manifestVersion": 2,
-
-  "preconfiguredEntries": [{
-    "groupId": "eef4a41c-7fd3-4cf4-85df-e1b8e6aaef6e",
-    "group": { "default": "Under Development" },
-    "title": { "default": "No framework CRUD" },
-    "description": { "default": "Sample implementation of SharePoint CRUD operations without using any frameworks" },
-    "officeFabricIconFontName": "Page",
-    "properties": {
-      "listName": ""
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+  "preconfiguredEntries": [
+    {
+      "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+      "group": {
+        "default": "Under Development"
+      },
+      "title": {
+        "default": "No framework CRUD"
+      },
+      "description": {
+        "default": "Sample implementation of SharePoint CRUD operations without using any frameworks"
+      },
+      "officeFabricIconFontName": "Page",
+      "properties": {
+        "listName": ""
+      }
     }
-  }]
-}
+  ]
+}

samples/sharepoint-crud/src/webparts/noFrameworkCrud/NoFrameworkCrud.module.scss → samples/sharepoint-crud/src/webparts/noFrameworkCrud/NoFrameworkCrudWebPart.module.scss

@@ -1,3 +1,5 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
 .noFrameworkCrud {
   .container {
     max-width: 700px;
@@ -60,4 +62,4 @@
       }
     }
   }
-}
+}