pnp / sp-dev-fx-webparts Goto Github PK

View Code? Open in Web Editor NEW

2.0K 224.0 3.8K 2.36 GB

SharePoint Framework web part, Teams tab, personal app, app page samples

Home Page: http://aka.ms/spfx-webparts

License: MIT License

JavaScript 24.97% TypeScript 53.14% SCSS 19.75% Shell 2.14%

sharepoint-framework sharepoint-workbench react tutorial angularjs knockoutjs pnp-js-core hacktoberfest

sp-dev-fx-webparts's Introduction

SharePoint Framework Client-Side Web Part Samples & Tutorial Materials

This repository contains community samples that demonstrate different usage patterns for the SharePoint Framework client-side web parts.

We do welcome community contributions to the samples folder in this repository for demonstrating different use cases with SharePoint Framework. Notice that if you use 3rd party libraries, please make sure that library license allows distributions of it as part of your sample.

SharePoint client-side web parts are controls that appear inside a SharePoint page but run locally in the browser. They're the building blocks of pages that appear on a SharePoint site. You can build client-side web parts using modern script development tools and the SharePoint workbench (a development test surface), and you can deploy your client-side web parts to classic web part pages in Office 365 tenants. In addition to plain JavaScript projects, you can build web parts alongside common scripting frameworks, such as AngularJS and React. For example, you can use React along with components from Office UI Fabric React to quickly create experiences based on the same components used in Office 365.

Have issues or questions?

Please use following logic on submitting your questions or issues to right location to ensure that they are noticed and addressed as soon as possible.

You have general question or challenge with SPFx - use sp-dev-docs repository issue list.
You have issue on specific web part or sample - use issue list in this repository.

Additional resources

Using the samples

To build and start using these projects, you'll need to clone and build the projects.

Clone this repository by executing the following command in your console:

git clone https://github.com/pnp/sp-dev-fx-webparts.git

Navigate to the cloned repository folder which should be the same as the repository name:

cd sp-dev-fx-webparts

To access the samples use the following command, where you replace sample-folder-name with the name of the sample you want to access.

cd samples
cd sample-folder-name

Ensure that you are using the right version of node for the solution. You can do so by consulting the README.md file in the sample folder you are interested in. You will see a node version recommendation; you can also consult the SPFx Compatibility Matrix at https://aka.ms/spfx-matrix to find the supported versions of node for the version of SPFx used by the sample.

The sample folder may also contain a .nvmrc file, which is a version specifier that can be used with a node version manager such as nvm or nvs, ensure that you are using the right version of node for the project.

To switch to the correct version of node using nvm, run the following command in the folder containing the .nvmrc file:

nvm use

If using nvs, run the following command in the folder containing the .nvmrc file:

nvs use

Once the correct version of node is in use, run the following command to install the npm packages:

npm install

This will install the required npm packages and dependencies to build and run the client-side project.

Once the npm packages are installed, run the following command to preview your web parts in SharePoint Workbench:

gulp serve

Authors

This repository's contributors are all community members who volunteered their time to share code samples. Work is done as an open source community project, with each sample contained in their own solution.

Contributions

These samples are direct from the feature teams, SharePoint PnP core team (http://aka.ms/m365pnp) or shared by the community. We welcome your input on issues and suggestions for new samples. We do also welcome community contributions around the client-side web parts. If you have any questions, just let us know.

Please have a look on our Contribution Guidance before submitting your pull requests, so that we can get your contribution processed as fast as possible.

Code of Conduct

This repository has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Sharing is caring!

sp-dev-fx-webparts's People

Contributors

Stargazers

Watchers

Forkers

magnusdanielson vesajuvonen estruyf luismanez waldekmastykarz rolandoldengarm yusongliu paolopia aurelienprevot shivapshankar jakecusack stuartnz aboredman jtlivio sksnips adriandiaz81 wictorwilen davidhartman nalaswad dipetersen ajixumuk arnabchat90 dinushak gary-payne igorminar danny-engelman kevicency ashelopukho timmygilissen camiloborges frederick-s acornsoft matrixgoh suleymana rohit404404 ma9004 garylstewart vladimiroluis marqueezi xtrava phillipharding dipongkor aymentalbi satarvr snakeroel anassem clardo tomresing modulexcite ectms jnribelles pieter-veenstra kolliparachandra mauricionr alphaman83 ntarasiuk discalexyang abpuro vikasadak vieirak philbritton r-akshay jasonwusc ahoeyl davidkroese jacek-eq simonagren s-kainet rgarita chakkaradeep annelirymert kleopatra999 laneyvb jholah 1337boby jai2033shankar reitert ayyanna gamalion lohjiasin jonathanhotono gruizdev timothydonato srikanth449 jcoleman-pcprofessional mattlk13 legonzian wobba franz908 mjorda01 dbarros-storm ericleigh007 rgueldenpfennig jsanchep duythanhvo web-a-bzh reisdone iiza brentless sidjustsid

sp-dev-fx-webparts's Issues

CRUD sample fails on npm install

Expected or Desired Behavior

Doing npm install for the sharepoint-crud sample should work properly after execution

Observed Behavior

Getting exceptions on execution

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

Steps to Reproduce

Run npm install on the sharepoint-crud sample. Tested with Windows 10.

react-real-time question

Category

[ x] Question
Bug
Enhancement

In the use case where you have multiple newsfeed lists on different sites, is there a way to pass not only the itemId, but also the listId of the item, and site url in a logic app? would a custom connector do this? or are we currently stuck creating a webhook for this?

Thanks!

Helloworld webpart tutorial typescript compile errors in build task

Expected or Desired Behavior

Following HelloWorld tutorial, attempting to build project "gulp serve" without errors.

Observed Behavior

On a Windows dev machine, after setting up dev environment and scaffolding project with Yeoman SharePoint Generator, the next step is to build/preview the webpart, but I am encountering errors in the typescript subtask.

Attempted on two separate machines with same result. Possibly related to Issue 14384

Steps to Reproduce

Run Yeoman Sharepoint Generator, run 'gulp serve', errors result:

[10:49:51] Using gulpfile ~\Projects\helloworld\gulpfile.js
[10:49:51] Starting gulp
[10:49:51] Starting 'serve'...
[10:49:51] Starting subtask 'pre-copy'...
[10:49:51] Finished subtask 'pre-copy' after 5.28 ms
[10:49:51] Starting subtask 'copyStaticAssets'...
[10:49:51] Starting subtask 'sass'...
[10:49:51] Finished subtask 'sass' after 359 ms
[10:49:51] Starting subtask 'tslint'...
[10:49:51] Starting subtask 'typescript'...
[10:49:51] [typescript] Using custom version: 2.0.10
[10:49:51] Finished subtask 'copyStaticAssets' after 404 ms
[10:49:53] Error - typescript - node_modules@types\lodash\index.d.ts(11444,21): error TS1005: ']' expected.
[10:49:53] Error - typescript - node_modules@types\lodash\index.d.ts(11444,22): error TS1005: ';' expected.
[10:49:53] Error - typescript - node_modules@types\lodash\index.d.ts(11444,23): error TS1128: Declaration or statement expected.
[10:49:53] Error - typescript - node_modules@types\lodash\index.d.ts(11444,33): error TS1005: ']' expected.
[10:49:53] Error - typescript - node_modules@types\lodash\index.d.ts(11444,34): error TS1005: ')' expected.
[10:49:53] Error - typescript - node_modules@types\lodash\index.d.ts(11444,35): error TS1128: Declaration or statement expected.
[10:49:53] Error - typescript - node_modules@types\lodash\index.d.ts(11444,37): error TS1128: Declaration or statement expected.
[10:49:53] Error - typescript - node_modules@types\lodash\index.d.ts(19441,1): error TS1128: Declaration or statement expected.
[10:49:53] Finished subtask 'tslint' after 1.6 s
[10:49:53] Error - 'typescript' sub task errored after 1.62 s
"TypeScript error(s) occurred."
[10:49:53] 'serve' errored after 2.01 s
[10:49:53]
[10:49:53] ==================[ Finished ]==================
Error - typescript - node_modules@types\lodash\index.d.ts(11444,21): error TS1005: ']' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,22): error TS1005: ';' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,23): error TS1128: Declaration or statement expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,33): error TS1005: ']' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,34): error TS1005: ')' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,35): error TS1128: Declaration or statement expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,37): error TS1128: Declaration or statement expected.
Error - typescript - node_modules@types\lodash\index.d.ts(19441,1): error TS1128: Declaration or statement expected.
Error - 'typescript' sub task errored after 1.62 s
"TypeScript error(s) occurred."
[10:49:54] Project helloworld version: 0.0.1
[10:49:54] Build tools version: 1.1.0
[10:49:54] Node version: v6.9.4
[10:49:54] Total duration: 4.15 s
[10:49:54] Task errors: 9

this.context.environment.type deprecated

react-aad-implicitflow

Category

[ X] Question
Bug
Enhancement

I'm working on rewriting the react-aad-implicitflow in angular. I'm able to successfully connect to Azure AD as a user. However whenever I try to call this.authCtx.aquireTokens(aadResource), I receive the following error: token renewal operation failed due to timeout. The interesting thing is that I watch the network traffic via fiddler when my app makes the this.authCtx.acquireTokens(aadResource) and it does return as a 302, with a bearer token. I think the problem is something with the adalRenewFrame|graph.microsoft.com that is loading. Any ideas as to what might be causing this?

@microsoft/generator-sharepoint

I am having problems registering the @microsoft/generator-sharepoint yo generator

when I run the npm command to register the share point generator

## npm i -g @microsoft/generator-sharepoint

the npm command runs to completion with no apparent errors

but when I try to run the yo command:

## yo @microsoft/sharepoint

to create the sample web part, it fails with the error:

yo @microsoft/[email protected] Error @microsoft/[email protected] You don't seem to have a generator with the name @microsoft/[email protected] installed.

the npm list does show the sharepoint generator listed as:
## $ npm list
\files
**+-- @microsoft/[email protected]_**

the open source software node.js, npm, gulp and yo have been updated or downloaded successfully to their current versions.

the cmd command prompt window is running in an administrator process with the administrators privileges.

any ideas from anybody would be greatly appreciated.

please respond to dcu.servers[at]outlook.com

thanks in advance

Inconsistent schema for sass task

Expected or Desired Behavior

When providing sass.json for extending sass task, sassMatch property should be processed without errors.

Observed Behavior

I've created file config/sass.json in order to extend sass task. Provided below config:

{
    "sassMatch": "[]"
}

got

Error - [sass] TypeError: srcPattern.map is not a function

updated config with

{
    "sassMatch": []
}

got

ERROR: Error parsing file 'sass.json'
(#/sassMatch) Expected type string but found type array

Looking at the node_modules/@microsoft/sp-build-web/lib/schemas/sass.schema.json it appears that sassMatch has string type, but should to be an array.

Steps to Reproduce

Described above.

Helloworld webpart tutorial compile errors: duplicate identifier

Expected or Desired Behavior

I am following the tutorial for the hello world webpart, found here https://www.youtube.com/watch?v=QbDtsMg88Js&list=PLR9nK3mnD-OXvSWvS2zglCzz4iplhVrKq&index=2
and here https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part
I want to be able to perform "gulp serve" and view the webpart generated by yeoman

Observed Behavior

I am getting the same compiler errors as in issue #117 which I am able to "solve" by following the suggested solution in that issue. The problem is that I just get to the next step of compile errors, the first ones disappear but I get new ones.

Steps to Reproduce

Run yo @microsoft/sharepoint and create a webpart solution
Run gulp trust-dev-cert, choose no predefined javascript framework
Run gulp serve and run in to exact problems as in #117 assumably because of old typescript version
Run npm install -g typescript@latest to globally install latest typescript, as suggested, find out that the compiler errors from #117 prevail
Run npm install typescript@latest without the global flag, old errors disappear, new errors appear

Error output:
[13:47:18] Using gulpfile ~\Documents\SPFX\testwebpart\gulpfile.js
[13:47:18] Starting gulp
[13:47:18] Starting 'serve'...
[13:47:18] Starting subtask 'pre-copy'...
[13:47:18] Finished subtask 'pre-copy' after 11 ms
[13:47:18] Starting subtask 'copyStaticAssets'...
[13:47:18] Starting subtask 'sass'...
[13:47:19] Finished subtask 'sass' after 822 ms
[13:47:19] Starting subtask 'tslint'...
[13:47:19] Starting subtask 'typescript'...
[13:47:19] [typescript] Using custom version: 2.2.1
[13:47:19] Finished subtask 'copyStaticAssets' after 932 ms
[13:47:22] Error - typescript - node_modules@microsoft\sp-http\lib\httpClient\HttpClientResponse.d.ts(17,22): error TS2
420: Class 'HttpClientResponse' incorrectly implements interface 'Response'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(6,15): error TS2300: Duplicate identifier 'R
equest'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(21,2): error TS2403: Subsequent variable dec
larations must have the same type. Variable 'headers' must be of type 'any', but here has type 'string[] | Headers | {
[index: string]: string; }'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(23,2): error TS2403: Subsequent variable dec
larations must have the same type. Variable 'mode' must be of type 'string', but here has type 'RequestMode'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(24,2): error TS2403: Subsequent variable dec
larations must have the same type. Variable 'redirect' must be of type 'string', but here has type 'RequestRedirect'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(25,2): error TS2403: Subsequent variable dec
larations must have the same type. Variable 'credentials' must be of type 'string', but here has type 'RequestCredentia
ls'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(26,2): error TS2403: Subsequent variable dec
larations must have the same type. Variable 'cache' must be of type 'string', but here has type 'RequestCache'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(48,15): error TS2300: Duplicate identifier '
Headers'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(60,2): error TS2687: All declarations of 'bo
dyUsed' must have identical modifiers.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(69,15): error TS2300: Duplicate identifier '
Response'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(85,2): error TS2687: All declarations of 'st
atus' must have identical modifiers.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(87,2): error TS2403: Subsequent variable dec
larations must have the same type. Variable 'headers' must be of type 'any', but here has type 'HeaderInit'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(91,14): error TS2300: Duplicate identifier '
BodyInit'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(92,14): error TS2300: Duplicate identifier '
RequestInfo'.
[13:47:22] Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(98,13): error TS2300: Duplicate identifier '
fetch'.
[13:47:22] Error - typescript - __lib.d.ts(11168,11): error TS2300: Duplicate identifier 'Headers'.
[13:47:22] Error - typescript - __lib.d.ts(11177,13): error TS2300: Duplicate identifier 'Headers'.
[13:47:22] Error - typescript - __lib.d.ts(13566,11): error TS2300: Duplicate identifier 'Request'.
[13:47:22] Error - typescript - __lib.d.ts(13583,13): error TS2300: Duplicate identifier 'Request'.
[13:47:22] Error - typescript - __lib.d.ts(13588,11): error TS2300: Duplicate identifier 'Response'.
[13:47:22] Error - typescript - __lib.d.ts(13599,13): error TS2300: Duplicate identifier 'Response'.
[13:47:22] Error - typescript - __lib.d.ts(19116,18): error TS2300: Duplicate identifier 'fetch'.
[13:47:22] Error - typescript - __lib.d.ts(19121,6): error TS2300: Duplicate identifier 'BodyInit'.
[13:47:22] Error - typescript - __lib.d.ts(19152,6): error TS2300: Duplicate identifier 'RequestInfo'.
[13:47:22] Finished subtask 'tslint' after 3.42 s
[13:47:22] Error - 'typescript' sub task errored after 3.43 s
"TypeScript error(s) occurred."
[13:47:22] 'serve' errored after 4.31 s
[13:47:22]
[13:47:23] ==================[ Finished ]==================
Error - typescript - node_modules@microsoft\sp-http\lib\httpClient\HttpClientResponse.d.ts(17,22): error TS2420: Class
'HttpClientResponse' incorrectly implements interface 'Response'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(6,15): error TS2300: Duplicate identifier 'Request'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(21,2): error TS2403: Subsequent variable declarations m
ust have the same type. Variable 'headers' must be of type 'any', but here has type 'string[] | Headers | { [index: str
ing]: string; }'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(23,2): error TS2403: Subsequent variable declarations m
ust have the same type. Variable 'mode' must be of type 'string', but here has type 'RequestMode'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(24,2): error TS2403: Subsequent variable declarations m
ust have the same type. Variable 'redirect' must be of type 'string', but here has type 'RequestRedirect'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(25,2): error TS2403: Subsequent variable declarations m
ust have the same type. Variable 'credentials' must be of type 'string', but here has type 'RequestCredentials'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(26,2): error TS2403: Subsequent variable declarations m
ust have the same type. Variable 'cache' must be of type 'string', but here has type 'RequestCache'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(48,15): error TS2300: Duplicate identifier 'Headers'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(60,2): error TS2687: All declarations of 'bodyUsed' mus
t have identical modifiers.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(69,15): error TS2300: Duplicate identifier 'Response'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(85,2): error TS2687: All declarations of 'status' must
have identical modifiers.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(87,2): error TS2403: Subsequent variable declarations m
ust have the same type. Variable 'headers' must be of type 'any', but here has type 'HeaderInit'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(91,14): error TS2300: Duplicate identifier 'BodyInit'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(92,14): error TS2300: Duplicate identifier 'RequestInfo
'.
Error - typescript - node_modules@types\whatwg-fetch\index.d.ts(98,13): error TS2300: Duplicate identifier 'fetch'.
Error - typescript - __lib.d.ts(11168,11): error TS2300: Duplicate identifier 'Headers'.
Error - typescript - __lib.d.ts(11177,13): error TS2300: Duplicate identifier 'Headers'.
Error - typescript - __lib.d.ts(13566,11): error TS2300: Duplicate identifier 'Request'.
Error - typescript - __lib.d.ts(13583,13): error TS2300: Duplicate identifier 'Request'.
Error - typescript - __lib.d.ts(13588,11): error TS2300: Duplicate identifier 'Response'.
Error - typescript - __lib.d.ts(13599,13): error TS2300: Duplicate identifier 'Response'.
Error - typescript - __lib.d.ts(19116,18): error TS2300: Duplicate identifier 'fetch'.
Error - typescript - __lib.d.ts(19121,6): error TS2300: Duplicate identifier 'BodyInit'.
Error - typescript - __lib.d.ts(19152,6): error TS2300: Duplicate identifier 'RequestInfo'.
Error - 'typescript' sub task errored after 3.43 s
"TypeScript error(s) occurred."
[13:47:23] Project testwebpart version: 0.0.1
[13:47:23] Build tools version: 1.1.0
[13:47:23] Node version: v6.9.5
[13:47:23] Total duration: 8.25 s
[13:47:23] Task errors: 25
PS C:\Users\Fredrik\Documents\SPFX\testwebpart>

ADAL.js/AAD SPFx warning

Expected or Desired Behavior

I recommend that you, for the moment being, have a visible warning on all SPFx samples that uses Azure AD Apps with ADAL.js. SPFx main target users are enterprise users and many of them are (still) using IE and a vast majority of them are having their tenant name in the trusted/intranet sites zone. ADAL.js does not work with this configuration. I would say in most cases this goes unnoticed for developers as they are mainly using other browsers than IE and most of the time they are using developer tenants or localhost not in your trusted/intranet zone so it goes unnoticed there as well.

Hopefully we get better ways in the future to get around this...

Rendering of headers of nested groups in Grouped List Office UI

I am trying to use grouped List from Office UI. It is working perfectly except rendrening of group header which is partially working. I am using function {onRenderHeader} to optimize group header. It is working for header of top group level but not working for headers of nested groups. {onRenderCell} is working for items. Is there any solution to render header of nested groups?

Best Regards

Opening solution in Visual Studio 2015 with NodeJS Tools breaks TS build

Observed Behavior

I tried opening and running a new project (Drop 6) in Visual Studio with NodeJS Tools installed.
When running the gulp serve command however, I receive lots and lots of Typescript errors.

I tried investigating the issue myself, and I noticed that when opening the project in Visual Studio, an index.d.ts file is generated in the typings directory, with the following content, along with the globals directory and its content:

/// <reference path="globals/gulp/index.d.ts" />
/// <reference path="globals/node/index.d.ts" />
/// <reference path="globals/react-dom/index.d.ts" />
/// <reference path="globals/react/index.d.ts" />

Is this something I can disable? Removing the index.d.ts file fixes the gulp command, but I can't be expected to do this everytime I (or someone else) open the project...

Steps to Reproduce

Create a new project with yo generator
Open the project in Visual Studio 2015 with NodeJS tools installed
Run gulp serve either from VS Task Runner Explorer or command line

attempt to replace npm with yarn fails when building the SPFx examples

Expected or Desired Behavior

expected to by able to replace npm with yarn to build the SPFx webpart examples

Observed Behavior

yarn fails when it tries to execute fsevent during the build process on a windows 10 system

Steps to Reproduce

type yarn install on any of the SPFx webpart examples

Submission Guidelines

Yarn is being suggested as a replacement for npm beause is about 25x+ faster than npm even though npm still works

Yarn-sharepoint-error-windows.txt

files included:
software versions.
error image
error video, please change the .TXT extension to .mp4 to view the build process.

thanks for your help!

Property Pane Dropdown issue with Fabric UI Component.css version 2.6.1

Expected or Desired Behavior

After loading the following css files in my apps constructor I expected the dropdown in the property pane window to work.
SPComponentLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.min.css'); SPComponentLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css');

Observed Behavior

The dropdowns in the property pane did not work

Steps to Reproduce

Add the below entry to your apps constructor and any dropdown in the property pane will no longer function.

SPComponentLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css');

Error : SPWebPartErrorCode.ScriptLoadError]:: Unable to load web part WebPart.GraphSpFxWebPart.764d3811-d551-4127-bed6-b1cec4c230b3,

Expected or Desired Behavior

Created webpart with guidance from
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint

Observed Behavior

When Deploying it to the SharePoint App Catalog, I am seeing below error

[SPWebPartErrorCode.ScriptLoadError]:: Unable to load web part WebPart.GraphSpFxWebPart.764d3811-d551-4127-bed6-b1cec4c230b3,Error: Error: Unable to load script https://localhost:4321/dist/graph-sp-fx.bundle.js Error loading https://component-id.invalid/3fdd63f0-7bd8-4cfc-8ebd-9e078193a733 script resources due to: undefined. CALLSTACK:: Error at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-28.016/sp-client-base_en-us_a666e7641ac07e434cbbc25b9a2ae3f1.js:48:12396) at new t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-28.016/sp-webpart-base_en-us_5ade5685acecf1283a7a0e6fafc6dd2c.js:47:21044) at Function.t.create (https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-28.016/sp-webpart-base_en-us_5ade5685acecf1283a7a0e6fafc6dd2c.js:47:21457) at https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-28.016/sp-webpart-base_en-us_5ade5685acecf1283a7a0e6fafc6dd2c.js:47:30989

Angular 2 Web Part Error (Value cannot be null, Parameter name: key)

Expected or Desired Behavior

Deploying the Angular 2 Prototype web part to the workbench it works fine. When deploying to SharePoint, I get an error.

Observed Behavior

When deploying to SharePoint, I get:

Sorry, something went wrong
Value cannot be null.
Parameter name: key
TECHNICAL DETAILS
Troubleshoot issues with Microsoft SharePoint Foundation.
Correlation ID: 142fd19d-c005-3000-9580-da32f96451c8
Date and Time: 02/02/2017 13:39:16

Steps to Reproduce

Built the solution, updated the CDN to the SiteAssets folder, cleared the temp folder, then ran:

gulp build
gulp bundle --ship
gulp package-solution --ship

Copied the /temp/deploy to the designated SiteAssets folder.

Using office ui people picker react component with spfx

Expected or Desired Behavior

Using office ui fabric people picker react component with sharepoint framework.

Observed Behavior

Has anyone used the office ui fabric people picker react component with spfx web part, i am not sure if this is the correct platform to ask this question, but i have been trying to use it, the default implementation mentioned in the office fabric site uses a array of people which it takes in its constructor then filters it on text change of the input element, so to create a picker suggestion that gets data from sharepoint with rest call on text change is going to be really heavy. I am not really sure how to implement this, any working sample would be really helpful.

Queries in React OfficeGraph example return nothing

Expected or Desired Behavior

The queries in the react-officegraph example don't seem to return anything (anymore). Is something changed in the implementation of the queries on SP level perhaps?

Using custom CSS plus the ModuleLoader.loadCss() problem

Using custom CSS files

Is it possible to create a custom CSS file in the src folder and use it across the Web Part? For example, creating a standard set of Angular views and styling the HTML with that CSS?

Or should that be done just by adding rules to the [webpart-name].module.scss file and using those in an Angular view? The thing is that the classes or id rules from that file get a suffix (e.g. _5944ac05) while being compiled into CSS. Is there any way of removing those suffixes? I guess they are there in order to prevent those styles colliding with something else on the page which might by chance contain a same style name, but I'm just wondering if it's possible...

In a nutshell, I guess the question would be is it possible to add an use additional CSS and SCSS files? And can the SCSS suffixes somehow be omitted?

If by any chance a part of the answer contains the ModuleLoader.loadCss() method, please check out the text below too...

`ModuleLoader.loadCss()` problem

Has anyone had anything similar happening? While trying out the AngularToDo example from the Docs, I keep getting an issue while trying to use the ModuleLoader.loadCss() method. Importing the ModuleLoader results with no issues, but whenever I call the loadCss method the Web Part fails to start and gulp reports the following error:

Module not found: Error: Cannot resolve module 'resx-strings' in C:\*PROJECT_FOLDER*\node_modules\@microsoft\sp-module-loader\lib\DeveloperTools

When the line containing the method call gets commented out, the Web Part loads up and there are no errors...

Getting typescript errors after gulp serve

[22:54:24] Error - typescript - node_modules@types\lodash\index.d.ts(11444,21): error TS1005: ']' expected.
[22:54:24] Error - typescript - node_modules@types\lodash\index.d.ts(11444,22): error TS1005: ';' expected.
[22:54:24] Error - typescript - node_modules@types\lodash\index.d.ts(11444,23): error TS1128: Declaration or statement expected.
[22:54:24] Error - typescript - node_modules@types\lodash\index.d.ts(11444,33): error TS1005: ']' expected.
[22:54:24] Error - typescript - node_modules@types\lodash\index.d.ts(11444,34): error TS1005: ')' expected.
[22:54:24] Error - typescript - node_modules@types\lodash\index.d.ts(11444,35): error TS1128: Declaration or statement expected.
[22:54:24] Error - typescript - node_modules@types\lodash\index.d.ts(11444,37): error TS1128: Declaration or statement expected.
[22:54:24] Error - typescript - node_modules@types\lodash\index.d.ts(19441,1): error TS1128: Declaration or statement expected.
[22:54:24] Finished subtask 'tslint' after 4.62 s
[22:54:24] Error - 'typescript' sub task errored after 4.65 s
"TypeScript error(s) occurred."
[22:54:24] 'serve' errored after 5.78 s
[22:54:24]
[22:54:25] ==================[ Finished ]==================
Error - typescript - node_modules@types\lodash\index.d.ts(11444,21): error TS1005: ']' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,22): error TS1005: ';' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,23): error TS1128: Declaration or statement expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,33): error TS1005: ']' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,34): error TS1005: ')' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,35): error TS1128: Declaration or statement expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,37): error TS1128: Declaration or statement expected.
Error - typescript - node_modules@types\lodash\index.d.ts(19441,1): error TS1128: Declaration or statement expected.
Error - 'typescript' sub task errored after 4.65 s
"TypeScript error(s) occurred."

Issue installing the generator

Expected or Desired Behavior

I run npm install -g @microsoft/generator-sharepoint on a new machine after doing the other steps and get the error below. Any suggestions how I make it work? Anything to clean up or similar? This is on a windows box and I'm running in a window with admin privileges.

npm WARN git config --get remote.origin.urlreturned wrong result (git://github.com/microsoft/generator-sharepoint) npm WARNgit config --get remote.origin.url` returned wrong result ([email protected]:microsoft/generator-sharepoint)
npm ERR! git clone [email protected]:microsoft/generator-sharepoint Cloning into bare repository 'C:\Users\miksv\AppData\Roaming\npm-cache_git
-remotes\git-github-com-microsoft-generator-sharepoint-7880b29f'...
npm ERR! git clone [email protected]:microsoft/generator-sharepoint ERROR: Repository not found.
npm ERR! git clone [email protected]:microsoft/generator-sharepoint fatal: Could not read from remote repository.
npm ERR! git clone [email protected]:microsoft/generator-sharepoint
npm ERR! git clone [email protected]:microsoft/generator-sharepoint Please make sure you have the correct access rights
npm ERR! git clone [email protected]:microsoft/generator-sharepoint and the repository exists.
npm ERR! addLocal Could not install microsoft/generator-sharepoint
npm ERR! Error: ENOENT: no such file or directory, stat 'C:\repos\microsoft\generator-sharepoint'
npm ERR! at Error (native)
npm ERR! If you need help, you may report this entire log,
npm ERR! including the npm and node versions, at:
npm ERR! http://github.com/npm/npm/issues

npm ERR! System Windows_NT 10.0.14393
npm ERR! command "C:\Program Files\nodejs\node.exe" "C:\ProgramData\chocolatey\lib\npm\tools\node_modules\npm\bin\npm-cli.js" "i
nstall" "-g" "@microsoft/generator-sharepoint"
npm ERR! cwd C:\repos
npm ERR! node -v v6.9.4
npm ERR! npm -v 1.4.9
npm ERR! path C:\repos\microsoft\generator-sharepoint
npm ERR! syscall stat
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! C:\repos\npm-debug.log
npm ERR! not ok code 0`

Yammer Webpart

Category

Question

What is the best way to load the below code in SharePoint Framework WebPart?

<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script> <div id="embedded-feed" style="height:400px;width:100%"></div> <script> yam.connect.embedFeed({ container: '#embedded-feed', network: 'tenant.onmicrosoft.com', feedType: 'open-graph', config: { defaultGroupId: 12345, showOpenGraphPreview: false, promptText: "Comment on this article", header: false, footer: false } }); </script>

angular2-prototype issues

Expected or Desired Behavior

This sample works fine locally, when I deploy it to SharePoint online, I was expecting to see the similar result.

Observed Behavior

but

I saw the below errors:
[SPWebPartErrorCode.ScriptLoadError]:: Unable to load web part WebPart.null.g_932c30c6_be8d_4499_ac39_a52db655cde8,Error: ***Failed to load component "244f3542-af19-46e1-bd15-d6b9a35b9960" (null). Original error: Error loading https://component-id.invalid/244f3542-af19-46e1-bd15-d6b9a35b9960_0.0.1 script resources due to: undefined. CALLSTACK:: Error at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-loader_en-us_4ec28636b0f9b465bd02537852aebf16.js:57:16731) at new t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-webpart-base_en-us_8d0a284d4d0d8e404879f4b5fcc7cc99.js:47:22096) at Function.t.create (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-webpart-base_en-us_8d0a284d4d0d8e404879f4b5fcc7cc99.js:47:22509) at https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-webpart-base_en-us_8d0a284d4d0d8e404879f4b5fcc7cc99.js:48:627
Also, I noticed the output js file is called "hello-world.bundle.js", it should be called a more proper name. (I know I can change it by myself, but it would be nicer it can be fixed from the original place)
I saw the output js file is 1.6Mb, is it possible to reduce the size?

Steps to Reproduce

Basically, I just followed the steps to deploy to SharePoint online:

gulp package-solution
upload the output package into app category. (developer tenant)
add that in a test SharePoint site collection instance
add a page, then add the web part into that page, then I see the errors.

Issue while deploying in the dev site..

Thank you for reporting an issue or suggesting an enhancement. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

Expected or Desired Behavior

It should return the current weather of the provided locality

Observed Behavior

It is working fine in local workbench but throwing some issue after we deploy it in the dev site

Thanks for your contribution! Sharing is caring.

Need More steps.

can please mention steps to run the commands given. I'm using VS2013.

Getting below issue while running it.

The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

Adding 2 instances of knockout rendered web part to the page

Expected or Desired Behavior

Adding a knockout built web part to the page twice should work as expected

Observed Behavior

When adding the second knockout web part to the page, at first all looks great. But after a refresh, the first web part shows the loading animation circle with "loading xxx..." message, and the web part content is loaded under this loading block.
Both web parts work as expected, neither report any errors, but the first instance doesn't clear the flag that it finished loading.
This happens on my project as well as when creating a clean, RC0, new web part project and running it in local workbench without any modifications.
All my init and render methods finish without an error.

Steps to Reproduce

This happens on my project as well as when creating a clean, RC0, new web part project and running it in local workbench without any modifications.
Simply create a web part that uses knockout to render, run gulp serve, and add the web part twice to the page. Then - do a refresh, you should see this issue.

Angular-multipage sample: missing $

Expected or Desired Behavior

Hey guys, just a small correction: there's a tiny mistake in the angular-multipage example, the VoteController.ts is missing the Angular dollar sign ($) before the event word on line 55.
Please compare with line 75 for reference.
The web part doesn't work during the voting phase because of the missing $.
Thanks much for the samples!

crud sample not work in FF and Edge

Hello, Crud sample not work in FireFox 50.1.0 - all request return 403 code text: -2147024891,System.UnauthorizedAccessException.
in Edge work reading, but update write "Item with ID: 7726 successfully updated", but in site I see 403 error code and item is not updated. Create, delete does not work also.

Pavel

SPWebPartErrorCode.ScriptLoadError when adding web

Expected or Desired Behavior

When I add a web part on the page, I expect it to show content

Observed Behavior

When adding web part on the page I am asked whether to leave the page or stay.
If I choose leave, I am transferred to the empty modern page again, no web parts.
If I choose stay, I can see the web part with following error.
[SPWebPartErrorCode.ScriptLoadError]:: Unable to load web part WebPart.undefined.d7892b04-4654-4dc2-94dc-3a3cd7bb3416,Error: ***Failed to load component "90a04bb9-fbdf-43d1-bfe1-0491d34941be" (undefined). Original error: script resources due to: undefined. CALLSTACK:: Error at t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-loader_en-us_4ec28636b0f9b465bd02537852aebf16.js:57:16567) at t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-webpart-base_en-us_8d0a284d4d0d8e404879f4b5fcc7cc99.js:47:22094) at t.create (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-webpart-base_en-us_8d0a284d4d0d8e404879f4b5fcc7cc99.js:47:22502) at Anonymous function (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-webpart-base_en-us_8d0a284d4d0d8e404879f4b5fcc7cc99.js:48:604)

Steps to Reproduce

clone repository
copy the "react-officegraph" folder to project directory
run nodejs cmd and select project directory via cd
npm i
gulp serve --nobrowser
gulp package-solution
upload \sharepoint\react-officegraph.spapp to app catalog in dev o365 tenant
add app on the site, for example, on /site/dev
add new modern page, add web part "Trending in the sites I"

Errors trying to do npm install in sp-dev-fx-webparts\tutorials

Expected or Desired Behavior

I just expect an error free install

Observed Behavior

I will paste the errors at the bottom

Steps to Reproduce

I downloaded and unzipped sp-dev-fx and then tried to install the tutorials

Thanx!!!
Here are the error messages:

[email protected] install C:\Users\580616\Documents\sp-dev-fx-webparts\tutorials\node_modules\bufferutil
node-gyp rebuild

C:\Users\580616\Documents\sp-dev-fx-webparts\tutorials\node_modules\bufferutil>if not defined npm_config_node_gyp (node "C:\Users\580616\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin\....\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "" rebuild )
Building the projects in this solution one at a time. To enable parallel build,please add the "/m" switch.
TRACKER : error TRK0005: Failed to locate: "CL.exe". The system cannot find the file specified. [C:\Users\580616\Documents\sp-dev-fx-webparts\tutorials\node_modules\bufferutil\build\bufferutil.vcxproj]

[email protected] install C:\Users\580616\Documents\sp-dev-fx-webparts\tutorials\node_modules\utf-8-validate
node-gyp rebuild

C:\Users\580616\Documents\sp-dev-fx-webparts\tutorials\node_modules\utf-8-validate>if not defined npm_config_node_gyp (node "C:\Users\580616\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin\....\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "" rebuild )
Building the projects in this solution one at a time. To enable parallel build,please add the "/m" switch.
TRACKER : error TRK0005: Failed to locate: "CL.exe". The system cannot find the file specified. [C:\Users\580616\Documents\sp-dev-fx-webparts\tutorials\node_modules\utf-8-validate\build\validation.vcxproj]

gyp ERR! build error
gyp ERR! stack Error: C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Users\580616\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23)
gyp ERR! stack at emitTwo (events.js:106:13)
gyp ERR! stack at ChildProcess.emit (events.js:191:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\580616\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\580616\Documents\sp-dev-fx-webparts\tutorials\node_modules\utf-8-validate
gyp ERR! node -v v6.9.1
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of cldr-data@>=25 but none was installed.
npm WARN [email protected] requires a peer of cldr-data@>=25 but none was installed.
npm WARN [email protected] requires a peer of cldr-data@>=25 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\bufferutil):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: node-gyp rebuild
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\utf-8-validate):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] install: node-gyp rebuild
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

deploy react-todo - showing error message

Expected or Desired Behavior

I tried to deploy react-todo to my developer tenant, and I was expect to see the todo list.
(I have done this a few month ago, and it worked fine)

Observed Behavior

but I got the below error:
[SPWebPartErrorCode.ScriptLoadError]:: Unable to load web part WebPart.null.g_64f30467_66e8_428d_90ee_a1bf17199d4e,Error: ***Failed to load component "2625c2e1-aa64-4b86-b922-d8190661d9f9" (null). Original error: Error loading https://component-id.invalid/2625c2e1-aa64-4b86-b922-d8190661d9f9_1.0.0 script resources due to: undefined. CALLSTACK:: Error at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-loader_en-us_4ec28636b0f9b465bd02537852aebf16.js:57:16731) at new t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-webpart-base_en-us_8d0a284d4d0d8e404879f4b5fcc7cc99.js:47:22096) at Function.t.create (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-webpart-base_en-us_8d0a284d4d0d8e404879f4b5fcc7cc99.js:47:22509) at https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-01-16.005/sp-webpart-base_en-us_8d0a284d4d0d8e404879f4b5fcc7cc99.js:48:627

Steps to Reproduce

Basically, I followed the instruction to deploy to a developer site, then I got the error, there could be some wrong configuration I made.

Not Deploying Latest SPFX Webpart(GA Release) in Non Developer Tenants

I Uploaded the latest SPFX Webpart in Apps site but i can't deploy the webpart in office 365 tenants by [email protected](office 365 user)

Trying to use SP.Taxonomy JSOM functions

Expected or Desired Behavior

Since there is no RestAPI available for querying Term sets etc, I was trying to incorporate SP.Taxonomy.js.
I tried following the steps described here: https://dev.office.com/sharepoint/docs/spfx/web-parts/basics/add-an-external-library#loading-sharepoint-jsom
I've also added this external entry in config.json:

    "sp-taxonomy": {
      "path": "https://sevensn.sharepoint.com/sites/dev-schreder/_layouts/15/SP.Taxonomy.js",
      "globalName": "SP",
      "globalDependencies": [
        "sharepoint"
      ]
    }

However, when executing the SP.Taxonomy related code, I almost always receive the error

Uncaught ReferenceError: NotifyScriptLoadedAndExecuteWaitingJobs is not defined

Note: sometimes it works! It seems that some library is loaded too slow, which results in the necessary scripts not being loaded!

SharePoint Framework WebPart & SharePoint Hosted

sharepoint-crud: Typescript compile fails

Expected or Desired Behavior

Typescript compiles without errors.

Observed Behavior

Starting subtask 'typescript'...
Error - typescript - node_modules\sp-pnp-js\lib\configuration\configuration.d.ts(1,1): error TS1084: Invalid 'reference' directive syntax.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(43,14): error TS1005: '=' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(43,21): error TS1005: ';' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(43,40): error TS1005: '(' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(44,14): error TS1005: '=' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(44,33): error TS1005: ';' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(44,45): error TS1005: '=' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(45,14): error TS1005: '=' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(45,42): error TS1005: ';' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(46,14): error TS1005: '=' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(46,32): error TS1005: ';' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(47,14): error TS1005: '=' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(47,34): error TS1005: ';' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(48,14): error TS1005: '=' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(48,32): error TS1005: ';' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(49,14): error TS1005: '=' expected.
Error - typescript - node_modules\sp-pnp-js\lib\configuration\pnplibconfig.d.ts(49,32): error TS1005: ';' expected.

...followed by a lot of the same errors (in total 210) for other d.ts files

Steps to Reproduce

Typescript version: 2.0.3
Project sharepoint-crud version: 1.0.0
Build tools version: 0.9.7
Node version: v4.5.0

git clone https://github.com/SharePoint/sp-dev-fx-webparts.git
cd sp-dev-fx-webparts/samples/sharepoint-crud
npm install
gulp serve

sp-pnp-js causes Gulp build errors

Expected or Desired Behavior

No build error on gulp serve

Observed Behavior

Error - typescript - node_modules@types\core-js\index.d.ts(781,11): error TS2300: Duplicate identifier 'Promise'.
Error - typescript - node_modules@types\core-js\index.d.ts(867,13): error TS2300: Duplicate identifier 'Promise'.
Error - typescript - node_modules@types\es6-promise\index.d.ts(11,15): error TS2300: Duplicate identifier 'Promise'.
Error - typescript - node_modules@types\es6-promise\index.d.ts(42,19): error TS2300: Duplicate identifier 'Promise'.
Error - typescript - node_modules\sp-pnp-js\lib\net\httpclient.d.ts(5,15): error TS2304: Cannot find name 'HeadersInit'.

Steps to Reproduce

Build a webpart with yeoman
Add following import to webpart.ts
import pnp from "sp-pnp-js";

I've seen various comments about commenting out references, but either I can see which files to do the commenting on or the references aren't in my files. I've built the standard helloworld web part, run gulp server and added the webpart to the workbench - all works fine. Then add the module reference to the web part ts files. Gulp does the rebuild and errors.

All the errors are highlighted when you bring up the individual files in VS Code. I'm too green at this game at the moment to figure out where to go to try and fix them!

Create Item fails

Category

[ ] Question
[X ] Bug
[ ] Enhancement

Expected or Desired Behavior

Item Should be created

Observed Behavior

I error message :
SPFX-CRUD.docx

Steps to Reproduce

I packaged solution as per Sample 3 (add sample to sharepoint) ran gulp serve --nobrowser. Added webpart to page. Created list with just title field. Set up list name in webpart properties. Run Web part - clicked on create item and got this failure.

Thanks for your contribution! Sharing is caring.

Unable to use PnP core JavaScript

Observed Behavior

Getting the below error when I add PnP core JavaScript(import pnp from "sp-pnp-js";) in spfx client web part.

Any idea?

RC0 Dropdown Lists PropertyPane

Category

Question
Bug
Enhancement

I recently updated to RC0 and whenever I try to populate a custom dropdown list in the property pane it appears empty. I've even tried hard coding values directly into it and it still appears empty. Has anyone else experienced this? I had this working in drop 4 but haven't tested it in the other drops.

I tried a hard coded value like:

return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
}),
PropertyPaneDropdown('contentTypes', {
label: 'Available Content Types',
options: [{
key: '1',
text: 'test'
}]
})
]
}
]
}
]
};

which still didn't work ....

Using Jquery in Angular SPFX WebPart

Desired Behavior

Could you please explain how to use JQuery in Classic Angular migrated SharePoint Framework WebPart?

Thank you.

Helloworld SharePoint client-side web webpart tutorial typescript compile errors

D:\SP Client WebPart\helloword-webpart>gulp serve
Build target: DEBUG
[14:19:15] Using gulpfile D:\SP Client WebPart\helloword-webpart\gulpfile.js
(node:19824) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
[14:19:15] Starting gulp
[14:19:15] Starting 'serve'...
[14:19:15] Starting subtask 'pre-copy'...
[14:19:15] Finished subtask 'pre-copy' after 6.31 ms
[14:19:15] Starting subtask 'copyStaticAssets'...
[14:19:15] Starting subtask 'sass'...
[14:19:16] Finished subtask 'sass' after 505 ms
[14:19:16] Starting subtask 'tslint'...
[14:19:16] Starting subtask 'typescript'...
[14:19:16] [typescript] Using custom version: 2.0.10
[14:19:16] Finished subtask 'copyStaticAssets' after 564 ms
[14:19:18] Error - typescript - node_modules@types\lodash\index.d.ts(11444,21): error TS1005: ']' expected.
[14:19:18] Error - typescript - node_modules@types\lodash\index.d.ts(11444,22): error TS1005: ';' expected.
[14:19:18] Error - typescript - node_modules@types\lodash\index.d.ts(11444,23): error TS1128: Declaration or statement expected.
[14:19:18] Error - typescript - node_modules@types\lodash\index.d.ts(11444,33): error TS1005: ']' expected.
[14:19:18] Error - typescript - node_modules@types\lodash\index.d.ts(11444,34): error TS1005: ')' expected.
[14:19:18] Error - typescript - node_modules@types\lodash\index.d.ts(11444,35): error TS1128: Declaration or statement expected.
[14:19:18] Error - typescript - node_modules@types\lodash\index.d.ts(11444,37): error TS1128: Declaration or statement expected.
[14:19:18] Error - typescript - node_modules@types\lodash\index.d.ts(19441,1): error TS1128: Declaration or statement expected.
[14:19:18] Finished subtask 'tslint' after 2.41 s
[14:19:18] Error - 'typescript' sub task errored after 2.41 s
"TypeScript error(s) occurred."
[14:19:18] 'serve' errored after 2.95 s
[14:19:18]
[14:19:19] ==================[ Finished ]==================
Error - typescript - node_modules@types\lodash\index.d.ts(11444,21): error TS1005: ']' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,22): error TS1005: ';' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,23): error TS1128: Declaration or statement expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,33): error TS1005: ']' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,34): error TS1005: ')' expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,35): error TS1128: Declaration or statement expected.
Error - typescript - node_modules@types\lodash\index.d.ts(11444,37): error TS1128: Declaration or statement expected.
Error - typescript - node_modules@types\lodash\index.d.ts(19441,1): error TS1128: Declaration or statement expected.
Error - 'typescript' sub task errored after 2.41 s
"TypeScript error(s) occurred."
[14:19:19] Project helloworld-webpart version: 0.0.1
[14:19:19] Build tools version: 1.1.0
[14:19:19] Node version: v7.5.0
[14:19:19] Total duration: 5.44 s
[14:19:19] Task errors: 9

updated the typescript with new version as mentioned #117 but no change in error

Error ceating a simple WebPart (HelloWorld)

Category

Question
Bug
Enhancement

Hi, after follow all procedures in a Linux Environment (Debian 8), i can not build anymore any WebPart. I tried also another installation from scratch in another machine.

Any clue on this behavior?
Thanks

DROP 5

Generic Error

Error - 'tslint' sub task errored after 871 ms 
 Error in plugin 'gulp-cache'
Message:
    Cannot find module './h6'
Details:
    code: MODULE_NOT_FOUND

Detailed Error

Details:
    code: MODULE_NOT_FOUND
Error: Cannot find module './h6'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/jlivio/spfx/helloworld-webpart/node_modules/@microsoft/sp-tslint-rules/lib/utils/implicitRoles/index.js:34:12)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/jlivio/spfx/helloworld-webpart/node_modules/@microsoft/sp-tslint-rules/lib/utils/getImplicitRole.js:2:21)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/jlivio/spfx/helloworld-webpart/node_modules/@microsoft/sp-tslint-rules/lib/rules/a11yRoleHasRequiredAriaPropsRule.js:14:25)
    at Module._compile (module.js:570:32)

Web API Authorization

Question

I was wondering how one might add authorization to the webapi calls. Because, right now it looks like the webapi calls are open to anyone, and in production I feel like we would want to limit that to only allow our applications to make calls to this webapi. I'm thinking along the lines of a custom action filter. But not sure how to implement that. Any suggestions?

Thanks for your contribution! Sharing is caring.

403 unauthorized on Graph calls

Observed Behavior

@waldekmastykarz
I tried re-creating the example on https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-officegraph
However, get call

this.props.httpClient.get(`${siteUrl}/_api/search/query?querytext='*'&properties='GraphQuery:actor(me\\,or(action\\:1001\\,action\\:1003)),GraphRankingModel:{"features"\\:[{"function"\\:"EdgeTime"}]}'&selectproperties='Author,AuthorOwsUser,DocId,DocumentPreviewMetadata,Edges,EditorOwsUser,FileExtension,FileType,HitHighlightedProperties,HitHighlightedSummary,LastModifiedTime,LikeCountLifetime,ListID,ListItemID,OriginalPath,Path,Rank,SPWebUrl,SecondaryFileExtension,ServerRedirectedURL,SiteTitle,Title,ViewCountLifetime,siteID,uniqueID,webID'&rowlimit=${numberOfDocuments}&ClientType='MyRecentDocuments'&RankingModelId='0c77ded8-c3ef-466d-929d-905670ea1d72'`, HttpClient.configurations.v1, {
      headers: {
        'Accept': 'application/json;odata=nometadata',
        'odata-version': ''
      }
    });

fails with a 403 Unauthorized error.

Is this something that is happening due to the new version of the framework?
I seem to recall I already had it working with Drop 6.

I'm running the webpart on my Dev tenant's /_layouts/15/workbench.aspx.

Unable to fetch Hyperlink or picture Feild

Cannot add the web part on the /layouts/workbranch.aspx

Expected or Desired Behavior

I expect that web part shows content after adding on the /_layouts/workbench.aspx

Observed Behavior

When I add a web part, I see the error:

This is what I can see in the edge developer tools console:

There seems to be some mistake in the file url,
https://.sharepoint.com/SiteAssets/react-officegraph/trending-in-the-sites-i-follow.bundle
file does not exist, though
https://.sharepoint.com/SiteAssets/react-officegraph/trending-in-the-sites-i-follow.bundle_21c4e3f094cecda54ac2755942a0a584.js
does.

Steps to Reproduce

clone repository
copy "react-officegraph" into work folder
"cdnBasePath": "/siteassets/react-officegraph/"
gulp bundle --ship
gulp package-solution --ship
upload files from ../temp/deploy to https://.sharepoint.com/siteassets/react-officegraph
upload ../sharepoint/react-officegraph.spapp to https://.sharepoint.com/sites//AppCatalog, +deploy
add add-in on the https://.sharepoint.com/sites/ +wait until it is installed
open https://.sharepoint.com/sites//_layouts/workbench.aspx
add web part "Trending in the sites I"

Indexable properties get's persisted in the Description managed property

Expected or Desired Behavior

The properties should be perhaps searchable by default, and get their own crawled properties.

Observed Behavior

By adding

protected get propertiesMetadata(): IWebPartPropertiesMetadata { return { 'Foo': { isHtmlString: true }, 'Bar': { isHtmlString: true } }; }

into my SPFx web part, the values of those properties appear concatenated in the Description managed property. This means I need to type: Description:term in order to get a match.

Is this a bug or by design? Seems to me a property named Foo should get a crawled property named ows_Foo which I can map as I please - making it default searchable, or at least not tied to using the Description managed property.

Shared node_modules for all webparts

Property '$broadcast' does not exist on type '{}'

Observed Behavior

Getting the below error when I use angular in SPFX:

I am not experiencing the same with the old solutions.

gulp serve command gives me the below errors

Not able to edit webpart properties in SharePoint online workbench

Expected or Desired Behavior

I had cloned the samples to give it a try on my dev tennant. I am able to build and serve and the manifest is also loaded by the workbench (local and SharePoint hosted). I am testing with react-search webpart. Webpart is loaded and search results are shown.

Observed Behavior

When I try to edit the webpart properties in the SharePoint Online workbench (hosted on a dev tennant in a dev site) I receive the following error: "Cannot read property 'Custom' of undefined". Error originates from this line "public type: IPropertyPaneFieldType = IPropertyPaneFieldType.Custom;" in PropertyPaneLoggingField.ts. Editing the webpart properties in the local workbench works as expected.

I also receive this error when I try to add ootb spfx webpart to the page: MESSAGE:: Unable to load web part script resources due to: Error: Error: ***Invalid framework module "@ms/sp-component-utilities".

Steps to Reproduce

Follow the steps described here: https://github.com/SharePoint/sp-dev-fx-webparts. Upload the workbench.aspx to a doc library in the developer site. Add the SearchSpfx webpart and try to opent to open the property pane

Thanks for your help!

After update i cannot build new project and tsd install angular is not working.

Expected or Desired Behavior

I have an issue after the update from spfx.
The tsd install angular is deprecated and now i get errors in my projects, even if i create a new project it still the same i cannot build my solution without erros for angular. Have any please a solution how i can create a project install typings for angular and use them? Also after the update the sp-module-loader is not installed correctly, please let me know what i could do.

Thank you in advance.