Questions tagged [reactjs]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
4 votes
4 answers
2k 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 ...
Palina's user avatar
  • 51
4 votes
2 answers
158 views

SPFx- Routes vs toggling visiblity

I have a requirement in which I have to hide the component from the page and load a new component. Which one is the preferred approach: Toggling the visibility of component Using routes
nbi's user avatar
  • 785
3 votes
2 answers
1k views

Integrating Azure custom BOT on SharePoint home page

I am planning to create a custom UI Bot using ReactJS and have it on the Home page(NOT modern) of our SharePoint site. After some research, i found out we can use it with SPFX webpart and possibly ...
SandeshR's user avatar
  • 1,992
3 votes
2 answers
1k 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?
Leo Altissimo Neto's user avatar
3 votes
2 answers
3k views

Office UI Fabric DetailsList(React) rendering: DetailsColumn.render() error

I am trying to add a very basic implementation of the Office UI Fabric's DetailsList React component to my project, but keep on getting the following error when trying to render it: 'DetailsColumn....
Lachezar Stefanov's user avatar
2 votes
2 answers
3k views

Workbench issues with spfx 18.2 and react 16.8.4

I have recently updated a number of modern spfx webparts to spfx 18.2 and this morning when I try to debug in workbench (locally and on tenant) I am getting serve errors in relation to react and react-...
Allan MacRitchie's user avatar
2 votes
2 answers
4k views

SPFX webpart context is undefined

Ok so i've searched for a while and tried everything. I've followed these steps as well -> How to retrieve pageContext in SPFx? So far its just a "testing phase", but i get stuck at the beginning ...
Dante R.'s user avatar
  • 569
2 votes
1 answer
34 views

Feasibility of introducing React to a locked-down SharePoint environment [closed]

The job I work at has a locked-down SharePoint 2013 environment (no CDNs, no external pages, etc...) Most work is done with SharePoint Designer or the SP UI, with Visual Studio and JavaScript as a ...
Will's user avatar
  • 23
2 votes
1 answer
717 views

Ternary operator in SPFx to show hide

I am Working on SPFx and writing below code to get current user belong to particular group or not and if its belong then show else hide below is my interface: UserInGroup:boolean; State: UserInGroup:...
Ashok 's user avatar
  • 49
2 votes
1 answer
3k views

How to retrieve user and groups from sharepoint online using SPFX Webpart

I have to retrieve all users and groups from sharepoint online site,it should be displayed in spfx webpart in below format.Provide me any code examples in React JS. UserName GroupName user1 ...
Elina's user avatar
  • 369
2 votes
0 answers
155 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 ...
Paul Rowe's user avatar
  • 168
2 votes
0 answers
1k views

Sticky Header in SPFx webpart

I have a SPFx webpart where I am using "DetailsList" to bind search data, I want to make header sticky while person scrolls the webpart, I have a search bar then dropdown and then grid in ...
kumar's user avatar
  • 139
2 votes
1 answer
911 views

Best JS framework(Angular/React/Vue) to use in SharePoint 2013 [closed]

We have tools (Basically CRUD operations in multiple lists across sites/site collections. Handles large amount of data and has lots of business functionalities/logic) that were built using jQuery and ...
Puli Bala's user avatar
2 votes
0 answers
233 views

Dynamic update Icon in SPFX client Web Part

I am using office ui frabric details list to display documents on spfx client web part from here. Now, I want to implement check-in/check-out icons to be displayed on spfx client web part dynamically ...
raju's user avatar
  • 153
2 votes
0 answers
62 views

Is it possible to create a SharePoint hosted list by SPFx?

I need to create a list inside the app which I can remove it when I delete the app from the site.
Sara Shahinzadeh's user avatar
1 vote
1 answer
633 views

Display multiple Dynamic IPropertyPanePage.groups Sharepoint Online Framework

Hi everyone I'm creating a Web Part in order to display a full width Bootstrap grid with you can personalize Sharepoint pages. Selecting the Grid Size options the Grid is created and everything works ...
Matteo Nasuelli's user avatar
1 vote
1 answer
2k views

Open image in new tab in spfx webpart

I want to open image in new tab if some one click on legend "Click here". <p className="legends"><FieldUrlRenderer text={'Click here'} url={imageList.Image ? imageList.Image["Url"] :''} ...
kumar's user avatar
  • 139
1 vote
3 answers
1k views

Reactjs, TypeScript & Webpack on SharePoint2013

I know that Reactjs, TypeScript & Webpack can be used on SharePoint Online to create web-parts. But can it be possible to create web-parts for SharePoint 2013 on premise. Please let me know if it ...
Milind's user avatar
  • 1,538
1 vote
2 answers
9k views

SPFX react - click button to update web part

I am using the SharePoint framework with React. I have a button on the web part that when clicked, I want to output a string on the web part. The way I currently have it set up, you have to refresh ...
steveareeno's user avatar
  • 1,185
1 vote
1 answer
109 views

Adding List item without user info (anonymously) for authenticated users in SP Online using JS

We have a SharePoint online site with organization only access. We have set of users who will be submitting a survey/feedback which needs to be added to list without user info (anonymously) to follow ...
Gaurravs's user avatar
  • 3,558
1 vote
1 answer
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 ...
kelank's user avatar
  • 97
1 vote
1 answer
674 views

How to sort a sharepoint list according to average rating column in react js?

I have a list which is to be sorted accoring to the average rating column and the top 3 items is to be displayed in react js. This is the api endpoint used : ${this.props.siteurl}/_api/web/lists/...
sweta Nayak's user avatar
1 vote
1 answer
416 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 ...
Prashant Shah's user avatar
1 vote
1 answer
233 views

Rest apis in SharePoint

I am new to SharePoint but not having any luck. Please correct me if I am wrong on the process so far. I am using react and need to create a CRUD app in react for SharePoint, so to do this I need to ...
user98224's user avatar
1 vote
1 answer
1k views

how can we automatically add commas to numbers being typed in SPFx react fluent textfield. ex: 1,000,000,000

<div> <TextField value={this.state.Budget} onChanged={this.onChangeBudget} /> </div> public onChangeBudget = (value: string) => { console.log("Budget : ...
Sunny Sinha's user avatar
1 vote
2 answers
2k views

Redirect to another component in spfx webpart recatjs class component

I have developed an component which displays the table of data and an button which should leads to the another component to create an new item in the list. I tried different approaches to get this ...
Shobha P's user avatar
1 vote
1 answer
193 views

Title Area modern ui pages does not load

I have two modern UI pages Test1 and Test2. In Test1 page, I am using SPFx webpart to hide control on particular pages. I am using CSS: global { div[class^='pageTitle_'] { display:none; ...
kumar's user avatar
  • 139
1 vote
1 answer
1k views

Responsive Design in Web Parts

How can one use a grid like this https://www.npmjs.com/package/react-material-responsive-grid so it's displayed on mobile phone properly without the Desktop View on any Mobile phone browser(Safari,...
j03doeson's user avatar
1 vote
1 answer
4k views

Implement Display, Edit and New forms in spfx web part using reactjs

I have 3 buttons on spfx web part 'Display','Edit' and 'New'. When I click on these buttons, respective form should open with text boxes and data from sharepoint (online) list. I want to use Reactjs ...
raju's user avatar
  • 153
1 vote
1 answer
3k views

office-ui-fabric-react upload file compoment and country-region-selector abscent

how can get the "upload file" and "country-region-selector" compoments in office-ui-fabric-react. it seems that office Ui fabric doesnot have those compoments. on React there is only this https://npm....
Imen Turki's user avatar
  • 2,183
1 vote
1 answer
212 views

SPFx extension is not loading term store properties

I have extension which uses the term store as navigation and on the other hand, I have dropdown list where it has the normal text (SiteA, SiteB, SiteC) with different SP site links on it (href). So, ...
striker92's user avatar
  • 111
1 vote
0 answers
257 views

Is there any way to refresh the page from webpart when user clicks on save as draft in sharepoint page?

We have implemented some webpart where filtering is happening when user select some value from the dropdown and its working fine but when we click on save as draft at that time old filter value is ...
Vivek Chadha's user avatar
1 vote
0 answers
103 views

Provide user ID and password to sp-rest-proxy react app dynamically and run the proxy with the credentials [closed]

I finally found the way to connect to SharePoint 2013 on-prem environment from an external react app. I made use of the sp-rest-proxy (https://github.com/koltyakov/sp-rest-proxy). While deploying the ...
noah_dvlpr's user avatar
1 vote
0 answers
94 views

How I can force a table <TD> to occupy the full vertical space? [closed]

I want to show 3 boxes of content inside a table inside my SPFx react web part:- I have the following code:- singlenews.tsx:- import * as React from 'react'; import styles from './SingleNews.module....
John John's user avatar
1 vote
0 answers
53 views

SiteBreadCrumbs- How to avoid Site Pages

I'm making use of the github code to display breadcrumbs in my site. The code uses pnp control to render the content. Is there a way we can modify this to avoid Site Pages appearing in the breadcrumb. ...
kevin t's user avatar
  • 11
1 vote
0 answers
232 views

When i am trying to get data formatted data from list(rich text) and bind it to pnp Rich text box cntrol nothing is visible [closed]

When i am trying to get data formatted data from list(rich text) and bind it to pnp Rich text box cntrol nothing is visible in control, though the data is there in state. I have tried to use below ...
Sunny Sinha's user avatar
1 vote
1 answer
253 views

In SharePoint Framework Extension (Application Customizer), are there any other placeholders that can be used aside from the header and footer?

We are trying to add a drop-down control in the command bar of a page or beside the share button on a SharePoint Online site. May we know if there is a specific placeholder we can use to achieve this?...
Dianne Lee's user avatar
1 vote
0 answers
49 views

How to implement ComponentDidCatch in SPFx

Could someone please show me how to implement ComponentDidCatch in SPFx. I did it successfully in ReactJs like this: Throwing an Error : throw new Error('I crashed!'); and it would get caught here: ...
Purushottam.Prasad's user avatar
1 vote
1 answer
1k views

SHAREPOINT FRAMEWORK - REACT JS alert on Page Load

I am new to SharePoint framework and React JS. I have build a basic Web Part with CRUD operation using React JS. I wanted to show drop-down(html select) value on Page Load in an alert. I am able to ...
user85476's user avatar
1 vote
0 answers
461 views

Office ui fabric Dropdown menu does not work on keyboard press

I have SPFX component with React library. The Dropdown menu is working fine with mouse onclick events. however, on pressing enter or space is not working. I am thinking of using eventhandlers such as "...
LapelCard's user avatar
1 vote
0 answers
1k views

People Picker React js

Ok I got two questions, might be related. 1.) How can I use the following library in React using import <script type="text/javascript" src="_layouts/15/clienttemplates.js"></script> <...
Billy P's user avatar
  • 236
1 vote
0 answers
329 views

Not able to print HTML based on If statement

So I'm trying to print some HTML code depending on the IF statement. but I'm getting "undefined[object Object][object Object][object Object]" public render(): React.ReactElement<ISPWebPartProps&...
Amazinjoey's user avatar
0 votes
1 answer
167 views

Reading configuration at runtime

I have created "Search Result Source" in my development & production environment Using that in search REST API with source GUID. Now thing is that source GUID of development & ...
Milind's user avatar
  • 1,538
0 votes
1 answer
3k views

How to check folder permissions using pnp/sp library in spfx web part?

I am developing one SPFx web part wherein I am showing all the folders which the logged-in user has access to. And I have a couple of folders in one document library(IT Docs) and some of the folders ...
Pravin Durgam's user avatar
0 votes
1 answer
330 views

SPFx webpart component set default color

I have created a tiles webpart where i am changing the color on toggle between tiles but i want to set default color for one of tiles once page load and then user can toggle ...
kumar's user avatar
  • 139
0 votes
1 answer
1k views

Accordion in SPFX using SharePoint list [closed]

How to create an accordion SPFX webpart using SharePoint list as backend?
kumar's user avatar
  • 139
0 votes
3 answers
4k views

Add Css in spfx

I want to add below CSS in SPFx web-part using states. But unable to do it: div[class^='pageTitle_'] { display: none; }
kumar's user avatar
  • 139
0 votes
1 answer
891 views

Image Carousel SPFx webpart with video as a source

I want to bind a video in carousel with source which is a hyperlink in the carousel. I am able to bind images but not able to bind video as a source. How do I load videos with images? <div style={...
kumar's user avatar
  • 139
0 votes
1 answer
613 views

Document card hover colour change

Hi I have used office fabric ui document card i want to change colour on hover of document card , const cardStyles: IDocumentCardStyles = { root: [ ...
kumar's user avatar
  • 139
0 votes
2 answers
314 views

How to get current page URL in SharePoint page through web part?

I tried using the window.location.href, its not working when the webpart is deployed in the production environment How to get the current page URL on the SharePoint web part?
Vivek Chadha's user avatar