Updated the api-scopes tutorial sample to SPFx v1.6.0 (#617)
This commit is contained in:
Waldek Mastykarz
Vesa Juvonen
parent
e7db64e016
commit
ec1c77c057
|
|
@ -1,8 +1,11 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.4.1",
|
||||
"version": "1.6.0",
|
||||
"libraryName": "spfx-api-scopes-tutorial",
|
||||
"libraryId": "6b58cc7d-badc-4721-bfe2-9e4d91efd07c",
|
||||
"environment": "spo"
|
||||
"environment": "spo",
|
||||
"isCreatingSolution": true,
|
||||
"packageManager": "npm",
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@ This sub folders contains a client-side project that is related to the tutorial
|
|||
|
||||
| Version | Date | Comments |
|
||||
| ------------- | ------------- | ------------- |
|
||||
| 1.0.0 | August 28th 2018 | Updated sample to SPFx v1.6.0 |
|
||||
| 1.0.0 | February 18th 2018 | Initial release |
|
||||
|
||||
## Disclaimer
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"graph-consumer-web-part": {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "spfx-api-scopes-tutorial",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "spfx-api-scopes-tutorial-client-side-solution",
|
||||
"id": "6b58cc7d-badc-4721-bfe2-9e4d91efd07c",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
|
||||
// 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-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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,23 +11,25 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "15.6.2",
|
||||
"react-dom": "15.6.2",
|
||||
"@microsoft/sp-core-library": "1.6.0",
|
||||
"@microsoft/sp-lodash-subset": "1.6.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.6.0",
|
||||
"@microsoft/sp-webpart-base": "1.6.0",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "15.6.6",
|
||||
"@types/react-dom": "15.5.6",
|
||||
"@microsoft/sp-core-library": "~1.4.1",
|
||||
"@microsoft/sp-webpart-base": "~1.4.1",
|
||||
"@microsoft/sp-lodash-subset": "~1.4.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "~1.4.1",
|
||||
"@types/webpack-env": ">=1.12.1 <1.14.0"
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"react": "15.6.2",
|
||||
"react-dom": "15.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "~1.4.1",
|
||||
"@microsoft/sp-module-interfaces": "~1.4.1",
|
||||
"@microsoft/sp-webpart-workbench": "~1.4.1",
|
||||
"@microsoft/sp-build-web": "1.6.0",
|
||||
"@microsoft/sp-module-interfaces": "1.6.0",
|
||||
"@microsoft/sp-webpart-workbench": "1.6.0",
|
||||
"@types/chai": "3.4.34",
|
||||
"@types/mocha": "2.2.38",
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1",
|
||||
"@types/chai": ">=3.4.34 <3.6.0",
|
||||
"@types/mocha": ">=2.2.33 <2.6.0",
|
||||
"ajv": "~5.2.2"
|
||||
"tslint-microsoft-contrib": "5.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "0c2bdcfd-b8ea-474d-acea-a1c17bff2310",
|
||||
"alias": "GraphConsumerWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@ import {
|
|||
SelectionMode
|
||||
} from 'office-ui-fabric-react';
|
||||
|
||||
import { AadHttpClient } from "@microsoft/sp-http";
|
||||
import { MSGraphClient } from "@microsoft/sp-client-preview";
|
||||
import { AadHttpClient, MSGraphClient } from "@microsoft/sp-http";
|
||||
|
||||
// Configure the columns for the DetailsList component
|
||||
let _usersListColumns = [
|
||||
|
|
@ -153,17 +152,16 @@ export default class GraphConsumer extends React.Component<IGraphConsumerProps,
|
|||
console.log("Using _searchWithAad() method");
|
||||
|
||||
// Using Graph here, but any 1st or 3rd party REST API that requires Azure AD auth can be used here.
|
||||
const aadClient: AadHttpClient = new AadHttpClient(
|
||||
this.props.context.serviceScope,
|
||||
"https://graph.microsoft.com"
|
||||
);
|
||||
|
||||
// Search for the users with givenName, surname, or displayName equal to the searchFor value
|
||||
aadClient
|
||||
.get(
|
||||
`https://graph.microsoft.com/v1.0/users?$select=displayName,mail,userPrincipalName&$filter=(givenName%20eq%20'${escape(this.state.searchFor)}')%20or%20(surname%20eq%20'${escape(this.state.searchFor)}')%20or%20(displayName%20eq%20'${escape(this.state.searchFor)}')`,
|
||||
AadHttpClient.configurations.v1
|
||||
)
|
||||
this.props.context.aadHttpClientFactory
|
||||
.getClient("https://graph.microsoft.com")
|
||||
.then((client: AadHttpClient) => {
|
||||
// Search for the users with givenName, surname, or displayName equal to the searchFor value
|
||||
return client
|
||||
.get(
|
||||
`https://graph.microsoft.com/v1.0/users?$select=displayName,mail,userPrincipalName&$filter=(givenName%20eq%20'${escape(this.state.searchFor)}')%20or%20(surname%20eq%20'${escape(this.state.searchFor)}')%20or%20(displayName%20eq%20'${escape(this.state.searchFor)}')`,
|
||||
AadHttpClient.configurations.v1
|
||||
);
|
||||
})
|
||||
.then(response => {
|
||||
return response.json();
|
||||
})
|
||||
|
|
@ -201,41 +199,41 @@ export default class GraphConsumer extends React.Component<IGraphConsumerProps,
|
|||
// Log the current operation
|
||||
console.log("Using _searchWithGraph() method");
|
||||
|
||||
const graphClient: MSGraphClient = this.props.context.serviceScope.consume(
|
||||
MSGraphClient.serviceKey
|
||||
);
|
||||
this.props.context.msGraphClientFactory
|
||||
.getClient()
|
||||
.then((client: MSGraphClient) => {
|
||||
// From https://github.com/microsoftgraph/msgraph-sdk-javascript sample
|
||||
client
|
||||
.api("users")
|
||||
.version("v1.0")
|
||||
.select("displayName,mail,userPrincipalName")
|
||||
.filter(`(givenName eq '${escape(this.state.searchFor)}') or (surname eq '${escape(this.state.searchFor)}') or (displayName eq '${escape(this.state.searchFor)}')`)
|
||||
.get((err, res) => {
|
||||
|
||||
// From https://github.com/microsoftgraph/msgraph-sdk-javascript sample
|
||||
graphClient
|
||||
.api("users")
|
||||
.version("v1.0")
|
||||
.select("displayName,mail,userPrincipalName")
|
||||
.filter(`(givenName eq '${escape(this.state.searchFor)}') or (surname eq '${escape(this.state.searchFor)}') or (displayName eq '${escape(this.state.searchFor)}')`)
|
||||
.get((err, res) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
// Prepare the output array
|
||||
var users: Array<IUserItem> = new Array<IUserItem>();
|
||||
|
||||
// Prepare the output array
|
||||
var users: Array<IUserItem> = new Array<IUserItem>();
|
||||
// Map the JSON response to the output array
|
||||
res.value.map((item: any) => {
|
||||
users.push( {
|
||||
displayName: item.displayName,
|
||||
mail: item.mail,
|
||||
userPrincipalName: item.userPrincipalName,
|
||||
});
|
||||
});
|
||||
|
||||
// Map the JSON response to the output array
|
||||
res.value.map((item: any) => {
|
||||
users.push( {
|
||||
displayName: item.displayName,
|
||||
mail: item.mail,
|
||||
userPrincipalName: item.userPrincipalName,
|
||||
// Update the component state accordingly to the result
|
||||
this.setState(
|
||||
{
|
||||
users: users,
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Update the component state accordingly to the result
|
||||
this.setState(
|
||||
{
|
||||
users: users,
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@
|
|||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "commonjs",
|
||||
"module": "esnext",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"skipLibCheck": true,
|
||||
"outDir": "lib",
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
|
|
@ -21,5 +23,12 @@
|
|||
"dom",
|
||||
"es2015.collection"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"lib"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"rulesDirectory": [
|
||||
"tslint-microsoft-contrib"
|
||||
],
|
||||
"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