Updated knockout pnp sample to SPFx v1.7 (#681)
This commit is contained in:
Gautam Sheth
Vesa Juvonen
parent
bee8dc5c5a
commit
e9912789d5
|
|
@ -1 +0,0 @@
|
|||
* text=auto
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
# Folders
|
||||
.vscode
|
||||
coverage
|
||||
node_modules
|
||||
sharepoint
|
||||
src
|
||||
temp
|
||||
|
||||
# Files
|
||||
*.csproj
|
||||
.git*
|
||||
.yo-rc.json
|
||||
gulpfile.js
|
||||
tsconfig.json
|
||||
|
|
@ -1,3 +1,13 @@
|
|||
// Place your settings in this file to overwrite default and user settings.
|
||||
{
|
||||
"vsicons.presets.angular": false
|
||||
// Configure glob patterns for excluding files and folders in the file explorer.
|
||||
"files.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/bower_components": true,
|
||||
"**/coverage": true,
|
||||
"**/lib-amd": true,
|
||||
"src/**/*.scss.ts": true
|
||||
},
|
||||
"typescript.tsdk": ".\\node_modules\\typescript\\lib"
|
||||
}
|
||||
|
|
@ -1,8 +1,12 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"libraryName": "spfx-sp-pnp-js-example",
|
||||
"framework": "knockout",
|
||||
"version": "1.0.0",
|
||||
"libraryId": "ef1fde11-2cb3-42fc-97f6-5f5c8a7ac63d"
|
||||
"isCreatingSolution": true,
|
||||
"environment": "spo",
|
||||
"version": "1.7.0",
|
||||
"libraryName": "spfx-pnpjs-example",
|
||||
"libraryId": "9050d578-2a30-418b-8489-f1a61f8aa60f",
|
||||
"packageManager": "npm",
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
# Sample showing the use of sp-pnp-js with Knockoutjs
|
||||
# Sample showing the use of @pnp/sp library with Knockoutjs
|
||||
|
||||
## Summary
|
||||
|
||||
This webpart demonstrates how to integrate the sp-pnp-js library into the SharePoint Framework as well as including mock data and simple list I/O.
|
||||
This webpart demonstrates how to integrate the @pnp/sp library into the SharePoint Framework as well as including mock data and simple list I/O.
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -20,11 +20,14 @@ Solution|Author(s)
|
|||
--------|---------
|
||||
spfx-sp-pnp-js-example|Patrick Rodgers ([@mediocrebowler](https://twitter.com/mediocrebowler))
|
||||
|
||||
Upgrade to v1.7.0|Gautam Sheth ([@gautamdsheth](https://twitter.com/gautamdsheth))
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
0.0.1|February 28, 2017|Initial release
|
||||
1.0.0| November 14, 2018| Version Upgrade
|
||||
|
||||
## Disclaimer
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
|
@ -42,6 +45,6 @@ Version|Date|Comments
|
|||
|
||||
## Features
|
||||
|
||||
Demonstrates integration of sp-pnp-js with the SharePoint Framework GA release. Also shows the use of mock data in the local workbench.
|
||||
Demonstrates integration of @pnp/sp js with the SharePoint Framework GA release. Also shows the use of mock data in the local workbench.
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/knockout-sp-pnp-js" />
|
||||
|
|
@ -1,15 +1,53 @@
|
|||
{
|
||||
"entries": [
|
||||
{
|
||||
"entry": "./lib/webparts/spPnPjsExample/SpPnPjsExampleWebPart.js",
|
||||
"manifest": "./src/webparts/spPnPjsExample/SpPnPjsExampleWebPart.manifest.json",
|
||||
"outputPath": "./dist/sp-pn-pjs-example.bundle.js"
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"pn-pjs-example-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/pnPjsExample/PnPjsExampleWebPart.js",
|
||||
"manifest": "./src/webparts/pnPjsExample/PnPjsExampleWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
},
|
||||
"externals": {
|
||||
"sp-pnp-js": "https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/2.0.1/pnp.min.js"
|
||||
"tslib": {
|
||||
"path": "https://cdnjs.cloudflare.com/ajax/libs/tslib/1.9.3/tslib.min.js",
|
||||
"globalName": "tslib"
|
||||
},
|
||||
"@pnp/common": {
|
||||
"path": "https://cdnjs.cloudflare.com/ajax/libs/pnp-common/1.2.5/common.es5.umd.bundle.min.js",
|
||||
"globalName": "pnp.common"
|
||||
},
|
||||
"@pnp/logging": {
|
||||
"path": "https://cdnjs.cloudflare.com/ajax/libs/pnp-logging/1.2.5/logging.es5.umd.min.js",
|
||||
"globalName": "pnp.logging",
|
||||
"globalDependencies": [
|
||||
"tslib"
|
||||
]
|
||||
},
|
||||
"@pnp/odata": {
|
||||
"path": "https://cdnjs.cloudflare.com/ajax/libs/pnp-odata/1.2.5/odata.es5.umd.min.js",
|
||||
"globalName": "pnp.odata",
|
||||
"globalDependencies": [
|
||||
"@pnp/common",
|
||||
"@pnp/logging",
|
||||
"tslib"
|
||||
]
|
||||
},
|
||||
"@pnp/sp": {
|
||||
"path": "https://cdnjs.cloudflare.com/ajax/libs/pnp-sp/1.2.5/sp.es5.umd.min.js",
|
||||
"globalName": "pnp.sp",
|
||||
"globalDependencies": [
|
||||
"@pnp/logging",
|
||||
"@pnp/common",
|
||||
"@pnp/odata",
|
||||
"tslib"
|
||||
]
|
||||
}
|
||||
},
|
||||
"localizedResources": {
|
||||
"spPnPjsExampleStrings": "webparts/spPnPjsExample/loc/{locale}.js"
|
||||
"PnPjsExampleWebPartStrings": "lib/webparts/pnPjsExample/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "spfx-sp-pnp-js-example",
|
||||
"container": "spfx-pnpjs-example",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -1,10 +1,13 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "spfx-sp-pnp-js-example-client-side-solution",
|
||||
"id": "ef1fde11-2cb3-42fc-97f6-5f5c8a7ac63d",
|
||||
"version": "1.0.0.0"
|
||||
"name": "spfx-pnpjs-example-client-side-solution",
|
||||
"id": "9050d578-2a30-418b-8489-f1a61f8aa60f",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": false
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/spfx-sp-pnp-js-example.sppkg"
|
||||
"zippedPackage": "solution/spfx-pnpjs-example.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"https": true,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
{
|
||||
// Display errors as warnings
|
||||
"displayAsWarning": true,
|
||||
// The TSLint task may have been configured with several custom lint rules
|
||||
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
|
||||
// project). If true, this flag will deactivate any of these rules.
|
||||
"removeExistingRules": true,
|
||||
// When true, the TSLint task is configured with some default TSLint "rules.":
|
||||
"useDefaultConfigAsBase": false,
|
||||
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
|
||||
// which are active, other than the list of rules below.
|
||||
"lintConfig": {
|
||||
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-case": true,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-unused-imports": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"valid-typeof": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false,
|
||||
"prefer-const": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,30 +1,37 @@
|
|||
{
|
||||
"name": "spfx-sp-pnp-js-example",
|
||||
"name": "spfx-pnpjs-example",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-client-base": "~1.0.0",
|
||||
"@microsoft/sp-core-library": "~1.0.0",
|
||||
"@microsoft/sp-webpart-base": "~1.0.0",
|
||||
"@types/knockout": "3.4.39",
|
||||
"@types/webpack-env": ">=1.12.1 <1.14.0",
|
||||
"knockout": "3.4.0",
|
||||
"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",
|
||||
"gulp": "~3.9.1",
|
||||
"@types/chai": ">=3.4.34 <3.6.0",
|
||||
"@types/mocha": ">=2.2.33 <2.6.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.7.0",
|
||||
"@microsoft/sp-lodash-subset": "1.7.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.7.0",
|
||||
"@microsoft/sp-webpart-base": "1.7.0",
|
||||
"@pnp/common": "^1.2.5",
|
||||
"@pnp/logging": "^1.2.5",
|
||||
"@pnp/odata": "^1.2.5",
|
||||
"@pnp/sp": "^1.2.5",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/knockout": "3.4.39",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"knockout": "3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "1.7.0",
|
||||
"@microsoft/sp-tslint-rules": "1.7.0",
|
||||
"@microsoft/sp-module-interfaces": "1.7.0",
|
||||
"@microsoft/sp-webpart-workbench": "1.7.0",
|
||||
"gulp": "~3.9.1",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"ajv": "~5.2.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
import * as ko from 'knockout';
|
||||
import styles from './SpPnPjsExample.module.scss';
|
||||
import { ISpPnPjsExampleWebPartProps } from './ISpPnPjsExampleWebPartProps';
|
||||
import pnp, { List, ListEnsureResult, ItemAddResult } from "sp-pnp-js";
|
||||
import { ISpPnPjsExampleBindingContext, OrderListItem } from './SpPnPjsExampleViewModel';
|
||||
import styles from './PnPjsExample.module.scss';
|
||||
import { IPnPjsExampleBindingContext, OrderListItem } from './PnPjsExampleViewModel';
|
||||
|
||||
export default class MockSpPnPjsExampleViewModel {
|
||||
export default class MockPnPjsExampleViewModel {
|
||||
|
||||
public description: KnockoutObservable<string> = ko.observable('');
|
||||
public newItemTitle: KnockoutObservable<string> = ko.observable('');
|
||||
|
|
@ -12,12 +10,12 @@ export default class MockSpPnPjsExampleViewModel {
|
|||
public items: KnockoutObservableArray<OrderListItem> = ko.observableArray([]);
|
||||
|
||||
public labelClass: string = styles.label;
|
||||
public helloWorldClass: string = styles.helloWorld;
|
||||
public helloWorldClass: string = styles.pnPjsExample;
|
||||
public containerClass: string = styles.container;
|
||||
public rowClass: string = `ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`;
|
||||
public buttonClass: string = `ms-Button ${styles.button}`;
|
||||
|
||||
constructor(bindings: ISpPnPjsExampleBindingContext) {
|
||||
constructor(bindings: IPnPjsExampleBindingContext) {
|
||||
this.description(bindings.description);
|
||||
|
||||
// When web part description is updated, change this view model's description.
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
|
||||
.pnPjsExample {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.row {
|
||||
@include ms-Grid-row;
|
||||
@include ms-fontColor-white;
|
||||
background-color: $ms-color-themeDark;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.column {
|
||||
@include ms-Grid-col;
|
||||
@include ms-lg10;
|
||||
@include ms-xl8;
|
||||
@include ms-xlPush2;
|
||||
@include ms-lgPush1;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include ms-font-xl;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.button {
|
||||
// Our button
|
||||
text-decoration: none;
|
||||
height: 32px;
|
||||
|
||||
// Primary Button
|
||||
min-width: 80px;
|
||||
background-color: $ms-color-themePrimary;
|
||||
border-color: $ms-color-themePrimary;
|
||||
color: $ms-color-white;
|
||||
|
||||
// Basic Button
|
||||
outline: transparent;
|
||||
position: relative;
|
||||
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: $ms-font-size-m;
|
||||
font-weight: $ms-font-weight-regular;
|
||||
border-width: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
|
||||
.label {
|
||||
font-weight: $ms-font-weight-semibold;
|
||||
font-size: $ms-font-size-m;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,13 @@
|
|||
import * as ko from 'knockout';
|
||||
import styles from './SpPnPjsExample.module.scss';
|
||||
import { ISpPnPjsExampleWebPartProps } from './ISpPnPjsExampleWebPartProps';
|
||||
import pnp, { List, ListEnsureResult, ItemAddResult } from "sp-pnp-js";
|
||||
import styles from './PnPjsExample.module.scss';
|
||||
import { IPnPjsExampleWebPartProps } from './PnPjsExampleWebPart';
|
||||
require("tslib");
|
||||
require("@pnp/logging");
|
||||
require("@pnp/common");
|
||||
require("@pnp/odata");
|
||||
import { sp, List, ListEnsureResult, ItemAddResult } from "@pnp/sp";
|
||||
|
||||
export interface ISpPnPjsExampleBindingContext extends ISpPnPjsExampleWebPartProps {
|
||||
export interface IPnPjsExampleBindingContext extends IPnPjsExampleWebPartProps {
|
||||
shouter: KnockoutSubscribable<{}>;
|
||||
}
|
||||
|
||||
|
|
@ -16,20 +20,19 @@ export interface OrderListItem {
|
|||
OrderNumber: string;
|
||||
}
|
||||
|
||||
export default class SpPnPjsExampleViewModel {
|
||||
|
||||
export default class PnPjsExampleViewModel {
|
||||
public description: KnockoutObservable<string> = ko.observable('');
|
||||
public newItemTitle: KnockoutObservable<string> = ko.observable('');
|
||||
public newItemNumber: KnockoutObservable<string> = ko.observable('');
|
||||
public items: KnockoutObservableArray<OrderListItem> = ko.observableArray([]);
|
||||
|
||||
public labelClass: string = styles.label;
|
||||
public helloWorldClass: string = styles.helloWorld;
|
||||
public helloWorldClass: string = styles.pnPjsExample;
|
||||
public containerClass: string = styles.container;
|
||||
public rowClass: string = `ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`;
|
||||
public buttonClass: string = `ms-Button ${styles.button}`;
|
||||
|
||||
constructor(bindings: ISpPnPjsExampleBindingContext) {
|
||||
constructor(bindings: IPnPjsExampleBindingContext) {
|
||||
this.description(bindings.description);
|
||||
|
||||
// When web part description is updated, change this view model's description.
|
||||
|
|
@ -52,7 +55,7 @@ export default class SpPnPjsExampleViewModel {
|
|||
return this.ensureList().then(list => {
|
||||
|
||||
// here we are using the getAs operator so that our returned value will be typed
|
||||
return list.items.select("Id", "Title", "OrderNumber").getAs<OrderListItem[]>();
|
||||
return list.items.select("Id", "Title", "OrderNumber").get<OrderListItem[]>();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -110,7 +113,7 @@ export default class SpPnPjsExampleViewModel {
|
|||
return new Promise<List>((resolve, reject) => {
|
||||
|
||||
// use lists.ensure to always have the list available
|
||||
pnp.sp.web.lists.ensure("SPPnPJSExampleList").then((ler: ListEnsureResult) => {
|
||||
sp.web.lists.ensure("SPPnPJSExampleList").then((ler: ListEnsureResult) => {
|
||||
|
||||
if (ler.created) {
|
||||
|
||||
|
|
@ -121,7 +124,7 @@ export default class SpPnPjsExampleViewModel {
|
|||
// here we use batching
|
||||
|
||||
// create a batch
|
||||
let batch = pnp.sp.web.createBatch();
|
||||
let batch = sp.web.createBatch();
|
||||
|
||||
ler.list.getListItemEntityTypeFullName().then(typeName => {
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "96110e26-919f-4571-b773-4aa695c0b3e3",
|
||||
"alias": "PnPjsExampleWebPart",
|
||||
"componentType": "WebPart",
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
// 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": "PnPJSExample"
|
||||
},
|
||||
"description": {
|
||||
"default": "Example of using @pnp/sp within SPFx with Knockout framework"
|
||||
},
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"description": "PnPJSExample"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,24 +1,25 @@
|
|||
import * as ko from 'knockout';
|
||||
import {
|
||||
Environment,
|
||||
EnvironmentType,
|
||||
Version
|
||||
} from '@microsoft/sp-core-library';
|
||||
import { Version, Environment, EnvironmentType } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import pnp, { Logger, LogLevel, ConsoleListener } from "sp-pnp-js";
|
||||
|
||||
import * as strings from 'spPnPjsExampleStrings';
|
||||
import SpPnPjsExampleViewModel, { ISpPnPjsExampleBindingContext } from './SpPnPjsExampleViewModel';
|
||||
import MockSpPnPjsExampleViewModel from './MockSpPnPjsExampleViewModel';
|
||||
import { ISpPnPjsExampleWebPartProps } from './ISpPnPjsExampleWebPartProps';
|
||||
import * as strings from 'PnPjsExampleWebPartStrings';
|
||||
import PnPjsExampleViewModel, { IPnPjsExampleBindingContext } from './PnPjsExampleViewModel';
|
||||
|
||||
import { sp } from "@pnp/sp";
|
||||
import { Logger, LogLevel , ConsoleListener} from "@pnp/logging";
|
||||
import MockSpPnPjsExampleViewModel from './MockPnPjsExampleViewModel';
|
||||
|
||||
let _instance: number = 0;
|
||||
|
||||
export default class SpPnPjsExampleWebPart extends BaseClientSideWebPart<ISpPnPjsExampleWebPartProps> {
|
||||
export interface IPnPjsExampleWebPartProps {
|
||||
description: string;
|
||||
}
|
||||
|
||||
export default class PnPjsExampleWebPart extends BaseClientSideWebPart<IPnPjsExampleWebPartProps> {
|
||||
private _id: number;
|
||||
private _componentElement: HTMLElement;
|
||||
private _koDescription: KnockoutObservable<string> = ko.observable('');
|
||||
|
|
@ -43,23 +44,22 @@ export default class SpPnPjsExampleWebPart extends BaseClientSideWebPart<ISpPnPj
|
|||
this._shouter.notifySubscribers(newValue, 'description');
|
||||
});
|
||||
|
||||
const bindings: ISpPnPjsExampleBindingContext = {
|
||||
const bindings: IPnPjsExampleBindingContext = {
|
||||
description: this.properties.description,
|
||||
shouter: this._shouter
|
||||
};
|
||||
|
||||
ko.applyBindings(bindings, this._componentElement);
|
||||
|
||||
return super.onInit().then(_ => {
|
||||
|
||||
pnp.setup({
|
||||
spfxContext: this.context
|
||||
});
|
||||
|
||||
// optional, we are setting up the sp-pnp-js logging for debugging
|
||||
Logger.activeLogLevel = LogLevel.Info;
|
||||
Logger.subscribe(new ConsoleListener());
|
||||
sp.setup({
|
||||
spfxContext: this.context
|
||||
});
|
||||
|
||||
// optional, we are setting up the sp-pnp-js logging for debugging
|
||||
Logger.activeLogLevel = LogLevel.Info;
|
||||
Logger.subscribe(new ConsoleListener());
|
||||
|
||||
return super.onInit();
|
||||
}
|
||||
|
||||
public render(): void {
|
||||
|
|
@ -84,7 +84,7 @@ export default class SpPnPjsExampleWebPart extends BaseClientSideWebPart<ISpPnPj
|
|||
tagName,
|
||||
{
|
||||
viewModel: MockSpPnPjsExampleViewModel,
|
||||
template: require('./SpPnPjsExample.template.html'),
|
||||
template: require('./PnPjsExample.template.html'),
|
||||
synchronous: false
|
||||
}
|
||||
);
|
||||
|
|
@ -92,12 +92,12 @@ export default class SpPnPjsExampleWebPart extends BaseClientSideWebPart<ISpPnPj
|
|||
ko.components.register(
|
||||
tagName,
|
||||
{
|
||||
viewModel: SpPnPjsExampleViewModel,
|
||||
template: require('./SpPnPjsExample.template.html'),
|
||||
viewModel: PnPjsExampleViewModel,
|
||||
template: require('./PnPjsExample.template.html'),
|
||||
synchronous: false
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
declare interface IPnPjsExampleWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'PnPjsExampleWebPartStrings' {
|
||||
const strings: IPnPjsExampleWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export interface ISpPnPjsExampleWebPartProps {
|
||||
description: string;
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
.helloWorld {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.listItem {
|
||||
max-width: 715px;
|
||||
margin: 5px auto 5px auto;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.button {
|
||||
// Our button
|
||||
text-decoration: none;
|
||||
height: 32px;
|
||||
|
||||
// Primary Button
|
||||
min-width: 80px;
|
||||
background-color: #0078d7;
|
||||
border-color: #0078d7;
|
||||
color: #ffffff;
|
||||
|
||||
// Basic Button
|
||||
outline: transparent;
|
||||
position: relative;
|
||||
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border-width: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
|
||||
.label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"id": "a7a99322-3bec-4eab-b092-5fd889338a61",
|
||||
"alias": "SpPnPjsExampleWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "a7a99322-3bec-4eab-b092-5fd889338a61",
|
||||
"group": { "default": "Under Development" },
|
||||
"title": { "default": "SPPnPJSExample" },
|
||||
"description": { "default": "Example of using sp-pnp-js within SPFx" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"description": "SPPnPJSExample"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
declare interface ISpPnPjsExampleStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'spPnPjsExampleStrings' {
|
||||
const strings: ISpPnPjsExampleStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
/// <reference types="mocha" />
|
||||
|
||||
import { assert } from 'chai';
|
||||
|
||||
describe('SpPnPjsExampleWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
|
||||
"manifestVersion": "1.2",
|
||||
"packageName": "PnPjsExample",
|
||||
"id": "96110e26-919f-4571-b773-4aa695c0b3e3",
|
||||
"version": "0.1",
|
||||
"developer": {
|
||||
"name": "SPFx + Teams Dev",
|
||||
"websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
|
||||
"privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
|
||||
"termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
|
||||
},
|
||||
"name": {
|
||||
"short": "PnPjsExample"
|
||||
},
|
||||
"description": {
|
||||
"short": "Example of using @pnp/sp within SPFx with Knockout framework",
|
||||
"full": "Example of using @pnp/sp within SPFx with Knockout framework"
|
||||
},
|
||||
"icons": {
|
||||
"outline": "tab20x20.png",
|
||||
"color": "tab96x96.png"
|
||||
},
|
||||
"accentColor": "#004578",
|
||||
"configurableTabs": [
|
||||
{
|
||||
"configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=96110e26-919f-4571-b773-4aa695c0b3e3",
|
||||
"canUpdateConfiguration": false,
|
||||
"scopes": [
|
||||
"team"
|
||||
]
|
||||
}
|
||||
],
|
||||
"validDomains": [
|
||||
"*.login.microsoftonline.com",
|
||||
"*.sharepoint.com",
|
||||
"*.sharepoint-df.com",
|
||||
"spoppe-a.akamaihd.net",
|
||||
"spoprod-a.akamaihd.net",
|
||||
"resourceseng.blob.core.windows.net",
|
||||
"msft.spoppe.com"
|
||||
],
|
||||
"webApplicationInfo": {
|
||||
"resource": "https://{teamSiteDomain}",
|
||||
"id": "00000003-0000-0ff1-ce00-000000000000"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 933 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -2,14 +2,33 @@
|
|||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "commonjs",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"outDir": "lib",
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"es6-collections",
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"lib"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,30 @@
|
|||
{
|
||||
"rulesDirectory": "./config"
|
||||
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
|
|
@ -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