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 ...
James Randal's user avatar
  • 1,290
10 votes
Accepted

SPFx - How to call function on button click event from ts file with React

Add a property to your IAutoCompleteProps interface for your click handler. Then pass the function from the AutoCompleteWebPart into the interface as one of the component's properties. So in your ...
theChrisKent's user avatar
  • 6,001
6 votes
Accepted

Add column names dynamically to `select` method in SP PnP JS

It supports string array. You need to use the "newer" spread syntax as below: var cols = ["Col1", "Col2"]; sp.web.lists.getByTitle("My List").items.select(...cols); Spread syntax in javascript
Gautam Sheth's user avatar
  • 30.9k
5 votes
Accepted

Updating SPFX breaks gulp

In 1.6.0 projects the config/tslint.json file was removed and a new one is created at the root of the solution. Delete E:\DevEnv\WebParts\react-full-iframe\config\tslint.json. You should also add the ...
baywet's user avatar
  • 565
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 ...
AJIXuMuK's user avatar
  • 146
4 votes
Accepted

SPFX - How to get data from _spPageContextInfo

I too get same problem, and i resolved it by using the SPComponentLoader.loadScript, please refer below code snippet SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/init.js', { ...
Jayakumar Balasubramaniam's user avatar
4 votes
Accepted

How to combine two SPFx web parts?

Have web part C import the components for the other two web parts. Use shared services to load data for A and B, and reuse them in web part C. import ComponentA from './../../webparts/WebPartA/...
Derek Gusoff's user avatar
  • 8,011
4 votes
Accepted

Provisioning SPFx WebPart assets: adding a page with your webpart embedded to it

TL;DR You're on the right track, but look at the mso:CanvasContent1 tag instead! The real answer It looks like the bulk of your configuration would be in the <mso:CanvasContent1 ...> line. ...
Richard Li's user avatar
4 votes

What are the supported office UI fabric versions for each SPFx versions?

I'm not sure if this is still relevant, but this is the version I am using: SPFX version: 1.4.1 Office UI Fabric React: [email protected] Use Yeonman in order to install the template for ...
George Mavridis's user avatar
3 votes
Accepted

Get SharePoint List Items using SharePoint Framework React

There will be return type ISplistitemsState instead of void in Splistitems class. Change following line export default class Splistitems extends React.Component<ISplistitemsProps, void> { To ...
Chandresh's user avatar
  • 499
3 votes
Accepted

SPFX Fabric UI React Buttons handled by one click event

I don't know what you are trying to achieve but you can call your method like this: public render(): React.ReactElement<IReportingProps> { return ( <div> <CompoundButton ...
Lukas Nespor's user avatar
  • 1,661
3 votes

How to access to SharePoint Objects (List, ListItem, User, ect) using React and PnP-JS Core with SharePoint FrameWork (SharePoint 2016)

You Will find in the following link all available operations of PnP-JS-Core and how to use them with SharePoint Framework. https://github.com/SharePoint/PnP-JS-Core/wiki/Developer-Guide
Youssef Moumen El idrissi's user avatar
3 votes

How to perform CRUD Operations on sharepoint lists using React and PnP-JS Core with SharePoint FrameWork (SharePoint 2016)

We have taken multiple initiatives where in we are developing client side web-parts using react for our clients. Traditionally we had been using jquery for making ajax requests in script editors. ...
mohd tahir's user avatar
  • 2,406
3 votes
Accepted

React Native (Sharepoint-application)

From my point, you should start with Azure AD application. Create a new app registration in Azure AD, give it permissions to SharePoint. Then go ahead with react-native-azure-ad and build an app, ...
Sergei Sergeev's user avatar
3 votes
Accepted

Get list of alerts of the current user from the whole site collection

I believe that there is no REST API that could manage nor read alerts whatsoever. Also alerts are per site (web) so it would require to iterate through all subsites which could take really long time ...
Lukas Nespor's user avatar
  • 1,661
3 votes

Deploy spfx webpart without using cdn

Yes, you can do that without having to enable CDN. In your config > write-manifests.json file, there is a cdnBasePath property. Modify that value to a document library path as below: { "$...
Gautam Sheth's user avatar
  • 30.9k
3 votes
Accepted

I want to call one child component from parent component spfx react

I see two issues: You need to close your constructor public constructor(props: IDCLabelProps, state: IDCLabelProps) { super(props); } You probably named your component file ...
Hugo Bernier's user avatar
  • 1,236
3 votes
Accepted

How to upload file in document library using pnp/sp

Looks likely that your document library does not have a Description field, i.e. a field with the internal name "Description". PnP wants you to specify the internal name, not the display name of the ...
Anon's user avatar
  • 805
3 votes
Accepted

Selecting a date in 2nd date picker clears the 1st date picker (UI Fabric React)

It seems you are not setting any value to your components: <DatePicker isRequired label={strings.datePickUp} value={this.state.datePickup} //Add this key={"1"} onSelectDate={...
LeonidasFett's user avatar
3 votes
Accepted

Including React Kendo Grid in SPFx web part throws warnings during build

The SharePoint Framework webpack config already contains a definition for source-map-loader but it doesn't have the exclude property. You can check this by doing a console.log(generatedConfiguration....
Vardhaman Deshpande's user avatar
3 votes
Accepted

PnP Carousal Control Button style and dots

You could use react-slick slider. Sample test demo in my SPFx: You could customize the Previous Next as image instead of text. Update: The library supports custom HTML. Update part2: My test ...
Lee's user avatar
  • 4,271
3 votes

Problems with MSGraph POST in SPFx React

This doesn't answer all your question, but this is to the first error MSGraphClient.serviceKey, Since 1.6 the MSGraphClient and AadHttpClient classes no longer expose a serviceKey property which ...
Karthik Jaganathan's user avatar
3 votes
Accepted

Rest API throws 403 when using POST Fetch in React app

You can get a request digest by sending a POST request to http://server/site/_api/contextinfo with only an accept: 'application/json;odata=verbose' header. Apparently there is some confusion about ...
Dylan Cristy's user avatar
  • 12.7k
3 votes
Accepted

SPFX save array inside item response to display in render react

Your render method is trying to render the entire assignee {assigne}, but React doesn't know how to render that object. Try changing your render to: <div className={styles.CellStyle}> {this....
willman's user avatar
  • 3,724
3 votes

SharePoint User add data using PnPJs

If you're trying to add custom data to users and you want to access that data anywhere a user object is found, I'd suggest you look at schema extensions. Microsoft has a great example of this. ...
Hugo Bernier's user avatar
  • 1,236
3 votes

SharePoint SPFx webpart not showing latest build

@Hisusu32, You are leaving one critical step out of your deployment process; you are also missing additional debug steps you really need to perform in addition to what you describe. There are two ...
A.k.A. Fritz's user avatar
  • 1,425
3 votes
Accepted

How to put image and link under PropertyPane Description field for the web part in SPFx?

Check below web part sample in Github repository where author added hyperlink on web part property pane using custom HTML: Script editor web part for modern pages built in React Specially check these ...
Ganesh Sanap - MVP's user avatar
2 votes
Accepted

SPFx - How to install latest version of Office-UI-React for SPFx v1.0.2

The problem here is that newer versions of office-ui-fabric-react are incompatible with the typescript version required by spfx 1.0.2. You can try this version, it should be supported. npm -i ...
Rune Sperre's user avatar
  • 2,249
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 ...
Lukas Nespor's user avatar
  • 1,661
2 votes

How to catch navigation event in SPFx webpart?

Try using context.placeholderProvider.navigatedEvent instead This has been suggested as the way going forward. Unfortunately the documentation hasn't been updated to reflect this.
Rob Millener's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible