3
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] ...
- 31
3
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 ...
- 526
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 ...
- 2,406
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 (...
- 42.8k
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. ...
- 1,236
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 ...
- 30.8k
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 = ""
...
- 2,332
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.
- 21
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 ...
- 5,953
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)
...
- 795
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 ...
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. ...
- 7,963
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 ...
- 1,615
2
votes
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
</...
- 1,474
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 ...
- 2,303
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 !...
- 42.8k
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
<...
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/
- 4,271
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 ...
- 42.8k
2
votes
Accepted
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 ...
- 2,303
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. ...
- 5,953
1
vote
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 ...
- 828
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 ...
- 828
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={...
- 42.8k
1
vote
How to retrieve Image column from SharePoint list using React js SPFx
Sample demo(many test secenarios, ignore others which you don't need):
import * as React from 'react';
import styles from './ReactSpFx.module.scss';
import { IReactSpFxProps } from './IReactSpFxProps'...
- 4,271
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)
{
...
- 139
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 ...
- 42.8k
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
- 149
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 ...
- 1,534
Only top scored, non community-wiki answers of a minimum length are eligible