Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [react]

React is a JavaScript library for building user interfaces. It uses a declarative paradigm and aims to be both efficient and flexible.

7
votes
2answers
4k views

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

How to call function from ".ts" file for button onClick event in tsx file? this is my function in ts file: public button_click(): void { alert("CLICKED!"); }
6
votes
1answer
1k views

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

I would like to create forms using react and PnP-JS Core with sharepointframework to perform CRUD Operations on sharepoint lists. Do you have any simple examples I can look at and test on SharePoint ...
4
votes
1answer
268 views

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

I have got a kendo grid built into a SharePoint SPFx web part. All works great in my local work bench however when I go to build the kendo components give lots of errors. Seems to be a known issue ...
4
votes
1answer
44 views

Create-react-app version 2 not compatible with SharePoint?

I'm trying to make a web part with React (not SPFx, just a regular mini React app) for use in SharePoint. I have done so successfully with version 1.x of react-scripts, but now 2.x is out, with ...
3
votes
2answers
109 views

How to combine two SPFx web parts?

We have two separate SPFx web parts (call them A and B), and you can add A and/or B to same SharePoint Online site. Now there is a need to create web part C that combines both A and B into single web ...
3
votes
1answer
884 views

how to use click event in html string in spfx (react)

I have a html string embedded in a map function like this pnp.sp.web.lists.getByTitle("Division").items.select("Title","ID").get().then((item: any[]) => divtree=item.map(per =>'<li id='+...
3
votes
1answer
591 views

SPFX Fabric UI React Buttons handled by one click event

I need to put multiple CompoundButtons on my SPFX webpart, I need them to trigger the same onClick event handler. How do I know in my event which button has fired? I tried to use an id, but it seems ...
3
votes
1answer
599 views

Get SharePoint List Items using SharePoint Framework React

I am getting SharePoint list items using framework react with following code: Developing SharePoint Framework Web Parts Using ReactJS import * as React from 'react'; import { css } from 'office-ui-...
3
votes
1answer
40 views

Creating component in SPFx webpart from command line

Is there any way to generate component in React from command line (similar to Angular's ng generate)?
3
votes
0answers
963 views

“Error: Token renewal operation failed due to timeout” in adal.js SharePoint Framework React

I have developed a webpart to get Azure users using SharePoint Framework React with graph api. But in Adal.js file getting following error: Error: Token renewal operation failed due to timeout I ...
2
votes
1answer
46 views

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

My scenario: i want to create a spfx web part that uses a rest API that will query all the alerts throughout the whole site collection for the current user. I want to know which API to use and ...
2
votes
2answers
297 views

How to catch navigation event in SPFx webpart?

Is it possible to catch navigation event inside Sharepoint Framework web part? I know this is possible in application customizer using context.placeholderProvider.changedEvent, but I cannot find ...
2
votes
1answer
230 views

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

How to install latest version of Office-UI-React for SPFx v1.0.2 for On-Premise server? With buildIn React version in SPfx framework v1.0.2 its all okay: I can not use the latest version, what else ...
2
votes
1answer
263 views

How to change state in webpart.tsx from wepart.ts property pane - SPFx

I am trying to add a button to my property pane that will pop up a modal where the user will be able to enter in an image to be displayed on my banner webpart which is just an image carousel. I ...
2
votes
2answers
442 views

Add external libraries in SPFx?

How to add external libraries like material-ui to our Spfx Webpart? I know to add external libraries having their CDN link and types definition like jquery but don't know how to add libraries which ...
2
votes
0answers
44 views

SPFX and React : Component not rendering correctly because of findDOMNode returns null

I am a new React learner, and I may have a situation with render() and findDOMNode. What I have and what is the wrong behavior : I'm quite new to React so, I may have done lots of mistakes there. I ...
2
votes
0answers
42 views

I need to get all properties of taxonomy termstrore. which I already get are “Label”,“WSSId”,“TermGuid” but I need to get Other labels as well

Is there any solution to get other properties for taxonomy termstore. As I remember, I usually used "include" to get all properties which I mentioned in JSOM. But now I need to work by using ...
2
votes
1answer
405 views

Add Dynamic Property Panes to SPFX

I know this has been asked 1000 times, but i've tried everything in the first 2 pages of google so i've decided to come to you guys for help. I'm trying to create some dynamically added property ...
2
votes
1answer
368 views

Display SPFx Application Extension differently in Read/Edit mode of a Site Page

Question: Is there a utility built into SPFx or a React library to change what to render based on if the page is in read or edit mode? Or more exactly, a way to switch the rendering when switching ...
1
vote
1answer
607 views

SPFX - How to get data from _spPageContextInfo

Object _spPageContextInfo is available in my DOM tree. How to get his properties with react.JS ?
1
vote
1answer
57 views

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

I'm making a SPFx webpart and I've 3 date pickers. See images below. First I start with 3 empty date pickers (oké they looks good) Then I select a pick up date (no problems so far) Then I select a ...
1
vote
1answer
89 views

How to upload file in document library using pnp/sp

I have written code to upload the file in SharePoint online .. but while upload the page gets refreshed .. Please help . Code - sp.web .getFolderByServerRelativeUrl("Student%20Details%20No%...
1
vote
1answer
63 views

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

I want to call SPFX react child component from parent component . But I am getting error while creating react component . Error: Declaration or statement expected. Cannot find name 'div'. Type '...
1
vote
1answer
95 views

Problem with rendering a React component in another component for SPFX

This is my first post here, I guess :) I am writing because I have a task to make a Shopping app which should be made in SharePoint Framework and use React as a framework. My current problem is ...
1
vote
2answers
474 views

Trying to use SPFX + React. Error “yo : The term 'yo' is not recognized as the name of a cmdlet”

I want to build my first SPFX React web part, so i am following this article:- https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components first step i ...
1
vote
1answer
139 views

Reuse Child Component Method to Parent Component Fabric React - SPFx

I am using Fabric React with SPFx. I want to use one component public method to another component. How can be possible to reuse method? My Parent Component: export class PanelSmallRightExample2 ...
1
vote
2answers
2k views

SharePoint Framework: how to display document library data in a SPFx client side web part using ReactJs and Type Script

I need to fetch data from document library which resides in SharePoint online and display in spfx client web part with filtering, paging and sorting features. Tools: ReactJs, TypeScript, Visual ...
1
vote
2answers
620 views

Using React in Sharepoint 2010

I was asked to integrate my React app into a SharePoint 2010 page. I've never worked with SharePoint before. I've tried searching online, but couldn't find any definite answer if this is doable with ...
1
vote
1answer
28 views

Anyone can explain the .ts file and .tsx file use and difference in SPFx react webpart?

In SPFx No JavaScript Framework webpart contain "webpart.ts" file and write code in it. But in React SPFx webpart, there are 2 file : 1) webpart.ts file 2) webpart.tsx file in component folder. ...
1
vote
1answer
281 views

Want to open popup in button click SPFX React

I Want to show modal popup in spfx react webpart. Below is the code I am using: <div> <button onClick={e => this._OpenModal(this)}>Open Modal</button> <div id="myModal" ...
1
vote
1answer
72 views

Office UI Dialog not showing correctly on SPFX Web part

On the SharePoint Workspace the UI dialog works fine. The dialog comes out when you click on Forward Case. When I have gulp packaged the solution and adding the app (locally on gulp) then I get this ...
1
vote
1answer
146 views

Office UI Fabric React People Picker Remove 'X'

Is there a way I can have certain personas unremovable from people picker? I was thinking how I can remove the X button: On the screenshot, I need to disable removal of test user2 and Test 115 while ...
1
vote
1answer
2k views

SPFx - Get User ID from User Login Name

As the title suggests, does anyone have a working method for getting a users ID from a users Login Name (not the one signed in)? Login name like: i:0#.f|membership|firstname.lastname@contoso....
1
vote
1answer
353 views

Cascading dropdown list in SPFx web part

Can someone help me with this issue as I would like to create cascading dropdown lists inside the web part itself and not in the property pane. I have found this code in [github react-...
1
vote
1answer
38 views

Problem with SharePoint version

I'm creating all my projects with yo @microsoft/sharepoint I tried to specify a version but it ignore me, and I have to change manually the version every time from 1.8 to 1.7.1, and if I create a new ...
1
vote
0answers
46 views

SPFX Webpart with Dropdown don't work on Classic pages

I currently have a spfx web-part which contains a dropdown, when I add it to a classic page and try to use the dropdown when the SharePoint ribbon displays the Format Text tab, the dropdown keeps ...
1
vote
0answers
43 views

I want to upload the document in SharePoint online document library with content type

My code - sp.web .getFolderByServerRelativeUrl("Student%20Details%20No%20Content%20Type") .files.add(fileContent.name, fileContent, true) .then(f => { f.file.getItem()....
1
vote
0answers
72 views

Set TaxonomyPicker with initial values from term store SPFx

I've created a command set for creating and editing a new product and save it into a SP list. That list uses a term set for the categories. When a product must being edited, the ProductEditor ...
1
vote
0answers
305 views

@types/react and @types/prop-types errors when building with gulp build or gulp serve

For my team's project, some of us are hitting a type issue when building. We're using version 1.7.0 of all the @microsoft/sp- packages. tslint version: 5.9.1 typescript version: 2.4.2 Build tools ...
1
vote
2answers
140 views

Can I use SPFx 1.7 with Sharepoint 2016 Feature Pack 2 updated to the latest January 2019 patch?

We have an on-prem Sharepoint 2016 server which has been kept up to date with the latest security and feature updates and patches. We want to build a client application using SPFx Web parts, ...
1
vote
1answer
42 views

How can I create webpack package of SharePoint online for react App?

I can create package of react app for SharePoint online by using "gulp serve" and "gulp package-solution" commands. However, I want to create package by using Webpack. How can I achieve this?
1
vote
1answer
148 views

SP 2013 - Calling list data from create-react-app on separate domain

We want to read and update SP2013 list data from our purely client-side javascript create-react-app project. Our production build files (html and js) can be hosted in the same domain on SharePoint (...
1
vote
1answer
130 views

Office UI Fabric Ract Command Giving an error UNMET PEER DEPENDENCY

Issue while adding command "npm --save install office-ui-fabric-react" NPM Version: @microsoft/generator-sharepoint@1.0.2 gulp@3.9.1 yo@2.0.2 How to solve this issue? It gives warning:office-ui-...
1
vote
1answer
206 views

SharePoint 2016 SPFx React TypeScript Issue

I am getting an error of TypeScript 2.2.2 in SharePoint 2016. I can install SPFx web part with No JavaScript Framework approach. And it's working fine but when I choose "React" in "yo @microsoft/...
1
vote
1answer
215 views

SPFx get all sites were user has permissions

is there a way to get all site collections and subsites where the current user has access to? I would like to build a web part in SPFx and in React. Any suggestions are welcome. Thank you.
1
vote
0answers
631 views

Using SP-PNP-JS to get data from custom content type fields with React

I'm currently making News Listing Web Part, where News are made as custom content type. I managed to get the basic fields like id, title, but others are really bothering me. The API fetches all the ...
1
vote
1answer
174 views

how to display two sharepoint list data separately in react?

my requirement is i have to display 4 list separately under collapsable panel but the problem is, I am not able to segregate the list , is there any way? help me. export interface IMyWorkListState { ...
1
vote
1answer
182 views

SPFx - How to protect and minify my output bundle.js

When i deploy my solution.sppkg i want to protect my output bundle js to avoid js injection? How to minify bundle.js with gulp task? How to do this?
1
vote
0answers
370 views

Sharepoint 2013 Hosted Add-in using React and React router

I have a reach JS app that uses react router. As a stand alone it works perfectly. I am now trying to use it in a SharePoint hosted app. I created the app using create-react-app from github. When I ...
0
votes
1answer
124 views

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

As far as I can see it should be doable to create a package which can automatically, once the app is added to your site, to create a page and embed the webpart on it - as described here: https://...