Skip to content

Commit 66b2c5d

Browse files
Vinitha-BalasubramanianVinitha-Balasubramanian
committed
890081: Adding the SharePoint Framework GitHub sample on React
1 parent f7012e4 commit 66b2c5d

32 files changed

+1266
-0
lines changed

‎.eslintrc.js

Lines changed: 352 additions & 0 deletions
Large diffs are not rendered by default.

‎.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
6+
# Dependency directories
7+
node_modules
8+
9+
# Build generated files
10+
dist
11+
lib
12+
release
13+
solution
14+
temp
15+
*.sppkg
16+
.heft
17+
18+
# Coverage directory used by tools like istanbul
19+
coverage
20+
21+
# OSX
22+
.DS_Store
23+
24+
# Visual Studio files
25+
.ntvs_analysis.dat
26+
.vs
27+
bin
28+
obj
29+
30+
# Resx Generated Code
31+
*.resx.ts
32+
33+
# Styles Generated Code
34+
*.scss.ts

‎.npmignore

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
!dist
2+
config
3+
4+
gulpfile.js
5+
6+
release
7+
src
8+
temp
9+
10+
tsconfig.json
11+
tslint.json
12+
13+
*.log
14+
15+
.yo-rc.json
16+
.vscode

‎.yo-rc.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"@microsoft/generator-sharepoint": {
3+
"plusBeta": false,
4+
"isCreatingSolution": true,
5+
"nodeVersion": "18.20.2",
6+
"sdksVersions": {
7+
"@microsoft/microsoft-graph-client": "3.0.2",
8+
"@microsoft/teams-js": "2.12.0"
9+
},
10+
"version": "1.19.0",
11+
"libraryName": "ej-2-sharepoint",
12+
"libraryId": "01f0de7f-839b-4dd2-b868-de711c230ff7",
13+
"environment": "spo",
14+
"packageManager": "npm",
15+
"solutionName": "ej-2-sharepoint",
16+
"solutionShortDescription": "ej-2-sharepoint description",
17+
"skipFeatureDeployment": true,
18+
"isDomainIsolated": false,
19+
"componentType": "webpart"
20+
}
21+
}

‎README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,17 @@
11
# react-data-grid-integration-with-sharepoint
22
The repository contains a professional demonstration of a SharePoint Framework application featuring a React Grid control. This application showcases essential functionalities such as filtering, searching, grouping, editing, and paging actions, all implemented using custom binding with the Redux concept.
3+
4+
* Execute the following command to install Glup globally, </br>
5+
`npm install -g gulp`
6+
* Execute the following command to install the necessary dependencies,</br>
7+
`npm install`
8+
* Change the initial path of the **config/serve.json** to your sharepoint site instead of {tenantDomain}
9+
* To prevent certificate-related issues, use the following command, </br>
10+
`gulp trust-dev-cert`
11+
* Run the project using following command, </br>
12+
`gulp serve`
13+
* Click the **Add a new web part in column one** button.
14+
* Select the **ReactGridComponent** web part.
15+
16+
Finally, the Syncfusion React Grid control is rendered in your SharePoint Framework client-side web part.
17+
![Grid with Custom Binding](image/sharepoint-grid-action.gif)

‎config/config.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
3+
"version": "2.0",
4+
"bundles": {
5+
"react-grid-component-web-part": {
6+
"components": [
7+
{
8+
"entrypoint": "./lib/webparts/reactGridComponent/ReactGridComponentWebPart.js",
9+
"manifest": "./src/webparts/reactGridComponent/ReactGridComponentWebPart.manifest.json"
10+
}
11+
]
12+
}
13+
},
14+
"externals": {},
15+
"localizedResources": {
16+
"ReactGridComponentWebPartStrings": "lib/webparts/reactGridComponent/loc/{locale}.js"
17+
}
18+
}

‎config/deploy-azure-storage.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
3+
"workingDir": "./release/assets/",
4+
"account": "<!-- STORAGE ACCOUNT NAME -->",
5+
"container": "ej-2-sharepoint",
6+
"accessKey": "<!-- ACCESS KEY -->"
7+
}

‎config/package-solution.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
3+
"solution": {
4+
"name": "ej-2-sharepoint-client-side-solution",
5+
"id": "01f0de7f-839b-4dd2-b868-de711c230ff7",
6+
"version": "1.0.0.0",
7+
"includeClientSideAssets": true,
8+
"skipFeatureDeployment": true,
9+
"isDomainIsolated": false,
10+
"developer": {
11+
"name": "",
12+
"websiteUrl": "",
13+
"privacyUrl": "",
14+
"termsOfUseUrl": "",
15+
"mpnId": "Undefined-1.19.0"
16+
},
17+
"metadata": {
18+
"shortDescription": {
19+
"default": "ej-2-sharepoint description"
20+
},
21+
"longDescription": {
22+
"default": "ej-2-sharepoint description"
23+
},
24+
"screenshotPaths": [],
25+
"videoUrl": "",
26+
"categories": []
27+
},
28+
"features": [
29+
{
30+
"title": "ej-2-sharepoint Feature",
31+
"description": "The feature that activates elements of the ej-2-sharepoint solution.",
32+
"id": "4ef3cfee-3a29-4564-a99f-6d51355dcb59",
33+
"version": "1.0.0.0"
34+
}
35+
]
36+
},
37+
"paths": {
38+
"zippedPackage": "solution/ej-2-sharepoint.sppkg"
39+
}
40+
}

‎config/sass.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
3+
}

‎config/serve.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
3+
"port": 4321,
4+
"https": true,
5+
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
6+
}

‎config/write-manifests.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
3+
"cdnBasePath": "<!-- PATH TO CDN -->"
4+
}

‎gulpfile.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use strict';
2+
3+
const build = require('@microsoft/sp-build-web');
4+
5+
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
6+
7+
var getTasks = build.rig.getTasks;
8+
build.rig.getTasks = function () {
9+
var result = getTasks.call(build.rig);
10+
11+
result.set('serve', result.get('serve-deprecated'));
12+
13+
return result;
14+
};
15+
16+
build.initialize(require('gulp'));

‎image/sharepoint-grid-action.gif

396 KB
Loading

‎package.json

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "ej-2-sharepoint",
3+
"version": "0.0.1",
4+
"private": true,
5+
"engines": {
6+
"node": ">=18.17.1 <19.0.0"
7+
},
8+
"main": "lib/index.js",
9+
"scripts": {
10+
"build": "gulp bundle",
11+
"clean": "gulp clean",
12+
"test": "gulp test"
13+
},
14+
"dependencies": {
15+
"@fluentui/react": "^8.106.4",
16+
"@microsoft/sp-component-base": "1.19.0",
17+
"@microsoft/sp-core-library": "1.19.0",
18+
"@microsoft/sp-lodash-subset": "1.19.0",
19+
"@microsoft/sp-office-ui-fabric-core": "1.19.0",
20+
"@microsoft/sp-property-pane": "1.19.0",
21+
"@microsoft/sp-webpart-base": "1.19.0",
22+
"@syncfusion/ej2-data": "^25.2.3",
23+
"@syncfusion/ej2-react-grids": "^25.2.7",
24+
"react": "17.0.1",
25+
"react-dom": "17.0.1",
26+
"react-redux": "^9.1.2",
27+
"react-thunk": "^1.0.0",
28+
"redux": "^5.0.1",
29+
"redux-thunk": "^3.1.0",
30+
"tslib": "2.3.1"
31+
},
32+
"devDependencies": {
33+
"@microsoft/eslint-config-spfx": "1.20.1",
34+
"@microsoft/eslint-plugin-spfx": "1.20.1",
35+
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
36+
"@microsoft/sp-build-web": "1.20.1",
37+
"@microsoft/sp-module-interfaces": "1.20.1",
38+
"@rushstack/eslint-config": "2.5.1",
39+
"@types/react": "17.0.45",
40+
"@types/react-dom": "17.0.17",
41+
"@types/webpack-env": "~1.15.2",
42+
"ajv": "^6.12.5",
43+
"eslint": "8.7.0",
44+
"eslint-plugin-react-hooks": "4.3.0",
45+
"gulp": "4.0.2",
46+
"typescript": "4.7.4"
47+
}
48+
}

‎src/datasource.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
2+
/**
3+
* Grid datasource
4+
*/
5+
6+
7+
export const lazyLoadData: object[] = [];
8+
export function createLazyLoadData(): void {
9+
if (lazyLoadData.length) {
10+
return;
11+
}
12+
const customerid: string[] = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR', 'CHOPS', 'RICSU', 'WELLI', 'HILAA',
13+
'ERNSH', 'CENTC', 'OTTIK', 'QUEDE', 'RATTC', 'ERNSH', 'FOLKO', 'BLONP', 'WARTH', 'FRANK', 'GROSR', 'WHITC', 'WARTH',
14+
'SPLIR', 'RATTC', 'QUICK', 'VINET', 'MAGAA', 'TORTU', 'MORGK', 'BERGS', 'LEHMS', 'BERGS', 'ROMEY', 'ROMEY', 'LILAS',
15+
'LEHMS', 'QUICK', 'QUICK', 'RICAR', 'REGGC', 'BSBEV', 'COMMI', 'QUEDE', 'TRADH', 'TORTU', 'RATTC', 'VINET', 'LILAS',
16+
'BLONP', 'HUNGO', 'RICAR', 'MAGAA', 'WANDK', 'SUPRD', 'GODOS', 'TORTU', 'OLDWO', 'ROMEY', 'LONEP', 'ANATR', 'HUNGO',
17+
'THEBI', 'DUMON', 'WANDK', 'QUICK', 'RATTC', 'ISLAT', 'RATTC', 'LONEP', 'ISLAT', 'TORTU', 'WARTH', 'ISLAT', 'PERIC',
18+
'KOENE', 'SAVEA', 'KOENE', 'BOLID', 'FOLKO', 'FURIB', 'SPLIR', 'LILAS', 'BONAP', 'MEREP', 'WARTH', 'VICTE',
19+
'HUNGO', 'PRINI', 'FRANK', 'OLDWO', 'MEREP', 'BONAP', 'SIMOB', 'FRANK', 'LEHMS', 'WHITC', 'QUICK', 'RATTC', 'FAMIA'];
20+
21+
const product: string[] = ['Chai', 'Chang', 'Aniseed Syrup', 'Chef Anton\'s Cajun Seasoning', 'Chef Anton\'s Gumbo Mix',
22+
'Grandma\'s Boysenberry Spread', 'Uncle Bob\'s Organic Dried Pears', 'Northwoods Cranberry Sauce', 'Mishi Kobe Niku',
23+
'Ikura', 'Queso Cabrales', 'Queso Manchego La Pastora', 'Konbu', 'Tofu', 'Genen Shouyu', 'Pavlova', 'Alice Mutton',
24+
'Carnarvon Tigers', 'Teatime Chocolate Biscuits', 'Sir Rodney\'s Marmalade', 'Sir Rodney\'s Scones',
25+
'Gustaf\'s Knäckebröd', 'Tunnbröd', 'Guaraná Fantástica', 'NuNuCa Nuß-Nougat-Creme', 'Gumbär Gummibärchen',
26+
'Schoggi Schokolade', 'Rössle Sauerkraut', 'Thüringer Rostbratwurst', 'Nord-Ost Matjeshering', 'Gorgonzola Telino',
27+
'Mascarpone Fabioli', 'Geitost', 'Sasquatch Ale', 'Steeleye Stout', 'Inlagd Sill',
28+
'Gravad lax', 'Côte de Blaye', 'Chartreuse verte', 'Boston Crab Meat', 'Jack\'s New England Clam Chowder',
29+
'Singaporean Hokkien Fried Mee', 'Ipoh Coffee', 'Gula Malacca', 'Rogede sild', 'Spegesild', 'Zaanse koeken',
30+
'Chocolade', 'Maxilaku', 'Valkoinen suklaa', 'Manjimup Dried Apples', 'Filo Mix', 'Perth Pasties',
31+
'Tourtière', 'Pâté chinois', 'Gnocchi di nonna Alice', 'Ravioli Angelo', 'Escargots de Bourgogne',
32+
'Raclette Courdavault', 'Camembert Pierrot', 'Sirop d\'érable',
33+
'Tarte au sucre', 'Vegie-spread', 'Wimmers gute Semmelknödel', 'Louisiana Fiery Hot Pepper Sauce',
34+
'Louisiana Hot Spiced Okra', 'Laughing Lumberjack Lager', 'Scottish Longbreads',
35+
'Gudbrandsdalsost', 'Outback Lager', 'Flotemysost', 'Mozzarella di Giovanni', 'Röd Kaviar', 'Longlife Tofu',
36+
'Rhönbräu Klosterbier', 'Lakkalikööri', 'Original Frankfurter grüne Soße'];
37+
38+
const customername: string[] = ['Maria', 'Ana Trujillo', 'Antonio Moreno', 'Thomas Hardy', 'Christina Berglund',
39+
'Hanna Moos', 'Frédérique Citeaux', 'Martín Sommer', 'Laurence Lebihan', 'Elizabeth Lincoln',
40+
'Victoria Ashworth', 'Patricio Simpson', 'Francisco Chang', 'Yang Wang', 'Pedro Afonso', 'Elizabeth Brown',
41+
'Sven Ottlieb', 'Janine Labrune', 'Ann Devon', 'Roland Mendel', 'Aria Cruz', 'Diego Roel',
42+
'Martine Rancé', 'Maria Larsson', 'Peter Franken', 'Carine Schmitt', 'Paolo Accorti', 'Lino Rodriguez',
43+
'Eduardo Saavedra', 'José Pedro Freyre', 'André Fonseca', 'Howard Snyder', 'Manuel Pereira',
44+
'Mario Pontes', 'Carlos Hernández', 'Yoshi Latimer', 'Patricia McKenna', 'Helen Bennett', 'Philip Cramer',
45+
'Daniel Tonini', 'Annette Roulet', 'Yoshi Tannamuri', 'John Steel', 'Renate Messner', 'Jaime Yorres',
46+
'Carlos González', 'Felipe Izquierdo', 'Fran Wilson', 'Giovanni Rovelli', 'Catherine Dewey', 'Jean Fresnière',
47+
'Alexander Feuer', 'Simon Crowther', 'Yvonne Moncada', 'Rene Phillips', 'Henriette Pfalzheim',
48+
'Marie Bertrand', 'Guillermo Fernández', 'Georg Pipps', 'Isabel de Castro', 'Bernardo Batista', 'Lúcia Carvalho',
49+
'Horst Kloss', 'Sergio Gutiérrez', 'Paula Wilson', 'Maurizio Moroni', 'Janete Limeira', 'Michael Holz',
50+
'Alejandra Camino', 'Jonas Bergulfsen', 'Jose Pavarotti', 'Hari Kumar', 'Jytte Petersen', 'Dominique Perrier',
51+
'Art Braunschweiger', 'Pascale Cartrain', 'Liz Nixon', 'Liu Wong', 'Karin Josephs', 'Miguel Angel Paolino',
52+
'Anabela Domingues', 'Helvetius Nagy', 'Palle Ibsen', 'Mary Saveley', 'Paul Henriot', 'Rita Müller',
53+
'Pirkko Koskitalo', 'Paula Parente', 'Karl Jablonski', 'Matti Karttunen', 'Zbyszek Piestrzeniewicz'];
54+
55+
const customeraddress: string[] = ['507 - 20th Ave. E.\r\nApt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.',
56+
'4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House\r\nMiner Rd.', 'Edgeham Hollow\r\nWinchester Way',
57+
'4726 - 11th Ave. N.E.', '7 Houndstooth Rd.', '59 rue de l\'Abbaye', 'Luisenstr. 48', '908 W. Capital Way',
58+
'722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House\r\nMiner Rd.',
59+
'Edgeham Hollow\r\nWinchester Way',
60+
'7 Houndstooth Rd.', '2817 Milton Dr.', 'Kirchgasse 6', 'Sierras de Granada 9993', 'Mehrheimerstr. 369',
61+
'Rua da Panificadora, 12', '2817 Milton Dr.', 'Mehrheimerstr. 369'];
62+
63+
const quantityperunit: string[] = ['10 boxes x 20 bags', '24 - 12 oz bottles', '12 - 550 ml bottles',
64+
'48 - 6 oz jars', '36 boxes', '12 - 8 oz jars', '12 - 1 lb pkgs.', '12 - 12 oz jars',
65+
'18 - 500 g pkgs.', '12 - 200 ml jars',
66+
'1 kg pkg.', '10 - 500 g pkgs.', '2 kg box', '40 - 100 g pkgs.', '24 - 250 ml bottles', '32 - 500 g boxes',
67+
'20 - 1 kg tins', '16 kg pkg.', '10 boxes x 12 pieces', '30 gift boxes', '24 pkgs. x 4 pieces', '24 - 500 g pkgs.',
68+
'12 - 250 g pkgs.',
69+
'12 - 355 ml cans', '20 - 450 g glasses', '100 - 250 g bags'];
70+
71+
const orderID: number = 10248;
72+
for (let i: number = 0; i < 20000; i++) {
73+
lazyLoadData.push({
74+
'OrderID': orderID + i,
75+
'CustomerID': customerid[Math.floor(Math.random() * customerid.length)],
76+
'CustomerName': customername[Math.floor(Math.random() * customername.length)],
77+
'CustomerAddress': customeraddress[Math.floor(Math.random() * customeraddress.length)],
78+
'ProductName': product[Math.floor(Math.random() * product.length)],
79+
'ProductID': i,
80+
'Quantity': quantityperunit[Math.floor(Math.random() * quantityperunit.length)]
81+
});
82+
}
83+
}

‎src/grid-data.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { createLazyLoadData, lazyLoadData, } from './datasource';
2+
import { GridModel } from '@syncfusion/ej2-react-grids'
3+
4+
createLazyLoadData();
5+
6+
export const GridInitialState: GridModel = {
7+
dataSource: lazyLoadData,
8+
pageSettings: { pageSize: 12 , pageSizes:true, pageCount:4},
9+
};

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// A file is required to be in the root of the /src directory by the TypeScript compiler

‎src/webparts/reactGridComponent/ReactGridComponentWebPart.manifest.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
3+
"id": "a5e27051-4e60-4c26-9f38-2cbeaad847ff",
4+
"alias": "ReactGridComponentWebPart",
5+
"componentType": "WebPart",
6+
7+
// The "*" signifies that the version should be taken from the package.json
8+
"version": "*",
9+
"manifestVersion": 2,
10+
11+
// If true, the component can only be installed on sites where Custom Script is allowed.
12+
// Components that allow authors to embed arbitrary script code should set this to true.
13+
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
14+
"requiresCustomScript": false,
15+
"supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
16+
"supportsThemeVariants": true,
17+
18+
"preconfiguredEntries": [{
19+
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
20+
"group": { "default": "Advanced" },
21+
"title": { "default": "ReactGridComponent" },
22+
"description": { "default": "ReactGridComponent description" },
23+
"officeFabricIconFontName": "Page",
24+
"properties": {
25+
"description": "ReactGridComponent"
26+
}
27+
}]
28+
}

0 commit comments

Comments
 (0)