Questions tagged [react-webpart]
The react-webpart tag has no usage guidance.
45 questions
0
votes
1
answer
19
views
Filter SharePoint multiselect choice column via react query
I have a column in my SharePoint list, named "Catégorie", that is a multiple choice column, where I have multiple options "Option 1", "Second Option" etc.
How should I ...
- 133
0
votes
0
answers
43
views
Help installing and using CKEditor5 in an SPFx React functional component webpart
Looking for help installing or getting started with CKEditor in an SPFx SharePoint online React Functional Component.
After installing, uninstalling and reinstalling, I continue to have the following [...
0
votes
0
answers
50
views
Cannot Install React-Birthday Sample Webpart
I'm trying to install React-Birthday webpart from Github repository sample webparts but facing issue when running npm i.
Things I've tried:
I tried to remove node_modules, clear cache, install npm ...
- 361
0
votes
0
answers
77
views
Property bags as site custom fields: are them accessible by webparts?
I'm trying to figure out how to setup site custom fields, to be retrieved from React webparts.
Doing some research, I've found several articles talking about Property Bags, like this one which seems ...
- 103
1
vote
1
answer
143
views
How to fetch Mail-Enable security Groups in SPFx react?
I want to show Mail-Enable security Group Names in select tag.
Can someone please tell how can I get the group names using SPFx react?
- 41
1
vote
1
answer
183
views
How to fetch data from document library in SPFX react within a very short period of time?
I am fetching data from document library which has more than 5000 items. While doing this, it takes lots of time. Is there any solution to reduce this time?
- 41
0
votes
1
answer
76
views
Bootstrap module not found in react SPFX
My node version - v16.13.0 and npm v - 8.1.0 ----- i have installed bootstrap 4 or bootstrap 5 but it gives me same error
- 19
0
votes
1
answer
450
views
I am using style attribute in React Select but its showing an error in SPFx react. Can someone please tell how to resolve this?
I am using the below code:
import Select from "react-select";
<Select
className="form-control-sm"
name="form-field-name&...
- 41
0
votes
1
answer
886
views
how to download file from SharePoint library with static name in SPFX react?
I want to download my file with a specific name from SharePoint library using SPFX react.
<div key={index}><a download="" >{item.name}</a></div>
(I am using anchor ...
- 41
0
votes
1
answer
260
views
Getting [object object] in spfx search box value
I am working on spfx webpart which will send search value to url and append to show the results in enterprise search below is my code but every time i enter search value it always return [object ...
- 59
1
vote
0
answers
186
views
Create client instance for reuse
I was trying to set up an instance of client so I don't have to write this.context.msGraphClientFactory.getClient().then((client: MSGraphClient) every time I want to make a request.
Something which ...
- 123
1
vote
1
answer
1k
views
Building a react application with Microsoft graph and SharePoint
I’m starting a new job and been tasked with creating a react based application which will be built in SharePoint and retrieve data using Microsoft Graph. I am new to this and am struggling with ...
- 123
0
votes
1
answer
886
views
Update input based on a radio button selection in the properties pane
I'm trying to update a input field value in the properties pane, based on a radio button selection, but its not changing.
I'm sure it'll be something simple-ish!
I've looked about but can't find a ...
- 13
1
vote
0
answers
575
views
403(Forbidden) Invalid permission error in my SPFx web part when trying to access SharePointSiteUsageDetail with MSGraph
I can GET data in Graph Explorer,but when I try in my SPFx solution it gives me an 403(Forbidden) error:
https://graph.microsoft.com/beta/reports/getSharePointSiteUsageDetail(period='D30')?$format=...
- 25
0
votes
0
answers
25
views
Having null result whenever using dom selectors in spfx webpart
Trying to get the tsx video tag duration by selecting the tsx tag through dom selectors but getting null in the console
0
votes
1
answer
502
views
Reverse the display name with split name on SharePoint Spfx
I am trying to show displayname from AAD using in my spfx but for the full name i cannot get the array of first item. I know i am missing something from below but couldn't analyse what's missing.
...
- 159
1
vote
0
answers
274
views
SPFX React Webpart - Problem with react boostrap
I am building my first spfx react webpart to be depoyed on SharePoint Online.
I have trouble making react bootstrap work.
What i want to achieve is to open a form in a modal when the user click on a ...
- 131
0
votes
0
answers
96
views
How to prioritise loading of one web part in SPFx?
I have a SharePoint modern page on which I have a couple of web parts installed. The web part on top is a carousel that needs to be rendered first. The problem I am facing is that when the page is ...
- 85
1
vote
0
answers
138
views
SPFX Uncaught TypeError: state.Array.slice is not a function
Code where the error occurs:
const initialState: IUserProfileState = {
useremail: '',
status: '',
//items: {} as IListItem[],
EmpID: '',
ExeArray : {} as IArrayItem[]...
- 39
0
votes
2
answers
1k
views
SPFX ClientSideAssets folder and dist folders have old code
When I build my solution, minified JS files have my old lines. Here are my steps:
1 - gulp clean
2 - gulp build
3 - gulp bundle
4 - gulp package-solution --ship
file under \dist\test-web-part.js
file ...
- 532
1
vote
1
answer
285
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 ...
- 187
1
vote
1
answer
893
views
Fetch multiple images from SharePoint library and display images in SPFX webpart
SharePoint Library -- Multiple image and HexID field
I am able to display one image by giving full URL of images but i have to filter the images based on HexID, But I am not sure how to apply filter, ...
0
votes
1
answer
845
views
Using PnPJS Library to display list of data
I'm building a SPFX React webpart. I currently have the webpart on my SharePoint site's workbench page.
Here is the code that I'm currently using:
private _renderListAsync(): void {
// Local ...
- 71
1
vote
1
answer
2k
views
How do I get the selected value text(display name) from the web-part Property pane dropdown?
I have a Web-part that I would like to show a title on the component that is dynamically populated from the selected value from a property pane drop down. I am able to get the value from this....
- 13
1
vote
1
answer
2k
views
ReactDom render multiple elements spfx
Let me start by saying I am working on my first webpart and learning react spfx. I am trying to render multiple elements using ReactDom.render. How do I render both the elements on the same .ts file? ...
- 299
0
votes
2
answers
2k
views
SPFX - calling async function - Missing properties
I'm trying to create a modern webpart that connects to MSGraphClient using the UI Fabric, to create quick access to files.
I'm getting the follow error calling an async function with _allItems
(...
- 1
1
vote
2
answers
2k
views
Handle failure response on SharePoint list item add using PnP JS
I have created one SPFx web part with React framework to add the items from .CSV file to SharePoint list using PnP JS.
I have used PnP JS item.add() method to add the item in the list by looping each ...
- 93
0
votes
2
answers
506
views
React Calendar gives Error on Internet Explorer 11
I am new to SP dev fx components and have used react-calendar linked react-calendar. I works fine on Chrome, Firefox but gives error
Object doesn't support property or method 'from'
on Internet ...
- 111
0
votes
1
answer
2k
views
Where to add an event listener when using SPFx and React
Which is the preferred place to add an event listener in your code if you're using SPFx and React?
The .ts file or the .tsx file?
And which function, componentDidMount, getInitialState, render?
The ...
- 343
0
votes
1
answer
2k
views
Dynamically Pass List item parameter using pnp js
I have created SPFx web part using React JS framework. I am reading the data from the CSV file and adding item to SharePoint list using inBatch in PnP JS.
I was able to add the item to SharePoint ...
- 93
0
votes
1
answer
2k
views
Image Carousel Spfx webpart
Hi I am working on SPFx image carousel web-part using react responsive carousel.
I want that if user click on image on carousel it will show detail description of image in modal dialog on same page:
...
- 149
1
vote
1
answer
3k
views
How re-render react when toggle properties change
I'm using spfx and react, i have toggle on WebPart properties, and i want to re redner when toggle was change in the .Ts page not in Tsx, i have no idea how to do this, there is no SetState on .ts.
I ...
0
votes
1
answer
1k
views
SPFx React REST API 403 error
I have created SPFx webpart with React. I am calling REST API to get documents from document library and it's work perfectly in workbench but in SharePoint page i am getting error 403 - Forbidden
...
0
votes
1
answer
298
views
Empty "URL" does not load SPFx web-part
I am creating SPFx web-part in which I am using office fabric to bind SharePoint image link (hyperlink column).
Web-part works fine if all values present. If hyperlink column is blank web-part does ...
- 149
1
vote
2
answers
1k
views
SPFX 404 When Trying to Get Current User In Workbench
I'm trying to get the user context in my React web part and I am getting 404's when requesting: https://localhost:4321/_api/web/currentuser
This is the part of the code that fetches the current user:
...
- 21
1
vote
1
answer
2k
views
Migrate Current React JS Project to Run in Sharepoint
Our team has created a React SPA that is js based as opposed to ts. From what I've seen, creating and utilizing a webpart requires typescript. This project is fairly large so I guess I'm just ...
- 21
0
votes
2
answers
4k
views
How to create common scss file in SPFx solution?
I have created SPFx solution which contains multiple webparts (Four webparts in 1 solution). All the webparts design are similar but with different logic.
Right now, I have created a duplicate file ...
- 455
6
votes
1
answer
34k
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.
...
- 519
-1
votes
1
answer
337
views
Debounce in sfx react
The code I am using:
<TextField onChanged={e => this.handleCommChange(e, 'Contact')}
private handleCommChange(e: any, controlType: any): void {
const { temp_items } = this.state;
const ...
- 103
1
vote
1
answer
255
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()....
- 103
1
vote
0
answers
301
views
Unable to print result in spfx react (got the data)
Getting data from SPFX React (json) -
this.state = {
testProperty1: "",
hideDialog: true,
showModal: false,
items: [
{
Id: "",
title: "",
...
- 103
1
vote
1
answer
519
views
Unable to open popup in spfx react
<div className="backdrop" style={this.backdropStyle}>
<div className="modal" style={this.modalStyle}>
{this.props.children}
<...
- 103
1
vote
1
answer
4k
views
Cannot read property of undefined in spfx
Hear is a SPFx react webpart ".tsx" file code image
Have you any solution ?
- 519
2
votes
1
answer
317
views
MS Graph API - Problems on SPO Mobile-App
The Background: I am developing Sharepoint Online Webparts on-demand. Sometimes the functionality of these Webparts include the use of Microsoft's "Graph-API" to access Data regarding Office 365 ...
1
vote
1
answer
3k
views
How to connect react web part to azure sql database? [closed]
Any advice about how to connect a spfx web part using the react template to an azure sql database.
But can't seem to find a clear example. I'd be looking to bind controls e.g. Combo boxes to a sql ...
- 199