Added PnP JS Tester Webpart
Added new sample PnP JS Tester Webpart which allows to test PnP JS SharePoint method. Co-Authored-By: Kunj Balkrishna Sangani <sangani.kunj@gmail.com>
This commit is contained in:
Siddharth
parent
ece43214ca
commit
0d9630f8a0
|
|
@ -0,0 +1,24 @@
|
||||||
|
# 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,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,12 @@
|
||||||
|
{
|
||||||
|
"@microsoft/generator-sharepoint": {
|
||||||
|
"isCreatingSolution": false,
|
||||||
|
"environment": "spo",
|
||||||
|
"version": "1.10.0",
|
||||||
|
"libraryName": "react-pnpjsexplorer",
|
||||||
|
"libraryId": "a41b7fa8-313e-40d1-ae85-1d85baddecf5",
|
||||||
|
"packageManager": "npm",
|
||||||
|
"isDomainIsolated": false,
|
||||||
|
"componentType": "webpart"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
## SPFx webpart to Test PnpJS SharePoint Methods
|
||||||
|
|
||||||
|
This webpart will allow SPFx developers to test PnPjs methods and it displays response in JSON viewer to identify properties/attributes returned by method/api. This webpart can be used as seperate component to test PnP Js methods and know the response returned by a particular method/api. To maximise productivity, we should package and deploy it to a test(developer) site collection which then can be used side by side when we are doing development of SPFx solutions.
|
||||||
|
|
||||||
|
Note - As of now it only supports to test Pnp JS method from sp(SharePoint) packages which contains the fluent api used to call the SharePoint rest services.
|
||||||
|
|
||||||
|
You can refer to this blog [link](https://siddharthvaghasia.com/2020/08/16/usage-guide-on-spfx-pnpjs-tester-web-part/) for usage guidance on How to use this webpart.
|
||||||
|
|
||||||
|
|
||||||
|
WebPart in Action
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Idea behind this webpart
|
||||||
|
* Most of the SharePoint developers are using PnP JS to develop SPFx solutions.
|
||||||
|
* During the development, there are times when we wanted to know what properties/attributes will be returned in response
|
||||||
|
* To get these details, we either use console.log to log response or debug the javascript and check what properties/attributes are returned etc.
|
||||||
|
* This webpart can be used so that we can quickly test any SharePoint rest api methods using PnP JS.
|
||||||
|
|
||||||
|
Feel free to connect on twitter:@siddh_me or twitter:@sanganikunj for any details.
|
||||||
|
|
||||||
|
### Notes on Webpart
|
||||||
|
|
||||||
|
* WebPart to test PnP JS SharePoint package methods
|
||||||
|
* Response will be displayed in a code format.
|
||||||
|
* By default, it will run in context of current site collection.
|
||||||
|
* Optional option to enter diffrent site collection or sub site url to set PnP JS context to diffrent url(other than current context)
|
||||||
|
* Support for Get and Post methods.
|
||||||
|
* Option to see some examples which can be copied and tested just by changing list/libraries/column names.
|
||||||
|
|
||||||
|
## Used SharePoint Framework Version
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Applies to
|
||||||
|
|
||||||
|
* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
|
||||||
|
* [Office 365 tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
|
||||||
|
|
||||||
|
### Package and Deploy
|
||||||
|
|
||||||
|
Note - If you don't want to build and package on your own, you can directly download package at this [location](./sharepoint/solution/react-pnpjsexplorer.sppkg) and upload to app catalog and install app on required site collection. Skip below steps and directly go to How to use section.
|
||||||
|
Clone the solution and make sure there is no error before packaging. Try first on local work bench.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone the repo
|
||||||
|
npm i
|
||||||
|
gulp serve
|
||||||
|
```
|
||||||
|
- Execute the following gulp task to bundle your solution. This executes a release build of your project by using a dynamic label as the host URL for your assets. This URL is automatically updated based on your tenant CDN settings:
|
||||||
|
```bash
|
||||||
|
gulp bundle --ship
|
||||||
|
```
|
||||||
|
- Execute the following task to package your solution. This creates an updated webpart.sppkg package on the sharepoint/solution folder.
|
||||||
|
```bash
|
||||||
|
gulp package-solution --ship
|
||||||
|
```
|
||||||
|
- Upload or drag and drop the newly created client-side solution package to the app catalog in your tenant.
|
||||||
|
- Based on your tenant settings, if you would not have CDN enabled in your tenant, and the includeClientSideAssets setting would be true in the package-solution.json, the loading URL for the assets would be dynamically updated and pointing directly to the ClientSideAssets folder located in the app catalog site collection.
|
||||||
|
|
||||||
|
|
||||||
|
## Solution
|
||||||
|
|
||||||
|
Solution|Author(s)
|
||||||
|
--------|---------
|
||||||
|
react-PnPjsTester | [Siddharth Vaghasia](https://www.linkedin.com/in/siddharthvaghasia/) and [Kunj Sangani](https://www.linkedin.com/in/kunj-sangani/)
|
||||||
|
|
||||||
|
## Version history
|
||||||
|
|
||||||
|
Version|Date|Comments
|
||||||
|
-------|----|--------
|
||||||
|
1.0.0|Aug 14, 2020|Initial Release
|
||||||
|
|
||||||
|
|
||||||
|
## 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.**
|
||||||
|
|
||||||
|
For any issue or help, Buzz us on twitter:([siddh_me](https://twitter.com/siddh_me/)) or ([sanganikunj](https://twitter.com/sanganikunj))
|
||||||
|
|
||||||
|
> Sharing is caring!
|
||||||
|
|
||||||
|
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-pnpjsexplorer" />
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||||
|
"version": "2.0",
|
||||||
|
"bundles": {
|
||||||
|
"react-pn-pjs-tester-web-part": {
|
||||||
|
"components": [
|
||||||
|
{
|
||||||
|
"entrypoint": "./lib/webparts/reactPnPjsTester/ReactPnPjsTesterWebPart.js",
|
||||||
|
"manifest": "./src/webparts/reactPnPjsTester/ReactPnPjsTesterWebPart.manifest.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"externals": {},
|
||||||
|
"localizedResources": {
|
||||||
|
"ReactPnPjsTesterWebPartStrings": "lib/webparts/reactPnPjsTester/loc/{locale}.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||||
|
"deployCdnPath": "temp/deploy"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||||
|
"workingDir": "./temp/deploy/",
|
||||||
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
|
"container": "react-pnpjsexplorer",
|
||||||
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||||
|
"solution": {
|
||||||
|
"name": "react-pnpjsexplorer-client-side-solution",
|
||||||
|
"id": "a41b7fa8-313e-40d1-ae85-1d85baddecf5",
|
||||||
|
"version": "2.0.0.0",
|
||||||
|
"includeClientSideAssets": true,
|
||||||
|
"isDomainIsolated": false
|
||||||
|
},
|
||||||
|
"paths": {
|
||||||
|
"zippedPackage": "solution/react-pnpjsexplorer.sppkg"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||||
|
"port": 4321,
|
||||||
|
"https": true,
|
||||||
|
"initialPage": "https://localhost:5432/workbench",
|
||||||
|
"api": {
|
||||||
|
"port": 5432,
|
||||||
|
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||||
|
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
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(require('gulp'));
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,46 @@
|
||||||
|
{
|
||||||
|
"name": "react-pnpjsexplorer",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"main": "lib/index.js",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "gulp bundle",
|
||||||
|
"clean": "gulp clean",
|
||||||
|
"test": "gulp test"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@microsoft/sp-core-library": "1.10.0",
|
||||||
|
"@microsoft/sp-lodash-subset": "1.10.0",
|
||||||
|
"@microsoft/sp-office-ui-fabric-core": "1.10.0",
|
||||||
|
"@microsoft/sp-property-pane": "1.10.0",
|
||||||
|
"@microsoft/sp-webpart-base": "1.10.0",
|
||||||
|
"@pnp/sp": "^2.0.5",
|
||||||
|
"@types/es6-promise": "0.0.33",
|
||||||
|
"@types/react": "16.8.8",
|
||||||
|
"@types/react-dom": "16.8.3",
|
||||||
|
"@types/webpack-env": "1.13.1",
|
||||||
|
"ace-builds": "^1.4.11",
|
||||||
|
"office-ui-fabric-react": "6.189.2",
|
||||||
|
"react": "16.8.5",
|
||||||
|
"react-ace": "^9.1.1",
|
||||||
|
"react-dom": "16.8.5",
|
||||||
|
"react-json-view": "^1.19.1"
|
||||||
|
},
|
||||||
|
"resolutions": {
|
||||||
|
"@types/react": "16.8.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@microsoft/sp-build-web": "1.10.0",
|
||||||
|
"@microsoft/sp-tslint-rules": "1.10.0",
|
||||||
|
"@microsoft/sp-module-interfaces": "1.10.0",
|
||||||
|
"@microsoft/sp-webpart-workbench": "1.10.0",
|
||||||
|
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
|
||||||
|
"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
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||||
|
"id": "9dbf4d65-e0cc-4462-801a-2b96ea28de5a",
|
||||||
|
"alias": "ReactPnPjsTesterWebPart",
|
||||||
|
"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,
|
||||||
|
"supportedHosts": ["SharePointWebPart"],
|
||||||
|
|
||||||
|
"preconfiguredEntries": [{
|
||||||
|
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||||
|
"group": { "default": "Other" },
|
||||||
|
"title": { "default": "react-PnPjsTester" },
|
||||||
|
"description": { "default": "This webpart will help in executing multiple rest api using PnPjs this would be helpful for developers" },
|
||||||
|
"officeFabricIconFontName": "Page",
|
||||||
|
"properties": {
|
||||||
|
"description": "react-PnPjsTester"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import * as ReactDom from 'react-dom';
|
||||||
|
import { Version } from '@microsoft/sp-core-library';
|
||||||
|
import {
|
||||||
|
IPropertyPaneConfiguration,
|
||||||
|
PropertyPaneTextField
|
||||||
|
} from '@microsoft/sp-property-pane';
|
||||||
|
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
||||||
|
|
||||||
|
import * as strings from 'ReactPnPjsTesterWebPartStrings';
|
||||||
|
import ReactPnPjsTester from './components/ReactPnPjsTester';
|
||||||
|
import { IReactPnPjsTesterProps } from './components/IReactPnPjsTesterProps';
|
||||||
|
|
||||||
|
export interface IReactPnPjsTesterWebPartProps {
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class ReactPnPjsTesterWebPart extends BaseClientSideWebPart <IReactPnPjsTesterWebPartProps> {
|
||||||
|
|
||||||
|
public render(): void {
|
||||||
|
const element: React.ReactElement<IReactPnPjsTesterProps> = React.createElement(
|
||||||
|
ReactPnPjsTester,
|
||||||
|
{
|
||||||
|
description: this.properties.description,
|
||||||
|
spcontext:this.context
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
ReactDom.render(element, this.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected onDispose(): void {
|
||||||
|
ReactDom.unmountComponentAtNode(this.domElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
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,6 @@
|
||||||
|
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||||
|
|
||||||
|
export interface IReactPnPjsTesterProps {
|
||||||
|
description: string;
|
||||||
|
spcontext:WebPartContext;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
@import "~office-ui-fabric-react/dist/sass/References.scss";
|
||||||
|
|
||||||
|
.reactPnPjsTester {
|
||||||
|
.container {
|
||||||
|
// max-width: 800px;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
.jsonviewcont{
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
@include ms-Grid-row;
|
||||||
|
// @include ms-fontColor-white;
|
||||||
|
// background-color: $ms-color-themeDark;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
@include ms-Grid-col;
|
||||||
|
@include ms-lg12;
|
||||||
|
@include ms-xl12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col1 {
|
||||||
|
@include ms-Grid-col;
|
||||||
|
@include ms-sm2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col11 {
|
||||||
|
@include ms-Grid-col;
|
||||||
|
@include ms-sm10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
@include ms-font-xl;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subTitle {
|
||||||
|
@include ms-font-l;
|
||||||
|
@include ms-fontColor-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
@include ms-font-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
.methodSelector {
|
||||||
|
:global {
|
||||||
|
.ms-Dropdown {
|
||||||
|
&:focus {
|
||||||
|
color: $ms-color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-Dropdown-title {
|
||||||
|
background-color: $ms-color-themePrimary;
|
||||||
|
color: $ms-color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ms-Dropdown-caretDownWrapper i {
|
||||||
|
color: $ms-color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse {
|
||||||
|
float: right;
|
||||||
|
margin-top: -20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.codeZone {
|
||||||
|
border: 1px solid;
|
||||||
|
border-color: $ms-color-neutralLight;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
// Our button
|
||||||
|
text-decoration: none;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:global {
|
||||||
|
.pageContent_ecefc8ba {
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
.ms-Button-label {
|
||||||
|
width: 440px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,333 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import styles from "./ReactPnPjsTester.module.scss";
|
||||||
|
import { IReactPnPjsTesterProps } from "./IReactPnPjsTesterProps";
|
||||||
|
import { sp } from "@pnp/sp/presets/all";
|
||||||
|
import {
|
||||||
|
TextField,
|
||||||
|
Panel,
|
||||||
|
PanelType,
|
||||||
|
Checkbox,
|
||||||
|
Icon,
|
||||||
|
Dropdown,
|
||||||
|
TooltipHost,
|
||||||
|
DirectionalHint,
|
||||||
|
Toggle,
|
||||||
|
Stack,
|
||||||
|
} from "office-ui-fabric-react";
|
||||||
|
// import AceEditor from "react-ace";
|
||||||
|
import { DefaultButton, ActionButton, IconButton } from "office-ui-fabric-react/lib/Button";
|
||||||
|
// import "ace-builds/src-noconflict/mode-json";
|
||||||
|
// import "ace-builds/src-noconflict/theme-github";
|
||||||
|
import ReactJson from "react-json-view";
|
||||||
|
|
||||||
|
const samples:ISamples = require("./Samples.json");
|
||||||
|
|
||||||
|
export interface ISamples{
|
||||||
|
samples:any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IReactPnPjsTesterState {
|
||||||
|
jsonResponse: any;
|
||||||
|
pnpCommand: any;
|
||||||
|
displayDataTypes: boolean;
|
||||||
|
displayObjectSize: boolean;
|
||||||
|
enableClipboard: boolean;
|
||||||
|
openPanel: boolean;
|
||||||
|
isError: boolean;
|
||||||
|
errorMessage: any;
|
||||||
|
siteUrl: string;
|
||||||
|
isUpdate: boolean;
|
||||||
|
showAddUpdateInformation: boolean;
|
||||||
|
defaultCollapsed: boolean;
|
||||||
|
requestType: string;
|
||||||
|
isOtherSite: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
var spObj = null;
|
||||||
|
|
||||||
|
export default class ReactPnPjsTester extends React.Component<
|
||||||
|
IReactPnPjsTesterProps,
|
||||||
|
IReactPnPjsTesterState
|
||||||
|
> {
|
||||||
|
private addCommand =
|
||||||
|
'sp.web.lists.getByTitle("CustomList").items.add({Title: "PnpJS Explorer"})';
|
||||||
|
private exampleJson = samples.samples;
|
||||||
|
|
||||||
|
// constructor to intialize state and pnp sp object.
|
||||||
|
constructor(props: IReactPnPjsTesterProps, state: IReactPnPjsTesterState) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
requestType: "GET",
|
||||||
|
jsonResponse: null,
|
||||||
|
pnpCommand: null,
|
||||||
|
displayDataTypes: false,
|
||||||
|
displayObjectSize: false,
|
||||||
|
enableClipboard: false,
|
||||||
|
openPanel: false,
|
||||||
|
isError: false,
|
||||||
|
errorMessage: null,
|
||||||
|
siteUrl: "",
|
||||||
|
isUpdate: false,
|
||||||
|
showAddUpdateInformation: false,
|
||||||
|
defaultCollapsed: false,
|
||||||
|
isOtherSite: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private _reqBodyChanged = (val: string) => {
|
||||||
|
// this.setState({
|
||||||
|
// jsonResponse: val,
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): React.ReactElement<IReactPnPjsTesterProps> {
|
||||||
|
return (
|
||||||
|
<div className={styles.reactPnPjsTester}>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.row}>
|
||||||
|
<div className={styles.column}>
|
||||||
|
<TooltipHost
|
||||||
|
content="This webpart will allow SPFx developers to test PnPjs Sharepoint methods and it displays response in JSON viewer to identify properties/attributes returned by method"
|
||||||
|
id="tooltip"
|
||||||
|
directionalHint={DirectionalHint.rightCenter}
|
||||||
|
calloutProps={{ gapSpace: 0 }}
|
||||||
|
styles={{ root: { display: "inline-block" } }}
|
||||||
|
>
|
||||||
|
<h2 style={{ cursor: "pointer" }}>PnPjs Tester
|
||||||
|
<IconButton iconProps={{ iconName: 'InfoSolid' }} title="InfoSolid" ariaLabel="InfoSolid" />
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
</TooltipHost>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.row}>
|
||||||
|
<div className={styles.col1}>
|
||||||
|
<Dropdown
|
||||||
|
selectedKey={this.state.requestType}
|
||||||
|
onChanged={(val) => {
|
||||||
|
let isUpdate = val.key === "POST" ? true : false;
|
||||||
|
this.setState({ isUpdate: isUpdate, requestType: val.text });
|
||||||
|
}}
|
||||||
|
className={styles.methodSelector}
|
||||||
|
options={[
|
||||||
|
{ key: "GET", text: "GET" },
|
||||||
|
{ key: "POST", text: "POST" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={styles.col11}>
|
||||||
|
<TextField
|
||||||
|
value={this.state.pnpCommand}
|
||||||
|
placeholder="Enter your query here e.g. sp.web.select('Title')"
|
||||||
|
onChange={(e) => this.setCommand(e.target)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.row}>
|
||||||
|
<div className={styles.column}>
|
||||||
|
<Checkbox
|
||||||
|
label="Use for other Site collection or Subsite"
|
||||||
|
onChange={(event, checked) => {
|
||||||
|
this.setState({ isOtherSite: checked });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={styles.column}
|
||||||
|
style={{
|
||||||
|
display: this.state.isOtherSite ? "block" : "none",
|
||||||
|
marginTop: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
placeholder="Enter site collection or subsite url"
|
||||||
|
value={this.state.siteUrl}
|
||||||
|
onChange={(e) => this.setSiteUrl(e.target)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.row}>
|
||||||
|
<div className={styles.column}>
|
||||||
|
<Panel
|
||||||
|
isLightDismiss
|
||||||
|
isOpen={this.state.openPanel}
|
||||||
|
headerText="Samples"
|
||||||
|
closeButtonAriaLabel="Close"
|
||||||
|
type={PanelType.custom}
|
||||||
|
customWidth={"600px"}
|
||||||
|
>
|
||||||
|
<p>{this.getPanelCommands()}</p>
|
||||||
|
</Panel>
|
||||||
|
|
||||||
|
<DefaultButton
|
||||||
|
onClick={() => this.executeCommand()}
|
||||||
|
className={styles.button}
|
||||||
|
>
|
||||||
|
<Icon className={styles.icon} iconName="LightningBolt" /> Run
|
||||||
|
query
|
||||||
|
</DefaultButton>
|
||||||
|
<DefaultButton
|
||||||
|
onClick={() => {
|
||||||
|
this.setState({ openPanel: true });
|
||||||
|
}}
|
||||||
|
className={styles.button}
|
||||||
|
>
|
||||||
|
<Icon className={styles.icon} iconName="ReadingMode"></Icon>
|
||||||
|
Samples
|
||||||
|
</DefaultButton>
|
||||||
|
<DefaultButton
|
||||||
|
onClick={() => {
|
||||||
|
window.open("https://pnp.github.io/pnpjs/sp/", "__blank");
|
||||||
|
}}
|
||||||
|
className={styles.button}
|
||||||
|
>
|
||||||
|
<Icon className={styles.icon} iconName="Info"></Icon>About PnPjs
|
||||||
|
</DefaultButton>
|
||||||
|
{this.state.jsonResponse && (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
{/* <Checkbox
|
||||||
|
label="Wrap code"
|
||||||
|
className={styles.collapse}
|
||||||
|
onChange={() => this.onCollapseAll()}
|
||||||
|
checked={this.state.defaultCollapsed}
|
||||||
|
|
||||||
|
/> */}
|
||||||
|
<br></br>
|
||||||
|
{this.state.jsonResponse &&
|
||||||
|
<React.Fragment>
|
||||||
|
<Stack horizontal tokens={{ childrenGap: 25 }}>
|
||||||
|
<Toggle checked={this.state.displayDataTypes} label="Show Data Types" inlineLabel onChange={() => { this.setState({ displayDataTypes: !this.state.displayDataTypes }); }} />
|
||||||
|
<Toggle checked={this.state.displayObjectSize} label="Show Count" inlineLabel onChange={() => { this.setState({ displayObjectSize: !this.state.displayObjectSize }); }} />
|
||||||
|
<Toggle checked={this.state.enableClipboard} label="Enable Clipboard" inlineLabel onChange={() => { this.setState({ enableClipboard: !this.state.enableClipboard }); }}/>
|
||||||
|
<Toggle checked={this.state.defaultCollapsed} label="Collapse All" inlineLabel onChange={()=>this.onCollapseAll()}/>
|
||||||
|
{/* <Checkbox className={styles.collapse} label="Collapse All" /> */}
|
||||||
|
</Stack>
|
||||||
|
<div className={styles.jsonviewcont}>
|
||||||
|
<ReactJson src={this.state.jsonResponse} collapsed={this.state.defaultCollapsed} displayDataTypes={this.state.displayDataTypes} displayObjectSize={this.state.displayObjectSize} enableClipboard={this.state.enableClipboard} />
|
||||||
|
</div>
|
||||||
|
</React.Fragment>
|
||||||
|
}
|
||||||
|
{this.state.errorMessage &&
|
||||||
|
<div>{JSON.stringify(this.state.errorMessage)} </div>
|
||||||
|
}
|
||||||
|
|
||||||
|
{/* <AceEditor
|
||||||
|
mode="json"
|
||||||
|
theme="github"
|
||||||
|
className={styles.codeZone}
|
||||||
|
value={JSON.stringify(this.state.jsonResponse, null, 2)}
|
||||||
|
onChange={this._reqBodyChanged}
|
||||||
|
highlightActiveLine={true}
|
||||||
|
editorProps={{ $blockScrolling: true }}
|
||||||
|
setOptions={{
|
||||||
|
wrap: this.state.defaultCollapsed,
|
||||||
|
showPrintMargin: false,
|
||||||
|
}}
|
||||||
|
height="500px"
|
||||||
|
width="100%"
|
||||||
|
/> */}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{this.state.errorMessage && (
|
||||||
|
<div>{JSON.stringify(this.state.errorMessage)} </div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private onCollapseAll = () => {
|
||||||
|
this.setState({ defaultCollapsed: !this.state.defaultCollapsed });
|
||||||
|
}
|
||||||
|
|
||||||
|
private setCommand = (element) => {
|
||||||
|
var val = (element as HTMLInputElement).value;
|
||||||
|
this.setState({ pnpCommand: val });
|
||||||
|
}
|
||||||
|
|
||||||
|
private setSiteUrl = (element) => {
|
||||||
|
var val = (element as HTMLInputElement).value;
|
||||||
|
this.setState({ siteUrl: val });
|
||||||
|
}
|
||||||
|
|
||||||
|
private setPnP = () => {
|
||||||
|
spObj = null;
|
||||||
|
if (this.state.siteUrl != "" && this.state.isOtherSite) {
|
||||||
|
sp.setup({
|
||||||
|
sp: {
|
||||||
|
headers: {
|
||||||
|
Accept: "application/json;odata=minimalmetadata",
|
||||||
|
},
|
||||||
|
baseUrl: this.state.siteUrl,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
sp.setup({
|
||||||
|
spfxContext: this.props.spcontext
|
||||||
|
});
|
||||||
|
}
|
||||||
|
spObj = sp;
|
||||||
|
}
|
||||||
|
|
||||||
|
private executeCommand() {
|
||||||
|
this.setPnP();
|
||||||
|
this.setState({ jsonResponse: null, errorMessage: null,openPanel:false });
|
||||||
|
var command = this.state.pnpCommand;
|
||||||
|
command = command.replace("sp", "spObj");
|
||||||
|
command = command.replace(/"/g, "'");
|
||||||
|
command = command.replace(".get()", "");
|
||||||
|
command = command.replace(";", "");
|
||||||
|
command = command.replace("()", "");
|
||||||
|
|
||||||
|
var evalString = "try{" + command;
|
||||||
|
|
||||||
|
if (!this.state.isUpdate) {
|
||||||
|
evalString += "()";
|
||||||
|
}
|
||||||
|
|
||||||
|
evalString +=
|
||||||
|
".then(\
|
||||||
|
(result) => {\
|
||||||
|
debugger;\
|
||||||
|
console.log(result);\
|
||||||
|
this.setState({jsonResponse:result});\
|
||||||
|
}\
|
||||||
|
)\
|
||||||
|
.catch(\
|
||||||
|
(error) => {\
|
||||||
|
debugger;\
|
||||||
|
console.log(error);\
|
||||||
|
this.setState({jsonResponse:{error:error.message}});\
|
||||||
|
}\
|
||||||
|
);\
|
||||||
|
}\
|
||||||
|
catch(e){\
|
||||||
|
alert(e);\
|
||||||
|
}";
|
||||||
|
eval(evalString);
|
||||||
|
}
|
||||||
|
|
||||||
|
private getPanelCommands = () => {
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
{this.exampleJson.map((item: any, index: number) => (
|
||||||
|
<div>
|
||||||
|
<ActionButton
|
||||||
|
onClick={() => {
|
||||||
|
this.setState({ pnpCommand: item.command, openPanel: false });
|
||||||
|
}}
|
||||||
|
iconProps={{ iconName: "Copy" }}
|
||||||
|
title="Copy"
|
||||||
|
ariaLabel="Copy"
|
||||||
|
>
|
||||||
|
{item.command}
|
||||||
|
</ActionButton>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
{
|
||||||
|
"samples": [
|
||||||
|
{
|
||||||
|
"command": "sp.web.select('Title')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.currentUser.get()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.lists.getByTitle('My List').items"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.lists.getByTitle('My List').items.select('Title','Description').top(5).orderBy('Modified', true).get()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.lists.getByTitle('My List').items.getById(1).get()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.lists.getByTitle('BigList').items.getAll()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.lists.getByTitle('LookupList').items.getById(1).select('Title','Lookup/Title','Lookup/ID').expand('Lookup').get()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.lists.getByTitle('Pages').items.select('Title','FileRef','FieldValuesAsText/MetaInfo').expand('FieldValuesAsText').get()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.lists.getByTitle('CustomList').items.add({Title: 'PnpJS Explorer'})"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.lists.getByTitle('My List').items.getById(1).delete()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.associatedVisitorGroup()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.lists.getByTitle('My List').views()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.lists.getByTitle('My List').views.getByTitle('All Items')()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.userCustomActions()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"command": "sp.web.lists.getByTitle('Documents').rootFolder.folders()"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
define([], function() {
|
||||||
|
return {
|
||||||
|
"PropertyPaneDescription": "Description",
|
||||||
|
"BasicGroupName": "Group Name",
|
||||||
|
"DescriptionFieldLabel": "Description Field"
|
||||||
|
}
|
||||||
|
});
|
||||||
10
samples/react-pnpjsexplorer/src/webparts/reactPnPjsTester/loc/mystrings.d.ts
vendored
Normal file
10
samples/react-pnpjsexplorer/src/webparts/reactPnPjsTester/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
declare interface IReactPnPjsTesterWebPartStrings {
|
||||||
|
PropertyPaneDescription: string;
|
||||||
|
BasicGroupName: string;
|
||||||
|
DescriptionFieldLabel: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'ReactPnPjsTesterWebPartStrings' {
|
||||||
|
const strings: IReactPnPjsTesterWebPartStrings;
|
||||||
|
export = strings;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
{
|
||||||
|
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"jsx": "react",
|
||||||
|
"declaration": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"outDir": "lib",
|
||||||
|
"inlineSources": false,
|
||||||
|
"strictNullChecks": false,
|
||||||
|
"noUnusedLocals": false,
|
||||||
|
"typeRoots": [
|
||||||
|
"./node_modules/@types",
|
||||||
|
"./node_modules/@microsoft"
|
||||||
|
],
|
||||||
|
"types": [
|
||||||
|
"es6-promise",
|
||||||
|
"webpack-env"
|
||||||
|
],
|
||||||
|
"lib": [
|
||||||
|
"es5",
|
||||||
|
"dom",
|
||||||
|
"es2015.collection"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"lib"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"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
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue