Added jQuery DataTables tutorial code (#250)
This commit is contained in:
Waldek Mastykarz
Vesa Juvonen
parent
d37bbfbd7a
commit
bd6fcc034c
|
|
@ -0,0 +1,25 @@
|
|||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# we recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{package,bower}.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
|
@ -0,0 +1 @@
|
|||
* text=auto
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
# Folders
|
||||
.vscode
|
||||
coverage
|
||||
node_modules
|
||||
sharepoint
|
||||
src
|
||||
temp
|
||||
|
||||
# Files
|
||||
*.csproj
|
||||
.git*
|
||||
.yo-rc.json
|
||||
gulpfile.js
|
||||
tsconfig.json
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"libraryName": "spfx-js-datatables",
|
||||
"framework": "none",
|
||||
"version": "1.0.2",
|
||||
"libraryId": "1e1ac667-cac9-4a86-97fb-f5abda8a8926"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# Tutorial: Migrate jQuery and DataTables solution built using Script Editor Web Part to SharePoint Framework
|
||||
|
||||
Sample jQuery DataTables solution migrated from a Script Editor Web Part to the SharePoint Framework.
|
||||
|
||||
|
||||
|
||||
More information about the solution is available at [https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx).
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- In the command line run:
|
||||
- `npm i`
|
||||
- `gulp serve --nobrowser`
|
||||
- In the web browser navigate to the hosted version of the SharePoint workbench located in the same site as where the Tasks list is, eg. *https://contoso.sharepoint.com/sites/team/_layouts/15/workbench.aspx*.
|
||||
|
||||
[More information](../README.md)
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/tutorial-migrate-datatables/01" />
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"entries": [
|
||||
{
|
||||
"entry": "./lib/webparts/itRequests/ItRequestsWebPart.js",
|
||||
"manifest": "./src/webparts/itRequests/ItRequestsWebPart.manifest.json",
|
||||
"outputPath": "./dist/it-requests.bundle.js"
|
||||
}
|
||||
],
|
||||
"externals": {
|
||||
"jquery": "https://code.jquery.com/jquery-1.12.4.min.js",
|
||||
"datatables.net": "https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js",
|
||||
"moment": "https://momentjs.com/downloads/moment.min.js"
|
||||
},
|
||||
"localizedResources": {
|
||||
"itRequestsStrings": "webparts/itRequests/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "spfx-js-datatables",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"solution": {
|
||||
"name": "spfx-js-datatables-client-side-solution",
|
||||
"id": "1e1ac667-cac9-4a86-97fb-f5abda8a8926",
|
||||
"version": "1.0.0.0"
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/spfx-js-datatables.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"port": 4321,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"https": true,
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
// 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.initialize(gulp);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "spfx-js-datatables",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"author": {
|
||||
"name": "Waldek Mastykarz",
|
||||
"url": "https://blog.mastykarz.nl"
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "~1.0.1",
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export interface IItRequestsWebPartProps {
|
||||
description: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
.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: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"id": "61119bb3-fa48-4ded-bde9-6593ed155cbb",
|
||||
"alias": "ItRequestsWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "61119bb3-fa48-4ded-bde9-6593ed155cbb",
|
||||
"group": { "default": "Under Development" },
|
||||
"title": { "default": "IT Requests" },
|
||||
"description": { "default": "Shows list of IT requests" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"description": "IT Requests"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
|
||||
import styles from './ItRequests.module.scss';
|
||||
import * as strings from 'itRequestsStrings';
|
||||
import { IItRequestsWebPartProps } from './IItRequestsWebPartProps';
|
||||
|
||||
import 'jquery';
|
||||
import 'datatables.net';
|
||||
import 'moment';
|
||||
import './moment-plugin';
|
||||
|
||||
export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
this.domElement.innerHTML = `
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
|
||||
<table id="requests" class="display ${styles.helloWorld}" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Business unit</th>
|
||||
<th>Category</th>
|
||||
<th>Status</th>
|
||||
<th>Due date</th>
|
||||
<th>Assigned to</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>`;
|
||||
|
||||
require('./script');
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField('description', {
|
||||
label: strings.DescriptionFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Description",
|
||||
"BasicGroupName": "Group Name",
|
||||
"DescriptionFieldLabel": "Description Field"
|
||||
}
|
||||
});
|
||||
10
tutorial-migrate-datatables/01-migrated-sewp-to-spfx/src/webparts/itRequests/loc/mystrings.d.ts
vendored
Normal file
10
tutorial-migrate-datatables/01-migrated-sewp-to-spfx/src/webparts/itRequests/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
declare interface IItRequestsStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'itRequestsStrings' {
|
||||
const strings: IItRequestsStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
// UMD
|
||||
(function (factory) {
|
||||
"use strict";
|
||||
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(['jquery'], function ($) {
|
||||
return factory($, window, document);
|
||||
});
|
||||
}
|
||||
else if (typeof exports === 'object') {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if (!root) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if (!$) {
|
||||
$ = typeof window !== 'undefined' ?
|
||||
require('jquery') :
|
||||
require('jquery')(root);
|
||||
}
|
||||
|
||||
return factory($, root, root.document);
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory(jQuery, window, document);
|
||||
}
|
||||
}
|
||||
|
||||
(function ($, window, document) {
|
||||
$.fn.dataTable.render.moment = function (from, to, locale) {
|
||||
// Argument shifting
|
||||
if (arguments.length === 1) {
|
||||
locale = 'en';
|
||||
to = from;
|
||||
from = 'YYYY-MM-DD';
|
||||
}
|
||||
else if (arguments.length === 2) {
|
||||
locale = 'en';
|
||||
}
|
||||
|
||||
return function (d, type, row) {
|
||||
var moment = require('moment');
|
||||
var m = moment(d, from, locale, true);
|
||||
|
||||
// Order and type get a number value from Moment, everything else
|
||||
// sees the rendered value
|
||||
return m.format(type === 'sort' || type === 'type' ? 'x' : to);
|
||||
};
|
||||
};
|
||||
}));
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
$(document).ready(function () {
|
||||
$('#requests').DataTable({
|
||||
'ajax': {
|
||||
'url': "../../_api/web/lists/getbytitle('IT Requests')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title",
|
||||
'headers': { 'Accept': 'application/json;odata=nometadata' },
|
||||
'dataSrc': function (data) {
|
||||
return data.value.map(function (item) {
|
||||
return [
|
||||
item.ID,
|
||||
item.BusinessUnit,
|
||||
item.Category,
|
||||
item.Status,
|
||||
new Date(item.DueDate),
|
||||
item.AssignedTo.Title
|
||||
];
|
||||
});
|
||||
}
|
||||
},
|
||||
columnDefs: [{
|
||||
targets: 4,
|
||||
render: $.fn.dataTable.render.moment('YYYY/MM/DD')
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/// <reference types="mocha" />
|
||||
|
||||
import { assert } from 'chai';
|
||||
|
||||
describe('ItRequestsWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "commonjs",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"es6-collections",
|
||||
"webpack-env"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// 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;
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference path="@ms/odsp.d.ts" />
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# we recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{package,bower}.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
|
@ -0,0 +1 @@
|
|||
* text=auto
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
# Folders
|
||||
.vscode
|
||||
coverage
|
||||
node_modules
|
||||
sharepoint
|
||||
src
|
||||
temp
|
||||
|
||||
# Files
|
||||
*.csproj
|
||||
.git*
|
||||
.yo-rc.json
|
||||
gulpfile.js
|
||||
tsconfig.json
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"libraryName": "spfx-js-datatables",
|
||||
"framework": "none",
|
||||
"version": "1.0.2",
|
||||
"libraryId": "1e1ac667-cac9-4a86-97fb-f5abda8a8926"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# Tutorial: Migrate jQuery and DataTables solution built using Script Editor Web Part to SharePoint Framework
|
||||
|
||||
Sample jQuery DataTables solution migrated from a Script Editor Web Part to the SharePoint Framework.
|
||||
|
||||
|
||||
|
||||
More information about the solution is available at [https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx).
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- In the command line run:
|
||||
- `npm i`
|
||||
- `gulp serve --nobrowser`
|
||||
- In the web browser navigate to the hosted version of the SharePoint workbench located in the same site as where the Tasks list is, eg. *https://contoso.sharepoint.com/sites/team/_layouts/15/workbench.aspx*.
|
||||
|
||||
[More information](../README.md)
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/tutorial-migrate-datatables/02" />
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"entries": [
|
||||
{
|
||||
"entry": "./lib/webparts/itRequests/ItRequestsWebPart.js",
|
||||
"manifest": "./src/webparts/itRequests/ItRequestsWebPart.manifest.json",
|
||||
"outputPath": "./dist/it-requests.bundle.js"
|
||||
}
|
||||
],
|
||||
"externals": {
|
||||
"jquery": "https://code.jquery.com/jquery-1.12.4.min.js",
|
||||
"datatables.net": "https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js",
|
||||
"moment": "https://momentjs.com/downloads/moment.min.js"
|
||||
},
|
||||
"localizedResources": {
|
||||
"itRequestsStrings": "webparts/itRequests/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "spfx-js-datatables",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"solution": {
|
||||
"name": "spfx-js-datatables-client-side-solution",
|
||||
"id": "1e1ac667-cac9-4a86-97fb-f5abda8a8926",
|
||||
"version": "1.0.0.0"
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/spfx-js-datatables.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"port": 4321,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"https": true,
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
// 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.initialize(gulp);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "spfx-js-datatables",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"author": {
|
||||
"name": "Waldek Mastykarz",
|
||||
"url": "https://blog.mastykarz.nl"
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "~1.0.1",
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export interface IItRequestsWebPartProps {
|
||||
listName: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
.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: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"id": "61119bb3-fa48-4ded-bde9-6593ed155cbb",
|
||||
"alias": "ItRequestsWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "61119bb3-fa48-4ded-bde9-6593ed155cbb",
|
||||
"group": { "default": "Under Development" },
|
||||
"title": { "default": "IT Requests" },
|
||||
"description": { "default": "Shows list of IT requests" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"listName": "IT Requests"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
|
||||
import styles from './ItRequests.module.scss';
|
||||
import * as strings from 'itRequestsStrings';
|
||||
import { IItRequestsWebPartProps } from './IItRequestsWebPartProps';
|
||||
|
||||
import 'jquery';
|
||||
import 'datatables.net';
|
||||
import 'moment';
|
||||
import './moment-plugin';
|
||||
|
||||
var $: any = (window as any).$;
|
||||
|
||||
export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
this.domElement.innerHTML = `
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
|
||||
<table class="display ${styles.helloWorld}" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Business unit</th>
|
||||
<th>Category</th>
|
||||
<th>Status</th>
|
||||
<th>Due date</th>
|
||||
<th>Assigned to</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>`;
|
||||
|
||||
$(document).ready(() => {
|
||||
$('table', this.domElement).DataTable({
|
||||
'ajax': {
|
||||
'url': `../../_api/web/lists/getbytitle('${escape(this.properties.listName)}')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title`,
|
||||
'headers': { 'Accept': 'application/json;odata=nometadata' },
|
||||
'dataSrc': function (data) {
|
||||
return data.value.map(function (item) {
|
||||
return [
|
||||
item.ID,
|
||||
item.BusinessUnit,
|
||||
item.Category,
|
||||
item.Status,
|
||||
new Date(item.DueDate),
|
||||
item.AssignedTo.Title
|
||||
];
|
||||
});
|
||||
}
|
||||
},
|
||||
columnDefs: [{
|
||||
targets: 4,
|
||||
render: $.fn.dataTable.render.moment('YYYY/MM/DD')
|
||||
}]
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField('listName', {
|
||||
label: strings.ListNameFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
protected get disableReactivePropertyChanges(): boolean {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "IT Requests settings",
|
||||
"BasicGroupName": "Data",
|
||||
"ListNameFieldLabel": "List name"
|
||||
}
|
||||
});
|
||||
10
tutorial-migrate-datatables/02-added-configuration/src/webparts/itRequests/loc/mystrings.d.ts
vendored
Normal file
10
tutorial-migrate-datatables/02-added-configuration/src/webparts/itRequests/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
declare interface IItRequestsStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
ListNameFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'itRequestsStrings' {
|
||||
const strings: IItRequestsStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
// UMD
|
||||
(function (factory) {
|
||||
"use strict";
|
||||
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(['jquery'], function ($) {
|
||||
return factory($, window, document);
|
||||
});
|
||||
}
|
||||
else if (typeof exports === 'object') {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if (!root) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if (!$) {
|
||||
$ = typeof window !== 'undefined' ?
|
||||
require('jquery') :
|
||||
require('jquery')(root);
|
||||
}
|
||||
|
||||
return factory($, root, root.document);
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory(jQuery, window, document);
|
||||
}
|
||||
}
|
||||
|
||||
(function ($, window, document) {
|
||||
$.fn.dataTable.render.moment = function (from, to, locale) {
|
||||
// Argument shifting
|
||||
if (arguments.length === 1) {
|
||||
locale = 'en';
|
||||
to = from;
|
||||
from = 'YYYY-MM-DD';
|
||||
}
|
||||
else if (arguments.length === 2) {
|
||||
locale = 'en';
|
||||
}
|
||||
|
||||
return function (d, type, row) {
|
||||
var moment = require('moment');
|
||||
var m = moment(d, from, locale, true);
|
||||
|
||||
// Order and type get a number value from Moment, everything else
|
||||
// sees the rendered value
|
||||
return m.format(type === 'sort' || type === 'type' ? 'x' : to);
|
||||
};
|
||||
};
|
||||
}));
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/// <reference types="mocha" />
|
||||
|
||||
import { assert } from 'chai';
|
||||
|
||||
describe('ItRequestsWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "commonjs",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"es6-collections",
|
||||
"webpack-env"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// 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;
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference path="@ms/odsp.d.ts" />
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# we recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{package,bower}.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
|
@ -0,0 +1 @@
|
|||
* text=auto
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
# Folders
|
||||
.vscode
|
||||
coverage
|
||||
node_modules
|
||||
sharepoint
|
||||
src
|
||||
temp
|
||||
|
||||
# Files
|
||||
*.csproj
|
||||
.git*
|
||||
.yo-rc.json
|
||||
gulpfile.js
|
||||
tsconfig.json
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"libraryName": "spfx-js-datatables",
|
||||
"framework": "none",
|
||||
"version": "1.0.2",
|
||||
"libraryId": "1e1ac667-cac9-4a86-97fb-f5abda8a8926"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# Tutorial: Migrate jQuery and DataTables solution built using Script Editor Web Part to SharePoint Framework
|
||||
|
||||
Sample jQuery DataTables solution migrated from a Script Editor Web Part to the SharePoint Framework.
|
||||
|
||||
|
||||
|
||||
More information about the solution is available at [https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx).
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- In the command line run:
|
||||
- `npm i`
|
||||
- `gulp serve --nobrowser`
|
||||
- In the web browser navigate to the hosted version of the SharePoint workbench located in the same site as where the Tasks list is, eg. *https://contoso.sharepoint.com/sites/team/_layouts/15/workbench.aspx*.
|
||||
|
||||
[More information](../README.md)
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/tutorial-migrate-datatables/03" />
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"entries": [
|
||||
{
|
||||
"entry": "./lib/webparts/itRequests/ItRequestsWebPart.js",
|
||||
"manifest": "./src/webparts/itRequests/ItRequestsWebPart.manifest.json",
|
||||
"outputPath": "./dist/it-requests.bundle.js"
|
||||
}
|
||||
],
|
||||
"externals": {
|
||||
"jquery": "https://code.jquery.com/jquery-1.12.4.min.js",
|
||||
"datatables.net": "https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js",
|
||||
"moment": "https://momentjs.com/downloads/moment.min.js"
|
||||
},
|
||||
"localizedResources": {
|
||||
"itRequestsStrings": "webparts/itRequests/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "spfx-js-datatables",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"solution": {
|
||||
"name": "spfx-js-datatables-client-side-solution",
|
||||
"id": "1e1ac667-cac9-4a86-97fb-f5abda8a8926",
|
||||
"version": "1.0.0.0"
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/spfx-js-datatables.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"port": 4321,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"https": true,
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
// 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.initialize(gulp);
|
||||
9083
tutorial-migrate-datatables/03-transformed-js-to-typescript/npm-shrinkwrap.json
generated
Normal file
9083
tutorial-migrate-datatables/03-transformed-js-to-typescript/npm-shrinkwrap.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"name": "spfx-js-datatables",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"author": {
|
||||
"name": "Waldek Mastykarz",
|
||||
"url": "https://blog.mastykarz.nl"
|
||||
},
|
||||
"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",
|
||||
"moment": "^2.18.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "~1.0.1",
|
||||
"@microsoft/sp-module-interfaces": "~1.0.0",
|
||||
"@microsoft/sp-webpart-workbench": "~1.0.0",
|
||||
"@types/chai": ">=3.4.34 <3.6.0",
|
||||
"@types/jquery": "^2.0.45",
|
||||
"@types/jquery.datatables": "^1.10.36",
|
||||
"@types/mocha": ">=2.2.33 <2.6.0",
|
||||
"gulp": "~3.9.1"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export interface IItRequestsWebPartProps {
|
||||
listName: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
.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: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
|
||||
|
||||
"id": "61119bb3-fa48-4ded-bde9-6593ed155cbb",
|
||||
"alias": "ItRequestsWebPart",
|
||||
"componentType": "WebPart",
|
||||
"version": "0.0.1",
|
||||
"manifestVersion": 2,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "61119bb3-fa48-4ded-bde9-6593ed155cbb",
|
||||
"group": { "default": "Under Development" },
|
||||
"title": { "default": "IT Requests" },
|
||||
"description": { "default": "Shows list of IT requests" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"listName": "IT Requests"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
|
||||
import styles from './ItRequests.module.scss';
|
||||
import * as strings from 'itRequestsStrings';
|
||||
import { IItRequestsWebPartProps } from './IItRequestsWebPartProps';
|
||||
|
||||
import * as $ from 'jquery';
|
||||
import 'datatables.net';
|
||||
import 'moment';
|
||||
import './moment-plugin';
|
||||
|
||||
interface IRequestItem {
|
||||
ID: number;
|
||||
BusinessUnit: string;
|
||||
Category: string;
|
||||
Status: string;
|
||||
DueDate: string;
|
||||
AssignedTo: { Title: string; };
|
||||
}
|
||||
|
||||
export default class ItRequestsWebPart extends BaseClientSideWebPart<IItRequestsWebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
this.domElement.innerHTML = `
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
|
||||
<table class="display ${styles.helloWorld}" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Business unit</th>
|
||||
<th>Category</th>
|
||||
<th>Status</th>
|
||||
<th>Due date</th>
|
||||
<th>Assigned to</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>`;
|
||||
|
||||
$('table', this.domElement).DataTable({
|
||||
'ajax': {
|
||||
'url': `../../_api/web/lists/getbytitle('${escape(this.properties.listName)}')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title`,
|
||||
'headers': { 'Accept': 'application/json;odata=nometadata' },
|
||||
'dataSrc': (data: { value: IRequestItem[] }): any[][] => {
|
||||
return data.value.map((item: IRequestItem): any[] => {
|
||||
return [
|
||||
item.ID,
|
||||
item.BusinessUnit,
|
||||
item.Category,
|
||||
item.Status,
|
||||
new Date(item.DueDate),
|
||||
item.AssignedTo.Title
|
||||
];
|
||||
});
|
||||
}
|
||||
},
|
||||
columnDefs: [{
|
||||
targets: 4,
|
||||
render: ($.fn.DataTable as any).render.moment('YYYY/MM/DD')
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField('listName', {
|
||||
label: strings.ListNameFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
protected get disableReactivePropertyChanges(): boolean {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "IT Requests settings",
|
||||
"BasicGroupName": "Data",
|
||||
"ListNameFieldLabel": "List name"
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
declare interface IItRequestsStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
ListNameFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'itRequestsStrings' {
|
||||
const strings: IItRequestsStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import * as $ from 'jquery';
|
||||
import * as moment from 'moment';
|
||||
|
||||
/* tslint:disable:no-function-expression */
|
||||
($.fn.DataTable as any).render.moment = function (from: string, to: string, locale: string): (d: any, type: string, row: any) => string {
|
||||
/* tslint:enable */
|
||||
// Argument shifting
|
||||
if (arguments.length === 1) {
|
||||
locale = 'en';
|
||||
to = from;
|
||||
from = 'YYYY-MM-DD';
|
||||
}
|
||||
else if (arguments.length === 2) {
|
||||
locale = 'en';
|
||||
}
|
||||
|
||||
return (d, type, row): string => {
|
||||
var m = moment(d, from, locale, true);
|
||||
|
||||
// Order and type get a number value from Moment, everything else
|
||||
// sees the rendered value
|
||||
return m.format(type === 'sort' || type === 'type' ? 'x' : to);
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/// <reference types="mocha" />
|
||||
|
||||
import { assert } from 'chai';
|
||||
|
||||
describe('ItRequestsWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "commonjs",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"types": [
|
||||
"jquery.datatables",
|
||||
"es6-promise",
|
||||
"es6-collections",
|
||||
"webpack-env"
|
||||
]
|
||||
}
|
||||
}
|
||||
8
tutorial-migrate-datatables/03-transformed-js-to-typescript/typings/@ms/odsp.d.ts
vendored
Normal file
8
tutorial-migrate-datatables/03-transformed-js-to-typescript/typings/@ms/odsp.d.ts
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// 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;
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference path="@ms/odsp.d.ts" />
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
# Tutorial: Migrate jQuery and DataTables solution built using Script Editor Web Part to SharePoint Framework
|
||||
|
||||
Sample jQuery DataTables solution migrated from a Script Editor Web Part to the SharePoint Framework.
|
||||
|
||||
|
||||
|
||||
Sub folders represent the different stages of the migration process. Each folder contains the complete solution that you can run in browser. More information about the solution is available at [https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx).
|
||||
|
||||
| Folder | Stage | More information
|
||||
| ------------- | ------------- | ------------- |
|
||||
| 01-migrated-sewp-to-spfx | Original solution migrated to SPFx. As much as possible of the original code left unaltered | [details](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx)
|
||||
| 02-added-configuration | Extended the code with support for configuring the web part through the property pane | [details](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx#add-support-for-configuring-the-web-part-through-web-part-properties)
|
||||
| 03-transformed-js-to-typescript | Transformed plain JavaScript to TypeScript | [details](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx#transform-the-plain-javascript-code-to-typescript)
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution | Author(s)
|
||||
------------- | -------------
|
||||
tutorial-migrate-datatables | Waldek Mastykarz (MVP, [Rencore](https://rencore.com), @waldekm)
|
||||
|
||||
## Version history
|
||||
|
||||
Version | Date | Comments
|
||||
--------| --------------- | --------
|
||||
1.0.0 | June, 27 2017 | Initial commit
|
||||
|
||||
## 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.**
|
||||
|
||||
----------
|
||||
|
||||
## Build and run the tutorials
|
||||
|
||||
To build and run this client-side project, you will need to clone and build the tutorials project. Because the solution retrieves its data from SharePoint, you will also need a custom list named **IT Requests** with some data in it. To preview the web part use the hosted version of the SharePoint Workbench loaded in the context of the site where the Tasks list is located.
|
||||
|
||||
Clone this repo by executing the following command in your console:
|
||||
|
||||
```sh
|
||||
git clone https://github.com/SharePoint/sp-dev-fx-webparts.git
|
||||
```
|
||||
|
||||
Navigate to the cloned repo folder which should be the same as the repo name:
|
||||
|
||||
```sh
|
||||
cd sp-dev-fx-webparts
|
||||
```
|
||||
|
||||
Navigate to the `tutorials-migrate-datatables` folder:
|
||||
|
||||
```sh
|
||||
cd tutorials
|
||||
```
|
||||
|
||||
Navigate to the `specific web part` folder:
|
||||
|
||||
```sh
|
||||
cd 'subfolder'
|
||||
```
|
||||
|
||||
Now run the following command to install the npm packages:
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
This will install the required npm packages and dependencies to build and run the SharePoint Framework project.
|
||||
|
||||
Once the npm packages are installed, run the command to preview your web parts in SharePoint Workbench:
|
||||
|
||||
```sh
|
||||
gulp serve --nobrowser
|
||||
```
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/tutorial-migrate-datatables" />
|
||||
Loading…
Reference in New Issue