12
votes
Accepted
Anyone can explain the .ts file and .tsx file use and difference in SPFx react webpart?
TSX allows for embedding JSX elements inside the file, and is largely used by React.
TS files are plain old Typescript files and do not support adding JSX Elements.
Typically you would seperate ...
- 1,290
10
votes
Accepted
SPFx - How to call function on button click event from ts file with React
Add a property to your IAutoCompleteProps interface for your click handler. Then pass the function from the AutoCompleteWebPart into the interface as one of the component's properties.
So in your ...
- 6,051
6
votes
Accepted
Add column names dynamically to `select` method in SP PnP JS
It supports string array. You need to use the "newer" spread syntax as below:
var cols = ["Col1", "Col2"];
sp.web.lists.getByTitle("My List").items.select(...cols);
Spread syntax in javascript
- 31k
5
votes
Accepted
Updating SPFX breaks gulp
In 1.6.0 projects the config/tslint.json file was removed and a new one is created at the root of the solution.
Delete E:\DevEnv\WebParts\react-full-iframe\config\tslint.json. You should also add the ...
- 575
4
votes
Accepted
how to use click event in html string in spfx (react)
The simplest option here is declare the function not as a class member but just like a variable in window like
window.myFunction = function {}
But I would look at removing your dangerous html ...
- 146
4
votes
Accepted
SPFX - How to get data from _spPageContextInfo
I too get same problem, and i resolved it by using the SPComponentLoader.loadScript, please refer below code snippet
SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/init.js', {
...
4
votes
Accepted
How to combine two SPFx web parts?
Have web part C import the components for the other two web parts. Use shared services to load data for A and B, and reuse them in web part C.
import ComponentA from './../../webparts/WebPartA/...
- 8,054
4
votes
Accepted
Provisioning SPFx WebPart assets: adding a page with your webpart embedded to it
TL;DR
You're on the right track, but look at the mso:CanvasContent1 tag instead!
The real answer
It looks like the bulk of your configuration would be in the <mso:CanvasContent1 ...> line. ...
- 241
4
votes
What are the supported office UI fabric versions for each SPFx versions?
I'm not sure if this is still relevant, but this is the version I am using:
SPFX version: 1.4.1
Office UI Fabric React: [email protected]
Use Yeonman in order to install the template for ...
3
votes
Accepted
Get SharePoint List Items using SharePoint Framework React
There will be return type ISplistitemsState instead of void in Splistitems class.
Change following line
export default class Splistitems extends React.Component<ISplistitemsProps, void> {
To
...
- 519
3
votes
Accepted
SPFX Fabric UI React Buttons handled by one click event
I don't know what you are trying to achieve but you can call your method like this:
public render(): React.ReactElement<IReportingProps> {
return (
<div>
<CompoundButton ...
- 1,651
3
votes
How to access to SharePoint Objects (List, ListItem, User, ect) using React and PnP-JS Core with SharePoint FrameWork (SharePoint 2016)
You Will find in the following link all available operations of PnP-JS-Core and how to use them with SharePoint Framework.
https://github.com/SharePoint/PnP-JS-Core/wiki/Developer-Guide
3
votes
How to perform CRUD Operations on sharepoint lists using React and PnP-JS Core with SharePoint FrameWork (SharePoint 2016)
We have taken multiple initiatives where in we are developing client side web-parts using react for our clients. Traditionally we had been using jquery for making ajax requests in script editors.
...
- 2,416
3
votes
Accepted
React Native (Sharepoint-application)
From my point, you should start with Azure AD application. Create a new app registration in Azure AD, give it permissions to SharePoint.
Then go ahead with react-native-azure-ad and build an app, ...
- 11.6k
3
votes
Accepted
Get list of alerts of the current user from the whole site collection
I believe that there is no REST API that could manage nor read alerts whatsoever. Also alerts are per site (web) so it would require to iterate through all subsites which could take really long time ...
- 1,651
3
votes
Deploy spfx webpart without using cdn
Yes, you can do that without having to enable CDN.
In your config > write-manifests.json file, there is a cdnBasePath property.
Modify that value to a document library path as below:
{
"$...
- 31k
3
votes
Accepted
I want to call one child component from parent component spfx react
I see two issues:
You need to close your constructor
public constructor(props: IDCLabelProps, state: IDCLabelProps) {
super(props);
}
You probably named your component file ...
- 1,246
3
votes
Accepted
How to upload file in document library using pnp/sp
Looks likely that your document library does not have a Description field, i.e. a field with the internal name "Description". PnP wants you to specify the internal name, not the display name of the ...
- 805
3
votes
Accepted
Selecting a date in 2nd date picker clears the 1st date picker (UI Fabric React)
It seems you are not setting any value to your components:
<DatePicker
isRequired
label={strings.datePickUp}
value={this.state.datePickup} //Add this
key={"1"}
onSelectDate={...
- 527
3
votes
Accepted
Including React Kendo Grid in SPFx web part throws warnings during build
The SharePoint Framework webpack config already contains a definition for source-map-loader but it doesn't have the exclude property. You can check this by doing a console.log(generatedConfiguration....
- 10.5k
3
votes
Accepted
PnP Carousal Control Button style and dots
You could use react-slick slider.
Sample test demo in my SPFx:
You could customize the Previous Next as image instead of text.
Update:
The library supports custom HTML.
Update part2:
My test ...
- 4,261
3
votes
Problems with MSGraph POST in SPFx React
This doesn't answer all your question, but this is to the first error MSGraphClient.serviceKey,
Since 1.6 the MSGraphClient and AadHttpClient classes no longer expose a serviceKey property which ...
- 7,858
3
votes
Accepted
Rest API throws 403 when using POST Fetch in React app
You can get a request digest by sending a POST request to
http://server/site/_api/contextinfo
with only an accept: 'application/json;odata=verbose' header.
Apparently there is some confusion about ...
- 12.8k
3
votes
Accepted
SPFX save array inside item response to display in render react
Your render method is trying to render the entire assignee {assigne}, but React doesn't know how to render that object.
Try changing your render to:
<div className={styles.CellStyle}>
{this....
- 3,704
3
votes
SharePoint User add data using PnPJs
If you're trying to add custom data to users and you want to access that data anywhere a user object is found, I'd suggest you look at schema extensions.
Microsoft has a great example of this.
...
- 1,246
3
votes
SharePoint SPFx webpart not showing latest build
@Hisusu32,
You are leaving one critical step out of your deployment process; you are also missing additional debug steps you really need to perform in addition to what you describe.
There are two ...
- 1,425
3
votes
Accepted
How to put image and link under PropertyPane Description field for the web part in SPFx?
Check below web part sample in Github repository where author added hyperlink on web part property pane using custom HTML:
Script editor web part for modern pages built in React
Specially check these ...
- 46.4k
2
votes
Accepted
SPFx - How to install latest version of Office-UI-React for SPFx v1.0.2
The problem here is that newer versions of office-ui-fabric-react are incompatible with the typescript version required by spfx 1.0.2.
You can try this version, it should be supported.
npm -i ...
- 2,249
2
votes
Sharepoint Framework/PnP-JS/React : state Object doesnt work
Your code tell the TypeScript that the state object is empty object with no members. React.Component accepts two generic types - properties object and state object. You have to change this line
...
- 1,651
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
Only top scored, non community-wiki answers of a minimum length are eligible