Hot answers tagged

4 votes
Accepted

SPFX react - click button to update web part

I believe this example is really not the best code I've seen. To summarize the way SPFx works: - The parent component HelloWorldWebPart only exists to be loaded by the Framework and to handle the ...
user avatar
3 votes

SPFx- Routes vs toggling visiblity

For the same problem I used a different approach. 2 child components had button click event which gave a call back to a common parent component. In parent component I using switch case to decide ...
user avatar
  • 2,376
3 votes
Accepted

Open image in new tab in spfx webpart

Try following workarounds: Using window.open(): window.open(imageUrl, '_blank'); Using Anchor tag / hyperlink: Add your image somewhere in SharePoint library/picture gallery Add anchor tag (...
user avatar
  • 29.4k
3 votes
Accepted

Display multiple Dynamic IPropertyPanePage.groups Sharepoint Online Framework

This looks like it'll be a cool sample. You weren't far from getting something that works. If I can give you a little trick: take advantage of Typescript and define what each variable type will be. ...
user avatar
  • 1,216
2 votes

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

The average rating of a column is stored in a list column whose internal name is AverageRating. However, to sort on that column we need to make a POST request with a CAML query as it can't be ordered ...
user avatar
  • 30.3k
2 votes

Reuse Child Component Method to Parent Component Fabric React - SPFx

You are missing the 'static' keyword in your class definition. I have tried below in my test environment and it works superfine : export class PanelSmallRightExample2 { public static _string = "" ...
user avatar
  • 2,317
2 votes

How to catch navigation event in SPFx webpart?

Try using context.placeholderProvider.navigatedEvent instead This has been suggested as the way going forward. Unfortunately the documentation hasn't been updated to reflect this.
user avatar
2 votes
Accepted

Integrating Azure custom BOT on SharePoint home page

Edit - Without Iframe option. You can also use directline to customize web chat UI. For react below is sample from MS documentation(link) To install the production build from NPM, run 'npm install ...
user avatar
2 votes
Accepted

Problem with rendering a React component in another component for SPFX

In your code, you are mixing up the Node "require" with a module export and a default export for the class "Cart". You should try the following: Remove the module export from Cart.tsx (last line) ...
user avatar
  • 785
2 votes

SPFX webpart context is undefined

Old reply, but someone is bound to run into the same error. When you're passing the context as a prop in the base WebPart, make sure you're passing it by using the this.context. Passing the ...
user avatar
2 votes
Accepted

Feasibility of introducing React to a locked-down SharePoint environment

The standard react workflow produces a bundle with all your dependencies already inside - no CDNs or external references of any kind. There's no reason you couldn't drop the bundle in SharePoint. ...
user avatar
  • 7,798
2 votes

Reactjs, TypeScript & Webpack on SharePoint2013

As Vipul Kelkar mentioned in his 2nd paragraph, you can perfectly use that development stack with SharePoint 2013. You can use whatever front-end framework you like. However, you cannot use the SPFx ...
user avatar
  • 1,615
2 votes

Workbench issues with spfx 18.2 and react 16.8.4

Insert 2 lines to your gulpfile.js 'use strict'; const path = require('path'); const gulp = require('gulp'); const build = require('@microsoft/sp-build-web'); build.addSuppression(`Warning - [sass] ...
user avatar
  • 21
2 votes

SPFx webpart component set default color

I think, here you are passing the style as a prop property for the component. That's the reason color is not visible. Solution 1. Just pass the color-code form the master page. like <...
user avatar
2 votes
Accepted

Accordion in SPFX using SharePoint list

Here is the accordion example built-in SPFx with react which displays the SharePoint list data. Using React Accordion plugin with SPFx It will be helpful to get the start. You can update the logic ...
user avatar
2 votes
Accepted

Document card hover colour change

You can create a CSS class in your WebPartName.module.scss file in your web-part project like: /* Default background color for Document Card */ .documentCardStyle { background-color: green !...
user avatar
  • 29.4k
2 votes

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

You could use item.userHasPermissions(LoginName,PermissionKind) to check user permission for the folder item. Check @pnp/sp/security https://pnp.github.io/pnpjs/sp/security/
user avatar
  • 4,211
2 votes
Accepted

Reading configuration at runtime

You can create a .ts file with necessary information and import it anywhere in your web-part project. Reference: AppSettings in your SPFx solutions OR You can create a property pane field to pass the ...
user avatar
  • 29.4k
2 votes

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

I can think of 2 ways to achieve the given scenario. Create HTTP triggered Power Automate: You can create a flow which will be the HTTP triggered, you can pass the data and in the action to create an ...
user avatar
1 vote
Accepted

SPFX: is @pnp/sp get call asynchronous?

Yes get call is asynchrnous, you should not use render method to get data because render method will be called every time react state will changed and it will again call api causing infinite loop. ...
user avatar
1 vote

Add Css in spfx

You could add the CSS at end of your webpart .scss file.
user avatar
  • 4,211
1 vote

Add Css in spfx

Create a file , let's say customCSS.css inside your component folder and paste the below code : div[class^='pageTitle_']{ display: none ; } Now in your main .ts file call this css file with the ...
user avatar
  • 808
1 vote
Accepted

Title Area modern ui pages does not load

Create a file , let's say customCSS.css inside your component folder and paste the below code : div[class^='pageTitle_']{ display: none ; } Now in your main .ts file call this css file with the ...
user avatar
  • 808
1 vote
Accepted

Image Carousel Video Autoplay true or False

This is throwing an error because you are using setState method in your autoPlay attribute, which returns void after setting the state. Try using something like below: <Carousel dynamicHeight={...
user avatar
  • 29.4k
1 vote
Accepted

Image Carousel SPFx webpart with video as a source

You can try using this: <video width="320" height="240" controls> <source src={ imageList.Image ? imageList.Image["Url"] : '' } type="video/mp4"> Text if video is not loaded </...
user avatar
  • 1,454
1 vote
Accepted

on click change Document card color SPFX

I solved this issue using below code: toggle(b) { if (this.state.description === b) { this.setState({ description: null }) } else { this.setState({ description: b }) } } myColor(b) { ...
user avatar
  • 97
1 vote
Accepted

Argument of type '{ description: string; siteurl: string; }' is not assignable to parameter of type

This error is because you are missing one property in IReactGetitemsProps.ts file. I am guessing you are missing siteurl property in your file. It should be something like: export interface ...
user avatar
  • 29.4k
1 vote

Workbench issues with spfx 18.2 and react 16.8.4

I guess the best thing to start is gulp clean Then gulp build and then gulp serve. Maybe these simple steps will help you to refresh all dependencies and get rid of outdated artifacts
user avatar
  • 139
1 vote
Accepted

Reactjs, TypeScript & Webpack on SharePoint2013

SharePoint framework works only on SharePoint online and SharePoint 2016 on-premise : https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview Having said that, you can ...
user avatar
  • 1,534
1 vote

SPFX webpart context is undefined

If you're in the TSX then you're in the component, not the web part. A component is a dumb rendering construct. All your logic should be dealt with inside the web part itself, passing data to the ...
user avatar
  • 7,798

Only top scored, non community-wiki answers of a minimum length are eligible