SharePoint CRUD sample updated to SPFx 1.4.1 (#464)
* SharePoint CRUD sample updated to SPFx 1.4.1 SharePoint CRUD sample updated to SPFx 1.4.1 Updated the PnP JS to version 3.0.6 Updated Angular to version 1.6.5 Updated ngOfficeUiFabric to 0.16.0 Updated to the latest React 15.6.2 Minor code improvements like using map instead of for loop. * Minor bug fix for React Sample * minor changes * code formatting * Updated code to use the new pnpjs package
This commit is contained in:
Gautam Sheth
Vesa Juvonen
parent
f9e039511d
commit
5b0a88f331
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ Sample Web Parts illustrating performing SharePoint CRUD operations in React, An
|
|||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
"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",
|
||||
"@types/webpack-env": ">=1.12.1 <1.14.0",
|
||||
"react": "15.4.2",
|
||||
"react-dom": "15.4.2",
|
||||
"sp-pnp-js": "^2.0.1"
|
||||
},
|
||||
"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",
|
||||
"@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"
|
||||
},
|
||||
"dependencies": {
|
||||
"@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.6.2",
|
||||
"react-dom": "15.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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",
|
||||
"ajv": "~5.2.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": ""
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
|
||||
.angularCrud {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
|
|
@ -60,4 +62,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
export interface IAngularCrudWebPartProps {
|
||||
listName: string;
|
||||
}
|
||||
|
|
@ -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);
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define([], function() {
|
||||
define([], function () {
|
||||
return {
|
||||
"PropertyPaneDescription": "Configure settings",
|
||||
"DataGroupName": "Data",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
/// <reference types="mocha" />
|
||||
|
||||
import { assert } from 'chai';
|
||||
|
||||
describe('AngularCrudWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export interface INoFrameworkCrudWebPartProps {
|
||||
listName: string;
|
||||
}
|
||||
|
|
@ -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": ""
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
|
||||
.noFrameworkCrud {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
|
|
@ -60,4 +62,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,12 +5,15 @@ import {
|
|||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
|
||||
|
||||
import styles from './NoFrameworkCrud.module.scss';
|
||||
import * as strings from 'noFrameworkCrudStrings';
|
||||
import { INoFrameworkCrudWebPartProps } from './INoFrameworkCrudWebPartProps';
|
||||
import { IListItem } from './IListItem';
|
||||
|
||||
import styles from './NoFrameworkCrudWebPart.module.scss';
|
||||
import * as strings from 'NoFrameworkCrudWebPartStrings';
|
||||
|
||||
export interface INoFrameworkCrudWebPartProps {
|
||||
listName: string;
|
||||
}
|
||||
|
||||
export default class NoFrameworkCrudWebPart extends BaseClientSideWebPart<INoFrameworkCrudWebPartProps> {
|
||||
private listItemEntityTypeName: string = undefined;
|
||||
|
||||
|
|
@ -370,11 +373,6 @@ export default class NoFrameworkCrudWebPart extends BaseClientSideWebPart<INoFra
|
|||
}
|
||||
|
||||
private updateItemsHtml(items: IListItem[]): void {
|
||||
const itemsHtml: string[] = [];
|
||||
for (let i: number = 0; i < items.length; i++) {
|
||||
itemsHtml.push(`<li>${items[i].Title} (${items[i].Id})</li>`);
|
||||
}
|
||||
|
||||
this.domElement.querySelector('.items').innerHTML = itemsHtml.join('');
|
||||
this.domElement.querySelector('.items').innerHTML = items.map(item => `<li>${item.Title} (${item.Id})</li>`).join("");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define([], function() {
|
||||
define([], function () {
|
||||
return {
|
||||
"PropertyPaneDescription": "Configure settings",
|
||||
"DataGroupName": "Data",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
declare interface INoFrameworkCrudStrings {
|
||||
declare interface INoFrameworkCrudWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
DataGroupName: string;
|
||||
ListNameFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'noFrameworkCrudStrings' {
|
||||
const strings: INoFrameworkCrudStrings;
|
||||
declare module 'NoFrameworkCrudWebPartStrings' {
|
||||
const strings: INoFrameworkCrudWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
/// <reference types="mocha" />
|
||||
|
||||
import { assert } from 'chai';
|
||||
|
||||
describe('NoFrameworkCrudWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export interface IReactCrudWebPartProps {
|
||||
listName: string;
|
||||
}
|
||||
|
|
@ -1,20 +1,31 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"id": "04139977-3e2e-456e-bf91-ee4e54bee353",
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "b1900cc3-964d-40be-95bc-633843494258",
|
||||
"alias": "ReactCrudWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "04139977-3e2e-456e-bf91-ee4e54bee353",
|
||||
"group": { "default": "Under Development" },
|
||||
"title": { "default": "React CRUD" },
|
||||
"description": { "default": "Sample implementation of SharePoint CRUD operations in React" },
|
||||
"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": "React CRUD"
|
||||
},
|
||||
"description": {
|
||||
"default": "Sample implementation of SharePoint CRUD operations in React"
|
||||
},
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"listName": ""
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -7,10 +7,13 @@ import {
|
|||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
|
||||
import * as strings from 'reactCrudStrings';
|
||||
import * as strings from 'ReactCrudWebPartStrings';
|
||||
import ReactCrud from './components/ReactCrud';
|
||||
import { IReactCrudProps } from './components/IReactCrudProps';
|
||||
import { IReactCrudWebPartProps } from './IReactCrudWebPartProps';
|
||||
|
||||
export interface IReactCrudWebPartProps {
|
||||
listName: string;
|
||||
}
|
||||
|
||||
export default class ReactCrudWebPart extends BaseClientSideWebPart<IReactCrudWebPartProps> {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
|
||||
.reactCrud {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export default class ReactCrud extends React.Component<IReactCrudProps, IReactCr
|
|||
<a href="#" className={`${styles.button} ${disabled}`} onClick={() => this.createItem()}>
|
||||
<span className={styles.label}>Create item</span>
|
||||
</a>
|
||||
<a href="#" className={`${styles.button} ${disabled}`} onClick={() => this.createItem()}>
|
||||
<a href="#" className={`${styles.button} ${disabled}`} onClick={() => this.readItem()}>
|
||||
<span className={styles.label}>Read item</span>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define([], function() {
|
||||
define([], function () {
|
||||
return {
|
||||
"PropertyPaneDescription": "Configure settings",
|
||||
"DataGroupName": "Data",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
declare interface IReactCrudStrings {
|
||||
declare interface IReactCrudWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
DataGroupName: string;
|
||||
ListNameFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'reactCrudStrings' {
|
||||
const strings: IReactCrudStrings;
|
||||
declare module 'ReactCrudWebPartStrings' {
|
||||
const strings: IReactCrudWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
/// <reference types="mocha" />
|
||||
|
||||
import { assert } from 'chai';
|
||||
|
||||
describe('ReactCrudWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export interface ISpPnPJsCrudWebPartProps {
|
||||
listName: string;
|
||||
}
|
||||
|
|
@ -1,20 +1,31 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"id": "2697acc1-b392-4cbb-83f1-15118833b2cd",
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "b3aaae1b-48c3-4803-84f7-d6de9452f434",
|
||||
"alias": "SpPnPJsCrudWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "2697acc1-b392-4cbb-83f1-15118833b2cd",
|
||||
"group": { "default": "Under Development" },
|
||||
"title": { "default": "SP PnP JS CRUD" },
|
||||
"description": { "default": "Sample implementation of SharePoint CRUD operations using the SP PnP JS library" },
|
||||
"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": "SP PnP JS CRUD"
|
||||
},
|
||||
"description": {
|
||||
"default": "Sample implementation of SharePoint CRUD operations using the SP PnP JS library"
|
||||
},
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"listName": ""
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
|
||||
.spPnPJsCrud {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
|
|
@ -60,4 +62,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,20 +5,26 @@ import {
|
|||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
|
||||
import styles from './SpPnPJsCrud.module.scss';
|
||||
import * as strings from 'spPnPJsCrudStrings';
|
||||
import { ISpPnPJsCrudWebPartProps } from './ISpPnPJsCrudWebPartProps';
|
||||
import styles from './SpPnPJsCrudWebPart.module.scss';
|
||||
import * as strings from 'SpPnPJsCrudWebPartStrings';
|
||||
|
||||
import { IListItem } from './IListItem';
|
||||
|
||||
import * as pnp from 'sp-pnp-js';
|
||||
import { Item, ItemAddResult, ItemUpdateResult } from '../../../node_modules/sp-pnp-js/lib/sharepoint/items';
|
||||
import { sp, Item, ItemAddResult, ItemUpdateResult } from '@pnp/sp';
|
||||
|
||||
export interface ISpPnPJsCrudWebPartProps {
|
||||
listName: string;
|
||||
}
|
||||
|
||||
export default class SpPnPJsCrudWebPart extends BaseClientSideWebPart<ISpPnPJsCrudWebPartProps> {
|
||||
|
||||
protected onInit(): Promise<void> {
|
||||
return new Promise<void>((resolve: () => void, reject: (error?: any) => void): void => {
|
||||
pnp.setup({
|
||||
headers: {
|
||||
'Accept': 'application/json;odata=nometadata'
|
||||
sp.setup({
|
||||
sp: {
|
||||
headers: {
|
||||
"Accept": "application/json; odata=nometadata"
|
||||
}
|
||||
}
|
||||
});
|
||||
resolve();
|
||||
|
|
@ -136,7 +142,7 @@ export default class SpPnPJsCrudWebPart extends BaseClientSideWebPart<ISpPnPJsCr
|
|||
|
||||
private createItem(): void {
|
||||
this.updateStatus('Creating item...');
|
||||
pnp.sp.web.lists.getByTitle(this.properties.listName).items.add({
|
||||
sp.web.lists.getByTitle(this.properties.listName).items.add({
|
||||
'Title': `Item ${new Date()}`
|
||||
}).then((result: ItemAddResult): void => {
|
||||
const item: IListItem = result.data as IListItem;
|
||||
|
|
@ -155,7 +161,7 @@ export default class SpPnPJsCrudWebPart extends BaseClientSideWebPart<ISpPnPJsCr
|
|||
}
|
||||
|
||||
this.updateStatus(`Loading information about item ID: ${itemId}...`);
|
||||
return pnp.sp.web.lists.getByTitle(this.properties.listName)
|
||||
return sp.web.lists.getByTitle(this.properties.listName)
|
||||
.items.getById(itemId).select('Title', 'Id').get();
|
||||
})
|
||||
.then((item: IListItem): void => {
|
||||
|
|
@ -167,7 +173,7 @@ export default class SpPnPJsCrudWebPart extends BaseClientSideWebPart<ISpPnPJsCr
|
|||
|
||||
private getLatestItemId(): Promise<number> {
|
||||
return new Promise<number>((resolve: (itemId: number) => void, reject: (error: any) => void): void => {
|
||||
pnp.sp.web.lists.getByTitle(this.properties.listName)
|
||||
sp.web.lists.getByTitle(this.properties.listName)
|
||||
.items.orderBy('Id', false).top(1).select('Id').get()
|
||||
.then((items: { Id: number }[]): void => {
|
||||
if (items.length === 0) {
|
||||
|
|
@ -184,7 +190,7 @@ export default class SpPnPJsCrudWebPart extends BaseClientSideWebPart<ISpPnPJsCr
|
|||
|
||||
private readItems(): void {
|
||||
this.updateStatus('Loading all items...');
|
||||
pnp.sp.web.lists.getByTitle(this.properties.listName)
|
||||
sp.web.lists.getByTitle(this.properties.listName)
|
||||
.items.select('Title', 'Id').get()
|
||||
.then((items: IListItem[]): void => {
|
||||
this.updateStatus(`Successfully loaded ${items.length} items`, items);
|
||||
|
|
@ -206,7 +212,7 @@ export default class SpPnPJsCrudWebPart extends BaseClientSideWebPart<ISpPnPJsCr
|
|||
|
||||
latestItemId = itemId;
|
||||
this.updateStatus(`Loading information about item ID: ${itemId}...`);
|
||||
return pnp.sp.web.lists.getByTitle(this.properties.listName)
|
||||
return sp.web.lists.getByTitle(this.properties.listName)
|
||||
.items.getById(itemId).get(undefined, {
|
||||
headers: {
|
||||
'Accept': 'application/json;odata=minimalmetadata'
|
||||
|
|
@ -218,7 +224,7 @@ export default class SpPnPJsCrudWebPart extends BaseClientSideWebPart<ISpPnPJsCr
|
|||
return Promise.resolve((item as any) as IListItem);
|
||||
})
|
||||
.then((item: IListItem): Promise<ItemUpdateResult> => {
|
||||
return pnp.sp.web.lists.getByTitle(this.properties.listName)
|
||||
return sp.web.lists.getByTitle(this.properties.listName)
|
||||
.items.getById(item.Id).update({
|
||||
'Title': `Item ${new Date()}`
|
||||
}, etag);
|
||||
|
|
@ -246,7 +252,7 @@ export default class SpPnPJsCrudWebPart extends BaseClientSideWebPart<ISpPnPJsCr
|
|||
|
||||
latestItemId = itemId;
|
||||
this.updateStatus(`Loading information about item ID: ${latestItemId}...`);
|
||||
return pnp.sp.web.lists.getByTitle(this.properties.listName)
|
||||
return sp.web.lists.getByTitle(this.properties.listName)
|
||||
.items.getById(latestItemId).select('Id').get(undefined, {
|
||||
headers: {
|
||||
'Accept': 'application/json;odata=minimalmetadata'
|
||||
|
|
@ -259,7 +265,7 @@ export default class SpPnPJsCrudWebPart extends BaseClientSideWebPart<ISpPnPJsCr
|
|||
})
|
||||
.then((item: IListItem): Promise<void> => {
|
||||
this.updateStatus(`Deleting item with ID: ${latestItemId}...`);
|
||||
return pnp.sp.web.lists.getByTitle(this.properties.listName)
|
||||
return sp.web.lists.getByTitle(this.properties.listName)
|
||||
.items.getById(item.Id).delete(etag);
|
||||
})
|
||||
.then((): void => {
|
||||
|
|
@ -275,11 +281,6 @@ export default class SpPnPJsCrudWebPart extends BaseClientSideWebPart<ISpPnPJsCr
|
|||
}
|
||||
|
||||
private updateItemsHtml(items: IListItem[]): void {
|
||||
const itemsHtml: string[] = [];
|
||||
for (let i: number = 0; i < items.length; i++) {
|
||||
itemsHtml.push(`<li>${items[i].Title} (${items[i].Id})</li>`);
|
||||
}
|
||||
|
||||
this.domElement.querySelector('.items').innerHTML = itemsHtml.join('');
|
||||
this.domElement.querySelector('.items').innerHTML = items.map(item => `<li>${item.Title} (${item.Id})</li>`).join("");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define([], function() {
|
||||
define([], function () {
|
||||
return {
|
||||
"PropertyPaneDescription": "Configure settings",
|
||||
"DataGroupName": "Data",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
declare interface ISpPnPJsCrudStrings {
|
||||
declare interface ISpPnPJsCrudWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
DataGroupName: string;
|
||||
ListNameFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'spPnPJsCrudStrings' {
|
||||
const strings: ISpPnPJsCrudStrings;
|
||||
declare module 'SpPnPJsCrudWebPartStrings' {
|
||||
const strings: ISpPnPJsCrudWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
/// <reference types="mocha" />
|
||||
|
||||
import { assert } from 'chai';
|
||||
|
||||
describe('SpPnPJsCrudWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -6,10 +6,20 @@
|
|||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"es6-collections",
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
// Type definitions for Microsoft ODSP projects
|
||||
// Project: ODSP
|
||||
|
||||
/* Global definition for UNIT_TEST builds
|
||||
Code that is wrapped inside an if(UNIT_TEST) {...}
|
||||
block will not be included in the final bundle when the
|
||||
--ship flag is specified */
|
||||
declare const UNIT_TEST: boolean;
|
||||
|
|
@ -1 +0,0 @@
|
|||
/// <reference path="@ms/odsp.d.ts" />
|
||||
Loading…
Reference in New Issue