12
votes
Accepted
Anyone can explain the .ts file and .tsx file use and difference in SPFx react webpart?
TSX allows for embedding JSX elements inside the file, and is largely used by React.
TS files are plain old Typescript files and do not support adding JSX Elements.
Typically you would seperate ...
- 1,290
8
votes
Accepted
SharePoint Framework: how to change TypeScript version used by gulp?
The mystery is solved. The typescript version is pulled in by tslint and in turn by the internal gulp-related typescript.
The output of "TypeScript version: 2.1.6" happens when the tslint task starts ...
- 1,919
4
votes
Accepted
SPFx - Wrong function return current user formatted name
You dont need to query user profile to get the login name or display name.
It is already available inside the this.context.pageContext.user object.
Try and modify the below sample code. You can get ...
- 30.8k
4
votes
Accepted
SPFX- Array.prototype.diff - (TS) property "diff" does not exist on type 'any[]'- es6 issue?
Since an interface in TypeScript is open ended this means that you can
just add members to the interfaces declared in lib.d.ts and TypeScript
will pick up on the additions. Note that you need to ...
- 30.8k
4
votes
Accepted
how to use click event in html string in spfx (react)
The simplest option here is declare the function not as a class member but just like a variable in window like
window.myFunction = function {}
But I would look at removing your dangerous html ...
- 146
4
votes
Accepted
How to add items to SPO list synchronously in spfx webparts?
I didnt work with inBatch.
I will show you an example without it, and i guess you will be able to make it in the way you need.
Btw, your code isn't working as you want because you are not adding ...
- 343
4
votes
SharePoint Online full-width page
Looks like you are using a Modern Team site, the full width column is currently available only for Communication Site.
To enable your webpart to full-width, you need to set the property "...
- 30.8k
4
votes
Accepted
Get current theme colors for SharePoint Online site in SPFx webpart
As per the official documentation, Use theme colors in your SharePoint Framework customizations,
When you scaffold a new SharePoint Framework client-side web part, by default, it uses the fixed ...
- 42.9k
3
votes
Accepted
How to debug SPFX Web part in visual studio code ?
you can install Debugger for Chrome extension in the VS Code and follow the step as described in Github Debug SharePoint Framework solutions in Visual Studio Code
- 2,836
3
votes
SharePoint Framework development using Visual Studio
This question was posted 2 years ago. I'm asking myself the same thing now, but it still appears that Visual Studio Code is the way most people go here.
Visual Studio 2019 includes the ability to do ...
- 183
3
votes
import interface in mystrings.d.ts
Please check the below steps for adding multiple language in SPFX webparts:
Within "loc" folder you will see a file named "mystrings.d.ts". At first add property here like below:
declare interface ...
3
votes
Spfx source files from spkg
The sppkg file is actually a zip archive that you can extract, but it contains the compiled and minified js files, not the source typescript files.
- 2,249
3
votes
Accepted
How to filter the retrieved items using a pnp-js-core REST call to a SharePoint list
You could check the code for this error(SitePages).
If it is caused by this error, you can find the solution here.
https://github.com/SharePoint/PnP-JS-Core/wiki/Using-sp-pnp-js-in-SharePoint-...
- 1,981
3
votes
Accepted
Not able to insert data into TaskList In sharepoint Spfx
pnp.sp.web.lists.getByTitle("TestTask").items.add({
Title: TaskNameVal,
StartDate: StartDateVal,
DueDate: DueDateVal,
PercentComplete: CompleteVal,
AssignedToId: [AssignedToVal],
...
- 144
2
votes
SharePoint Framework development using Visual Studio
There's some guidance on using Visual Studio as the development environment for SharePoint Framework (SPFx) client-side web parts at https://dev.office.com
The documentation is a little out of date ...
- 1,895
2
votes
Sharepoint Framework/PnP-JS/React : state Object doesnt work
Your code tell the TypeScript that the state object is empty object with no members. React.Component accepts two generic types - properties object and state object. You have to change this line
...
- 1,661
2
votes
Accepted
Office-UI-Fabric-react uncheck checbox
Fabio,
I'm assuming that you're using Office UI Fabric Checkbox and DefaultButton
for this answer -- let me know if you aren't.
To solve this issue use the following steps:
Make sure to add a state ...
- 1,236
2
votes
how to fetch document library data in SharePoint Framework, Modern UI
there is already "Add-ins" WebPart to display documents in the modern Pages
Just Choose Highlighted content WebPart, Configure it as you want
not smart to develop an app when it's already exist ;)
- 1,011
2
votes
Spfx, WebParts and PnP : How to get the current user id?
using @pnp/sp, you can simply get the current user's property using
import { sp } from '@pnp/sp';
return sp.web.currentUser.get().then((user) => {
console.log(user);
...
- 284
2
votes
"Converting" project from old to new technology?
There is guidance available from Microsoft around moving your existing customisations to SharePoint Framework:
https://dev.office.com/blogs/converting-existing-js-apps-to-sharepoint-framework
https:/...
- 10.5k
2
votes
Accepted
SPFx - Get User ID from User Login Name
You need to a make a POST call to the EnsureUser endpoint and pass the login name as the payload.
Try with the below sample code, modify the login name as per your requirement:
const payload: string ...
- 30.8k
2
votes
Reactjs, TypeScript & Webpack on SharePoint2013
As Vipul Kelkar mentioned in his 2nd paragraph, you can perfectly use that development stack with SharePoint 2013. You can use whatever front-end framework you like. However, you cannot use the SPFx ...
- 1,615
2
votes
Where is the documentation for javascript for the pnp libraries?
All of the PnP JavaScript libraries are written in TypeScript. As such, there are no exemplar JavaScript files.
All of the tooling to implement customizations in SharePoint has changed. e.g.: SP ...
- 1,425
2
votes
Accepted
Q: Create visible folder in list with SPFx
Try using something like below:
const list = sp.web.lists.getById(ListId);
const folderName = 'My subfolder';
list.items.add({
FileSystemObjectType: 1,
ContentTypeId: '0x0120'
FileLeafRef: ...
- 42.9k
2
votes
Accepted
tslint.json unknown compiler option 'extends'
The error seems to be coming from the tsconfig.json file.
You need to ensure that the file is as below.
Notice, the extends attribute that is located above compilerOptions
{
"extends": "./...
- 30.8k
2
votes
Accepted
SPFx. Error while importing modernizr in SPFx
Try following steps:
Run npm i modernizr and then npm i @types/modernizr --save-dev.
Then add its reference to config.json in externals{} like:
"externals": {
"modernizr": {
"...
- 42.9k
2
votes
How to filter the retrieved items using a pnp-js-core REST call to a SharePoint list
It looks like you're missing a single quote in your filter expression.
filter("Email eq " + userEmail + "'")
should be
filter("Email eq '" + userEmail + "'")
- 12.6k
2
votes
sp-pnp-js gives error when building TypeScript project
I finally got this working. I deleted the node modules and run npm install to retrieve the modules according to package.json. I did try that several times before still getting the same error, but this ...
- 343
2
votes
Not able to insert data into TaskList In sharepoint Spfx
AssignedTo field expects the ID of person/user and not email address.
You need set this field like:
AssignedToId: 3
Where 3 is ID of user.
Additional Reference:
How to get the User Principle ID based ...
- 42.9k
2
votes
Accepted
Problem with creating an instance of a class in SPFX(TypeScript/React)
The error message is quite clear, you can't assign a type 'number' or 'string' as 'IReduxCounterProps' on line 40 & 41. The type must be strictly according to the definition.
const c = new Counter(...
- 1,333
Only top scored, non community-wiki answers of a minimum length are eligible