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.

Filter by
Sorted by
Tagged with
8
votes
2answers
12k 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
2k 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
26k 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. ...
4
votes
4answers
1k 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 ...
4
votes
1answer
683 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
129 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
594 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
2k 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
112 views

SharePoint User add data using PnPJs

I'm creating a SharePoint SPFx web part app. Using PnPjs I'm able to retrieve the current logged in user's information: sp.web.currentUser.get().then((response : CurrentUser) => { console....
3
votes
1answer
1k 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
2k 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
509 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
1answer
134 views

SPFX Webpart width shrinked after published in Modern Page - SharePoint Online

Developing SPFX app, where everything looks good(I mean the width) in edit mode, soon after publish the webpart width is getting reduced somehow. Using Fabric UI CSS .propertyDigitalManagementWebpart ...
3
votes
1answer
958 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 ...
3
votes
0answers
335 views

What are the supported office UI fabric versions for SPFX 1.1.0

There are many threads and answers regarding this question. But i didn't find a satisfying answer. I am currently working on a SPA for SharePoint 2016 OnPrem. I scaffolded my Project with the Yeoman ...
3
votes
0answers
2k 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
4k views

Updating SPFX breaks gulp

So i tried installing a webpart from scratch & added React as a framework. All good, but the version of @microsoft dependencies is 1.5.1 AND the latest is actually 1.6.0. I've tried updating ...
2
votes
1answer
169 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
1answer
1k views

SharePoint Online Modern Page Layout Column Size

I am trying to make three column page layout and I want middle column to be bigger than other two. How it is possible. Do we have to add anything into spfx web part or is there other way !!
2
votes
1answer
526 views

Use CKEditor in SharePoint spfx solution with React

We are trying to set up and use CKEditor5 with React in a SharePoint spfx solution (of course also React), but we are struggling with making it work as we would like. The Classic build of CKEditor5 ...
2
votes
2answers
2k views

Creating a SPA (single page App) on SharePoint Online

I am new to the SharePoint world & I have been assigned to make a Single-page Application using any Framework (ReactJS/Angular) on SharePoint online (Microsoft 365). The Application needs to take ...
2
votes
1answer
821 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
1answer
321 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
2answers
776 views

Retrieving data from rich text editor in spfx web part properties

I am currently creating a custom web part, the webpart is using PropertyFieldCollectionData to collect user data (https://sharepoint.github.io/sp-dev-fx-property-controls/controls/...
2
votes
1answer
316 views

React Props in main component, change to state on change dropdown

I have a main component that is calling a list. I am passing this item to one of the components prop which is the value of a dropdown. For me to be able to setstate, I assigned the prop to state ...
2
votes
2answers
1k views

I am using pnp peoplepicker in spfx and I want to clear the selected value by user on this people picker by code

Here is the people picker I am using within my component's Render: <PeoplePicker context={this.props.context} titleText="" personSelectionLimit={1} groupName={""} showtooltip={true} selectedItems=...
2
votes
1answer
555 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
2answers
467 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, ...
2
votes
1answer
2k 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
2answers
1k 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
42 views

Get Detailed SP List Item Version History

I am using ReactJS to develop a custom form and my list includes a multiple lines of text field with the AppendOnly flag set to true. When I open the form, I want to retrieve the version history for ...
2
votes
0answers
2k 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 ...
2
votes
0answers
115 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 ...
1
vote
2answers
436 views

PnP Carousal Control Button style and dots

I have created react carousal from pnp controls, I was looking for help to style next and previous buttons and is there any way to add dots for the slides My Carousal Code public render(): React....
1
vote
2answers
281 views

How do you use componentDidMount and componentDidUpdate in a BaseWebPart class?

Someone told me that he was using componentDidMount and componentDidUpdate in his BaseWebPart class, but looking at the documentation below I realized it shouldn't be possible since it's not a React ...
1
vote
2answers
3k 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
1k 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
574 views

Rest API throws 403 when using POST Fetch in React app

I have a React App which is deployed to SharePoint application folder in IIS. When I try to create a folder using rest api, it throws: http://sp2016:5155/_api/web/folders 403 (FORBIDDEN) const ...
1
vote
2answers
4k views

How to clear Office-ui-fabric-react fields after object has been added to list?

I have a simple list that gathers info from two text fields, a drop down and a people picker. I am able to submit to my custom list. I have set the state back to the defaultValue, which I have defined ...
1
vote
1answer
595 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
2answers
927 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
512 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
60 views

Problem with creating an instance of a class in SPFX(TypeScript/React)

I am facing a problem with creating an instance of a class in SPFX. I am not sure what I should put in as a parameter. The compiler complains on whatever I put as a parameter. Here is my code: import {...
1
vote
1answer
97 views

Hide table column from property pane (WebPart)

I am still new into the WebPart development so bare with me: I have created a WebPart consisting of table and I have several toggles in the settings that can show hide a column in the table. Somehow I ...
1
vote
1answer
2k views

SPFX Tiles webpart

Hi I am new to SPFX and react JS , i like to create Tiles webpart from sharepoint list where it will render all properties of tiles from list like icon, colour,text, I had tried using office fabric ...
1
vote
1answer
352 views

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

In the select method of SP PnP JS how can I add column names dynamically? For e.g. can the below code sp.web.lists.getByTitle("My List").items.select("Col1", "Col2"); be written something like this ...
1
vote
1answer
2k 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
1answer
1k views

Upload attachment to List Item using React & Axios (REST API)

Well the title pretty much sums it up. I've got a custom form outside of sharepoint that creates/updates/views items from a sharepoint list using Rest API (with accessToken). Now i need to be able ...
1
vote
1answer
281 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
7k views

Spfx, WebParts and PnP : How to get the current user id?

Good morning every SharePoint fellow ! I know this question has surely already been posted, but i could'n't found a clear answer. Context I am programming a custom WebPart for Sharepoint online with ...

1
2 3 4 5