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
0
votes
2answers
21 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=...
1
vote
2answers
45 views

Is possible put React JS on Sharepoint Extension?

I am new to SharePoint development, and in need to create a custom side panel (with React), when click on item of list view. Is it possible to use React JS while developing SPFx extension?
0
votes
1answer
48 views

SPFx React webpart onAfterPropertyPaneChangesApplied

I have created simple web-part in react and spfx for sharepoint online. In this web-part weather.tsx have all rendering and function of the web-part. In componentDidMount function I call external API ...
1
vote
2answers
37 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....
2
votes
1answer
44 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 !!
0
votes
2answers
38 views

PnP SPFx Controls not rendering responsive

I have created one static web part using react carousal but it is not working as responsive. Please guide me if I am missing anything import { Carousel, CarouselButtonsDisplay, ...
2
votes
1answer
50 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 ...
0
votes
1answer
23 views

i am getting error on getting the ID here

RetrieveSPData(){ var reactHandler = this; jquery.ajax({ url: `${this.props.siteurl}/_api/web/lists/getbytitle('items')/items?$select=ID', type: "GET", ...
0
votes
0answers
19 views

Fields of Special Characters SharePoint List is not created in React project

I have created below function in separate library to create list and its 3 fields in the react project, however, its working with normal character SharePoint list but not with special characters list ...
0
votes
0answers
53 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 ...
1
vote
0answers
26 views

SPFX : TypeError: external__react_.useContext is not a function

I am using office-ui-fabric card in my spfx web part. Getting the error as below. createComponent.tsx:51 Uncaught TypeError: external__react_.useContext is not a function at result (...
0
votes
1answer
108 views

NPM packages for React webpart SharePoint Online try to access 'fs' on client side but it's not even necessary? React SPFX

While there is a correct answer already given at: SPFx Unable to use 'fs' module its missing the part that in webpack config it can be outflagged like this: node: { fs: 'empty' }, Module ...
0
votes
1answer
16 views

Is it possible to embed and Office 365 Video inside Custom WebPart?

We are building an Intranet (with modern pages) in SharePoint online with SPFx 1.9.1 and React and the client wants the possiblity to embed an Office 365 Video inside a custom WebPart (via Property ...
0
votes
0answers
68 views

SPFX and react-dnd

I promised myself never to write a StackExchange post with lots of code. But here we go. I am basically trying to get some basic drag-and-drop behavior working in an SPFX (1.9.1) web-part using ...
0
votes
1answer
69 views

SPHttpClient undefined error: Using React JS to add item in SharePoint list

I'm trying to add an item in SharePoint Online list using SPFx solution where I'm using React JS to perform the action. Below is the copied code, when debugging it says that: "VM242:1 Uncaught ...
0
votes
1answer
40 views

Auto play false Image Carousel SPFX webpart

I have created image carousel SPFx web-part which is set as auto-play equal to true and on click of image there is modal pop up, its working fine. But when I click on image my modal pop up open but ...
0
votes
1answer
136 views

How to retrieve Image column from SharePoint list using React js SPFx

I am trying below TypeScript to retrieve the Image column using SPFx .Unfortunately image is not rendering on page. Please help me on this.
0
votes
1answer
51 views

Css overide for office fabri ui Pivot

How can we do padding left in office fabric UI CSS for pivot component , Want to padding of Pivot component its working on develoepr tool added screenshot for same but not able to override through css ...
1
vote
1answer
42 views

Sharepoint online/365 integration (Upload files) on React app hosted on Azure and WebApi C# .Net Core 2.2

I'm struggling since some weeks ago trying to interact/automate a way to upload files from a Web App created in React and upload files to a Sharepoint Online Site – in a specific folder. The WebApp is ...
0
votes
1answer
186 views

spfx webpart react rest api

I am using REST API in my SPFx web-part and passing parameter in REST API but its not working as expected , there is some mistake in writing REST API within `` as parameter is not working: export ...
0
votes
0answers
129 views

SPFX Add webpart dynamically at runtime

I'm trying to render webparts dynamically at runtime. I have almost no experience with react, so this is where I'm stuck (I think). Using pnp-js I can get the webpart definition and manifest like ...
0
votes
0answers
87 views

Getting error: “Cannot read property 'getCurrentStack' of undefined”

We have implemented kendo's editor in the SPFx react project. Code: <Editor tools={[ [OrderedList, UnorderedList], [FontSize, FontName, FormatBlock] ]} /> The ...
0
votes
1answer
47 views

How can I add custom button in the kendo's editor for SPFx react project?

We will use below kendo code to add custom button, this custom button will use to upload document to one drive location:: <Editor tools={[ [Bold, Italic, Underline, ...
0
votes
0answers
39 views

Programmatically change a Date field

I have a form/web part where the user can edit columns. It works, but when the user needs to change value in a date column, it doesn't work. First I have the input form: <Calendar ...
0
votes
1answer
524 views

What is this strange error: Tuple type element list cannot be empty

Environment: SP2019 onprem SPFx version: 1.4.1 All of sudden below error is coming while doing gulp build or gulp serve. A tuple type element list cannot be empty.Error - typescript - src/...
0
votes
1answer
29 views

How use result of pnp response

I use PnP for getting SharePoint list item. But I don't really know, how use the result of my function. I wish to get items of my SharePoint list using PnP and assign it to my list. My code don't ...
1
vote
1answer
141 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 ...
0
votes
1answer
127 views

Programmatically trigger flow and send properties

I want to manually trigger an external flow from my SPFx project, and at the same time send values to the flow. In flow, I have my request body: { "$schema": "http://json-schema.org/draft-04/schema#...
0
votes
1answer
72 views

Assign permission of the current user to a list item programmatically

I am making an event web part which is connected to a list of items. When a user attends an event, a json object will be parsed to a txt document that is attached to that particular list item /event. ...
0
votes
1answer
271 views

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

It is so confusing that some parts of office fabric will not work as expected with different SPFx versions. I have created a SPFx solution for SharePoint 2019 on-Premise. Following things are not ...
0
votes
1answer
287 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
0answers
28 views

React button to open SharePoint Document Picker

I have seen and experimented with the Property Pane controls that allow you to select a document or image from a pane and was curious if anyone has seen this same capability available from a button ...
0
votes
2answers
371 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 ...
0
votes
1answer
199 views

Get the selected item (item id) of SharePoint list (On Premise 2019) with SPFx and React

I am trying to customize the edit form of SharePoint list using web part SPFx. I need to get "item id" of selected item and the send it with query string to new page (custom edit page). have you any ...
0
votes
2answers
138 views

How to render HTML value e.g “<div><div>Go to Google</div><div>Search on spfx react project</div></div>”, in SPFX project using type script?

We have created spfx react project for SharePoint online using type script: Here, props.appendTextDetails value is "Go to GoogleSearch on spfx react project". const FCRichtext = (props:any) => { ...
1
vote
1answer
124 views

JSOM in React, 'SP' is not defined no-undef

I am making some tests in order to update a page on sharepoint on premise 2013. The goal is to use reactjs to modernize this page. However, when I try to use JSOM, especially to create an item, I ...
1
vote
1answer
267 views

SPFX - React JS : How to handle an empty list

SPFX-ReactJS newbie here. Wondering how I should handle an empty list. I am trying to connect my web part to a list and simply display them on my web part and automatically update the page as items ...
0
votes
1answer
46 views

MaterialUI packages throwing error in SPFx solution

Environment: SPFx with Office 365 I have created a SPFx solution with 1.8 as @microsoft/sharepoint version. I am trying to utilize material UI. so I have installed npm install @material-ui/core into ...
1
vote
2answers
313 views

spfx webpart/component with position: fixed

I'm trying to create a spfx-react webpart for SharePoint Online like the feedback button on the walmart page (https://www.walmart.com right side). This works in edit mode and in the workbench (local ...
0
votes
1answer
82 views

Small styling discrepancies using React with Material-UI in SharePoint Online (non-SPFx)

When I build and publish my React application which uses Material-UI, to SharePoint Online I see a couple of small styling issues. It appears SPO's styling is being inherited by my Material-UI ...
0
votes
0answers
148 views

SPFX Conditionally display fields in custom web part (react-list-form)

New to SPFX - I'd like to implement the custom web part react-list-form. Everything looks and works great, except I also need the ability to conditionally show / hide certain fields based on other ...
0
votes
0answers
51 views

SPFx not rendering correct amount of items after selecting number with slider

I am currently building my RSS webpart in SPFx with React. It is almost ready but I have a problem with rendering the correct amount of items after choosing how many items I want to render. Initially ...
0
votes
1answer
1k views

Getting Minified React error #31 when trying to view SPFx webpart in Internet Explorer 11

We have SPFx webpart on version 1.8.2 using React version 16.7.0. When we test the webpart on Google Chrome it works perfectly fine. But when we test it on Internet Explorer 11 it shows error in ...
0
votes
0answers
29 views

Getting only blue color in SPFx even though another color in SCSS

I am having trouble after with getting the desired color in my RSS webpart in SPFx. I get the standard blue from SPFx even though I have specified a background color. This question is related to the ...
0
votes
0answers
30 views

Debugging react based modern spfx webpart using hosted workbench issues

We have been successful in developing multiple custom modern Web Parts against two tenants ( one used for development and one for build. Until recently the standard debugging method of serving from ...
1
vote
0answers
83 views

(Problem)SPFx rendering items from RSS after selecting number of items you want to display with slider

I am currently building an RSS webpart in SPFx using React as a framework. Now I am in the stage that I want the user to be able to select how many news items he/she want to see with a slider (taken ...
0
votes
1answer
70 views

SPFx React webpart is not displaying all XML items from RSS News Feed

I am currently building an RSS News Feed in SPFx using React as a framework and using an XML link https://feeds.expressen.se/nyheter/ (Swedish news if curious). I can display all items, in this case ...
1
vote
0answers
124 views

Issue with rendering XML data in SPFx

I am in a project of making a RSS feed in SPFx and using React.js and TypeScript. When I try to retrieve XML data from a news site, the console gives error: Because it complains about CORS, so I ...
1
vote
1answer
3k 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
48 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 ...