Merge pull request #1465 from sharepointknight/master

upgrade spfx version on js-display-list to 1.11.00
This commit is contained in:
Hugo Bernier 2020-09-02 18:27:55 -04:00 committed by GitHub
commit 43496fe034
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 22248 additions and 3239 deletions

View File

@ -1,7 +1,10 @@
{
"@microsoft/generator-sharepoint": {
"libraryName": "js-display-list",
"libraryId": "faf13055-4551-491c-8bbf-a00b30adfd54",
"framework": "none"
"version": "1.11.0",
"isDomainIsolated": false,
"isCreatingSolution": true,
"packageManager": "npm",
"componentType": "webpart",
"environment": "spo"
}
}

View File

@ -14,14 +14,16 @@ extensions:
# Display List JavaScript Client-Side Web Part
## Summary
This simplistic sample Web Part demonstrates the use of JavaScript in 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).
This simplistic sample web part demonstrates the use of JavaScript in 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.
![Screenshot 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.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
![SPFx 1.11.0](https://img.shields.io/badge/drop-1.11.0-green.svg)
## Applies to
@ -33,8 +35,10 @@ This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoi
Solution|Author(s)
--------|---------
js-display-list|Naamat Al-Aswad, P.Eng.
Updated to GA Version| Velin Georgiev ([@VelinGeorgiev](https://twitter.com/velingeorgiev))
js-display-list| Naamat Al-Aswad, P.Eng.
js-display-list| Velin Georgiev ([@VelinGeorgiev](https://twitter.com/velingeorgiev)) (Updated to GA Version)
js-display-list| Ryan Schouten ([@ShrPntKnight](https://twitter.com/ShrPntKnight)) (Upgraded to SPFx 1.11.0)
## Version history
@ -43,9 +47,11 @@ Version|Date|Comments
-------|----|--------
1.0|September 22, 2016|Initial release
1.1|May 15, 2017|Updated to GA Version
2.0|August 29, 2020|Upgraded to SPFx 1.11.0
## 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.**
---
@ -61,6 +67,7 @@ Version|Date|Comments
- 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.
This Web Part illustrates the following concepts on top of the SharePoint Framework:

View File

@ -1,11 +1,6 @@
{
"entries": [
{
"entry": "./lib/webparts/jsDisplayList/JsDisplayListWebPart.js",
"manifest": "./src/webparts/jsDisplayList/JsDisplayListWebPart.manifest.json",
"outputPath": "./dist/js-display-list.bundle.js"
}
],
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"externals": {
"@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
"@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",
@ -16,6 +11,16 @@
"react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js"
},
"localizedResources": {
"jsDisplayListStrings": "webparts/jsDisplayList/loc/{locale}.js"
"jsDisplayListStrings": "lib/webparts/jsDisplayList/loc/{locale}.js"
},
"bundles": {
"js-display-list-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/jsDisplayList/JsDisplayListWebPart.js",
"manifest": "./src/webparts/jsDisplayList/JsDisplayListWebPart.manifest.json"
}
]
}
}
}

View File

@ -1,4 +1,5 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "js-display-list",

View File

@ -1,8 +1,11 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "js-display-list-client-side-solution",
"id": "faf13055-4551-491c-8bbf-a00b30adfd54",
"version": "1.0.0.0"
"version": "2.0.0.0",
"isDomainIsolated": false,
"includeClientSideAssets": true
},
"paths": {
"zippedPackage": "solution/js-display-list.spapp"

View File

@ -1,4 +1,5 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"initialPage": "https://localhost:5432/workbench",
"https": true,

View File

@ -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
}
}
}

View File

@ -1,3 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

View File

@ -2,5 +2,5 @@
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);

18901
samples/js-display-list/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,23 +1,33 @@
{
"name": "js-display-list",
"version": "0.0.2",
"version": "2.0.0",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"main": "lib/index.js",
"dependencies": {
"@microsoft/sp-client-base": "~1.0.0",
"@microsoft/sp-core-library": "~1.0.0",
"@microsoft/sp-webpart-base": "~1.0.0",
"@types/webpack-env": ">=1.12.1 <1.14.0"
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-office-ui-fabric-core": "^1.11.0",
"@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"@types/es6-collections": "^0.5.32"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.0.0",
"@microsoft/sp-module-interfaces": "~1.0.0",
"@microsoft/sp-webpart-workbench": "~1.0.0",
"@microsoft/rush-stack-compiler-3.2": "^0.10.9",
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-module-interfaces": "1.11.0",
"@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.11.0",
"@types/chai": "3.4.34",
"@types/es6-promise": "0.0.33",
"@types/mocha": "2.2.38",
"@types/webpack-env": "1.13.1",
"ajv": "5.2.2",
"es6-collections": "^0.5.6",
"gulp": "~3.9.1",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0"
"tslint-microsoft-contrib": "5.0.0"
},
"scripts": {
"build": "gulp bundle",

View File

View File

@ -1,3 +1,57 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
$ms-greenLight: "[theme:greenLight, default:#bad80a]";
$ms-neutralSecondaryAlt: "[theme:info, default:#767676]";
$ms-neutralLight: "[theme:infoBackground, default:#eaeaea]";
$ms-magenta: "[theme:magenta, default:#b4009e]";
$ms-magentaDark: "[theme:magentaDark, default:#5c005c]";
$ms-magentaLight: "[theme:magentaLight, default:#e3008c]";
$ms-neutralDark: "[theme:neutralDark, default:#212121]";
$ms-neutralLight: "[theme:neutralLight, default:#eaeaea]";
$ms-neutralLighter: "[theme:neutralLighter, default:#f4f4f4]";
$ms-neutralLighterAlt: "[theme:neutralLighterAlt, default:#f8f8f8]";
$ms-neutralPrimary: "[theme:neutralPrimary, default:#333333]";
$ms-neutralPrimaryAlt: "[theme:neutralPrimaryAlt, default:#3C3C3C]";
$ms-neutralQuaternary: "[theme:neutralPrimaryTranslucent50, default:#d0d0d0]";
$ms-neutralQuaternaryAlt: "[theme:neutralQuaternary, default:#dadada]";
$ms-neutralSecondary: "[theme:neutralQuaternaryAlt, default:#666666]";
$ms-neutralSecondaryAlt: "[theme:neutralSecondary, default:#767676]";
$ms-neutralTertiary: "[theme:neutralSecondaryAlt, default:#a6a6a6]";
$ms-neutralTertiaryAlt: "[theme:neutralTertiary, default:#c8c8c8]";
$ms-white: "[theme:neutralTertiaryAlt, default:#ffffff]";
$ms-orange: "[theme:orange, default:#d83b01]";
$ms-orangeLight: "[theme:orangeLight, default:#ea4300]";
$ms-orangeLighter: "[theme:orangeLighter, default:#ff8c00]";
$ms-primaryBackground: "[theme:primaryBackground, default:#0078d7]";
$ms-primaryText: "[theme:primaryText, default:#0078d7]";
$ms-purple: "[theme:purple, default:#5c2d91]";
$ms-purpleDark: "[theme:purpleDark, default:#32145a]";
$ms-purpleLight: "[theme:purpleLight, default:#b4a0ff]";
$ms-red: "[theme:red, default:#e81123]";
$ms-redDark: "[theme:redDark, default:#a80000]";
$ms-success: "[theme:success, default:#107c10]";
$ms-successBackground: "[theme:successBackground, default:#dff6dd]";
$ms-teal: "[theme:teal, default:#008272]";
$ms-tealDark: "[theme:tealDark, default:#004b50]";
$ms-tealLight: "[theme:tealLight, default:#00b294]";
$ms-themeAccent: "[theme:themeAccent, default:inherit]";
$ms-themeAccentTranslucent10: "[theme:themeAccentTranslucent10, default:inherit]";
$ms-themeDark: "[theme:themeDark, default:#005a9e]";
$ms-themeDarkAlt: "[theme:themeDarkAlt, default:#106ebe]";
$ms-themeDarker: "[theme:themeDarker, default:#004578]";
$ms-themeLight: "[theme:themeLight, default:#b3d6f2]";
$ms-themeLightAlt: "[theme:themeLightAlt, default:inherit]";
$ms-themeLighter: "[theme:themeLighter, default:#deecf9]";
$ms-themeLighterAlt: "[theme:themeLighterAlt, default:#eff6fc]";
$ms-themePrimary: "[theme:themePrimary, default:#0078d7]";
$ms-themeSecondary: "[theme:themeSecondary, default:#2488d8]";
$ms-themeTertiary: "[theme:themeTertiary, default:#69afe5]";
$ms-themeTertiaryAlt: "[theme:themeTertiaryAlt, default:#c8c8c8]";
$ms-white: "[theme:white, default:#ffffff]";
$ms-whiteTranslucent40: "[theme:whiteTranslucent40, default:rgba(255,255,255,.4)]";
$ms-yellow: "[theme:yellow, default:#ffb900]";
$ms-yellowLight: "[theme:yellowLight, default:#fff100]";
.jsDisplayList {
.container {
max-width: 700px;
@ -6,7 +60,40 @@
}
.row {
padding: 20px;
@include ms-Grid-row;
}
.grid {
@include ms-Grid;
}
.columnHeader {
@include ms-Grid-col;
@include ms-md3;
@include ms-sm5;
@include ms-lg4;
@include ms-font-m-plus;
background-color: $ms-themeLight;
}
.column {
@include ms-Grid-col;
@include ms-md3;
@include ms-sm5;
@include ms-lg4;
@include ms-font-m;
}
.fontMPlus{
@include ms-font-m-plus;
}
.semiBold {
@include ms-fontWeight-semibold;
}
.themeDark {
background-color: $ms-themeDark;
color: $ms-white;
@include ms-font-l;
}
.themeLight {
background-color: $ms-themeLight;
}
.listItem {

View File

@ -1,15 +1,17 @@
{
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "1b513296-0d6c-4992-880a-007876428daa",
"alias": "JsDisplayListWebpart",
"componentType": "WebPart",
"version": "0.0.2",
"version": "*",
"manifestVersion": 2,
"supportedHosts": ["SharePointWebPart"],
"safeWithCustomScriptDisabled": false,
"preconfiguredEntries": [{
"groupId": "1b513296-0d6c-4992-880a-007876428daa",
"group": { "default": "Under Development" },
"group": { "default": "Other" },
"title": { "default": "js-display-list" },
"description": { "default": "Display Data from a SharePoint List" },
"officeFabricIconFontName": "Page",

View File

@ -1,9 +1,5 @@
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneDropdown,
IPropertyPaneDropdownOption
} from '@microsoft/sp-webpart-base';
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneDropdown, IPropertyPaneDropdownOption } from "@microsoft/sp-property-pane";
import styles from './JsDisplayList.module.scss';
@ -119,14 +115,13 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
if(!items) {
html = '<br /><p class="ms-font-m-plus">The selected list does not exist.</p>';
html = `<br /><p class="${styles.fontMPlus}">The selected list does not exist.</p>`;
} else if (items.length === 0) {
html = '<br /><p class="ms-font-m-plus">The selected list is empty</p>';
html = `<br /><p class="${styles.fontMPlus}">The selected list is empty</p>`;
} else {
//debugger;
items.forEach((item: ISPList) => {
let title: string = '';
@ -139,12 +134,12 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
let created: any = 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">
<div class="${styles.row}" }>
<div class="${styles.column}">${title}</div>
<div class="${styles.column}">
${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 class="${styles.column}">${item['Author'].Title}</div>
</div>`;
});
}
@ -157,18 +152,18 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
private _renderListAsync(): void {
this.domElement.innerHTML = `
<div className='wrapper'>
<p class="ms-font-l ms-bgColor-themeDark ms-fontColor-white">
<span class="ms-fontWeight-semibold">
<div class='wrapper ${styles.jsDisplayList}'>
<p class="${styles.themeDark}">
<span class="${styles.semiBold}">
${this.properties.listTitle}
</span>
List
</p>
<div class="ms-Grid ${styles.jsDisplayList}">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-bgColor-themeLight ms-font-m-plus">Title</div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-bgColor-themeLight ms-font-m-plus">Created</div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-bgColor-themeLight ms-font-m-plus">Created By</div>
<div class="${styles.grid} ${styles.jsDisplayList}">
<div class="${styles.row}">
<div class="${styles.columnHeader}">Title</div>
<div class="${styles.columnHeader}">Created</div>
<div class="${styles.columnHeader}">Created By</div>
</div>
<hr />
<div id="spListContainer"></div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 933 B

View File

@ -1,15 +1,40 @@
{
"include": [
"src/**/*.tsx",
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
],
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"module": "esnext",
"jsx": "react",
"moduleResolution": "node",
"declaration": true,
"sourceMap": true,
"skipLibCheck": true,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"lib": [
"es5",
"dom",
"es2015.collection"
],
"types": [
"es6-promise",
"es6-collections",
"webpack-env"
]
],
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"outDir": "lib",
"experimentalDecorators": true
}
}

View File

@ -1,3 +1,7 @@
{
"rulesDirectory": "./config"
"rulesDirectory": [],
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"no-empty": true
}
}

View File

@ -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;

View File

@ -1 +0,0 @@
/// <reference path="@ms/odsp.d.ts" />

File diff suppressed because it is too large Load Diff