Questions tagged [spfx-webparts]
Technical questions about building and using web parts based on the SharePoint Framework client-side development model.
1,255
questions
1
vote
1
answer
591
views
How to use single page application in SPFx with react [closed]
I am trying to create a single page application in SPFx using react.
When I am using React routing, I am facing below problem:
How to create a single page application in SPFx using react?
- 21
0
votes
1
answer
83
views
SharePoint Add-in web part display options in UI
I've created a SPFx solution where it is not automatically available in all sites. It's been added to App Catalog.
Enabled - Yes
Deployed - Yes
Added to all sites - No
Though it is possible to add ...
- 1,533
2
votes
1
answer
602
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:...
- 49
1
vote
1
answer
2k
views
TypeError: Cannot read properties of null (reading '') in SPFx with React
I am new to SPFx with react. I am creating a webpart to include a dropdown to have options from a choice column of a sharepoint online list. When loaded the dropdown from a static option values it ...
- 13
1
vote
1
answer
158
views
SPFx package with app catalog metadata
Is it possible to create an SPFx package (.sppkg) that includes properties to populate the app catalog when it is uploaded?
I'd like to include the Icon URL, description, support URL, etc. Right now, ...
- 300
0
votes
1
answer
1k
views
SPFx workbench.html is not generated
I'm trying to setup a local development environment for SharePoint Framework to develop web parts. I've followed the microsoft guides for setting up SPFx dev environment and build your first web part
...
- 3
0
votes
1
answer
1k
views
SPFx TextField component setState
New to SPFx and React.
I'm trying the set the state of a TextField when I enter data into the react component and eventually use a button to drop it into a list. This is bringing information into the ...
- 75
0
votes
1
answer
712
views
The build failed because a task wrote output to stderr spfx
I am experiencing this problem when using the
gulp bundle --ship command.
I have searched the internet and I really don't know what to do. Please help me
0
votes
1
answer
790
views
SPFx RSS Webpart CORS Policy Blocked
First of all, Happy Christmas and Happy new year.
I have an issue trying to display a RSS feed into a SPFx webpart. I'm using this code on github: https://github.com/pnp/sp-dev-fx-webparts/tree/master/...
0
votes
1
answer
90
views
Best Way to Display HTML Files in Bulk SPO
I am looking for possible solutions to display HTML files in SharePoint Online sites. I know you can use the embed web part to display static pages. However, is there a better way or is there a way to ...
- 1
1
vote
1
answer
319
views
How to use SharePoint theme in TSX file (but not a css class)
Can anyone let me know the design pattern to use a SharePoint styling colour like themePrimary in a .tsx file (but not a css class).
Can only find references on how to use these variables in .scss or ...
- 416
1
vote
1
answer
147
views
PnP Location Control is not showing intelligence
I am trying to use Location Picker in my SPFx webpart and the suggestions are not working.
It gives 401 error for below API along with CORS error.
https://outlook.office365.com/SchedulingB2/api/v1.0/...
- 2,303
0
votes
1
answer
947
views
Problem with Context API in SPFx when trying to retrieve list item
I am currently refreshing my knowledge within SharePoint Framework, trying to show list items in list from Fluent UI using React as a framework.
Right now I am struggling with SharePoint Context API ...
- 97
0
votes
1
answer
319
views
How can I dynamically show values in a PropertyPaneDropdown in spfx
I want to show a lists titles in the select tutorials field. But list title values not showing on the first click.
0
votes
1
answer
340
views
spservices.js.Error:- Uncaught (in > promise) TypeError: Cannot read properties of undefined (reading > 'LookupList')
Inside our SPFx web part we have the following code inside the spservices.js code:-
spservices.prototype.getLookupFieldOptions = function (siteUrl, listId, fieldInternalName) {
return ...
0
votes
2
answers
50
views
what is the purpose of running npm install on a 3rd party SPFx
I want to install this SPFx https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-list-formatting where inside the instruction it mentioned 2 run those 2 commands after cloning ...
0
votes
1
answer
344
views
How to use env variables from devops in JSON files within SPFx
https://www.sharepointpals.com/post/how-to-access-azure-devops-variable-in-spfx-solution-part-2/
^ From following this guide I am able to use devops environment variable groups within my SPFx app.
...
- 416
1
vote
1
answer
538
views
SharePoint hosted workbench showing cached version
I have a SharePoint SPFx react web app. When running gulp serve on my local workbench, all changes are being reflected.
However when I access the SharePoint hosted workbench using the following URL: /...
- 11
0
votes
2
answers
238
views
How i can automatically populate my SPFx web part's property field with all choices from a choice field
I have a SPFx web part with one property named Department:-
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
...
0
votes
1
answer
751
views
How to call an API request in the .ts file spfx not the main component
This is my web part below, I need to call an API so I can dynamically populate the scope property dropdown that are provided as 'settings' to the web part.
Can I use componentdidmount? Doesn't seem to ...
- 416
0
votes
1
answer
725
views
Sort items inside my React.Js SPFx web part
I have a SharePoint list, and i want to order the items based on the "Featured" field, but things is not working, where if i define this ordering logic:-
a.map(b => {
if (b ===...
1
vote
0
answers
80
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....
0
votes
1
answer
281
views
Unable to render a table with rowSpan inside my SPFx React web part [closed]
Inside my ReactJs SPFx web part i want to build a table as follow:-
<table style="width:100%">
<tr>
<td rowspan="2"></td>
<td></td>
...
1
vote
1
answer
273
views
Inside the SPFx web part, how i can get the current site collection url inside the "SharePoint/assets/elements.xml"
I am working on an SPFx web part, which inject a custom css inside the site collection. Now i define the location of the custom css file inside the ClientSideComponentProperties inside the SharePoint/...
2
votes
1
answer
2k
views
SharePoint Online SPFx Web Part Issue
Your web part will not appear in the toolbox. Please make sure "gulp serve" is running in a web part project. Please refresh the page once "gulp serve" is running.
0
votes
1
answer
2k
views
How to get the current Page title >> then filter list items based on it inside my SPFx web part
I have a custom list named CompanyNews which contain these fields:
Title --> Free Text
Topic ---> choice which allow multiple selections
Where inside the custom list, we will be adding the ...
1
vote
0
answers
183
views
Set Focus on Office-UI-Fabric-React Control in Dialog
I'm trying to set the focus on a UI Fabric ListItemPicker in a UI Fabric Dialog when it opens.
I'm using the following code:
export default class MslTownProfilesWebPart extends React.Component<...
- 41
0
votes
1
answer
701
views
"gulp serve" is returning this error "Cannot GET /temp/workbench.html" when open "https://localhost:4321/temp/workbench.html"
I want to create an SPFx web part, so i run these commands:-
yo @microsoft/sharepoint
gulp serve
then when i try to run gulp serve, i got this error:-
Cannot GET /temp/workbench.html
here is the ...
0
votes
1
answer
971
views
"gulp serve" will return this error "ReferenceError: primordials is not defined"
I have 2 versions of node.js, as follow:-
Your environment has been set up for using Node.js 17.1.0 (x64) and npm.
C:\Windows\System32>nvm list
16.13.0
8.16.2
Now i am trying to run gulp ...
0
votes
1
answer
105
views
Can i donwload an App from the App Catalog and install it inside another tenant
I have developed a custom SPFx web part and upload it inside a tenant, as follow:-
now i want to install the same App inside another tenant, so can i simply download the above sppkg App and install ...
0
votes
1
answer
369
views
How to defer executing JavaScript file in SPFx solution
In a SPFx solution, I'm importing a JavaScript library like this:
import './javascriptfile.js';
This JS file gets executed before the DOM is ready. If we are using a SCRIPT tag, we can use defer ...
- 87
1
vote
0
answers
194
views
Are there any available SPFx web part which can allow to inject custom CSS files inside modern pages, without the ability to inject custom JavaScript?
I am starting this new project for a SharePoint Online tenant:
The client has created 10 modern pages that will be defined as templates.
Inside each of the 10 modern pages we need to inject custom ...
1
vote
1
answer
67
views
Can we restrict adding our custom React web part to the site collection home page only
I have developed a custom web part using these steps for our SharePoint online communication site:-
md spfx-MyModalPopup
cd spfx-MyModalPopup
yo @microsoft/sharepoint
Chose SharePoint online + ...
1
vote
1
answer
320
views
Page Redirection in SPFX React App
What is the easiest way to redirect to another page in an SPFX React app?
My App is fairly simple with only 2 pages each with a web part. I want to redirect from the home page to another page with a ...
- 41
0
votes
1
answer
225
views
How i can define 2 .tsx files where each file render a different text
I want to build an SPFX web part which render 2 buttons and when the user clicks on the button 2 popup should be shown + have 2 fields to enter the 2 Popups text, something as follow:-
So i did the ...
1
vote
2
answers
865
views
SPFx web part to add Text and show it inside a Popup when clicking on a button
I am trying to achieve this using SPFx web part:
The web part will provide a Button and a Text field.
The user add the Web Part >> edit it >> enter the text inside the text field (inside ...
1
vote
0
answers
176
views
Error - [tsc] node_modules/@fluentui/react/lib/components/ContextualMenu/ContextualMenu.types.d.ts(13,35): error TS1005: ';' expected
I am trying to develop this SPFX inside our SharePoint online site @
Model pop up in SPFX
Where I did the following steps, but I got the below errors:-
Your environment has been set up for using Node....
0
votes
1
answer
309
views
Is there a way to show Quick Links were some of these quick links open in a modal popup
I want to add this Quick link inside our SharePoint online:
Where the HR System & Our People will open links from external system and a SharePoint page. while when the users clicks on Who we are ...
0
votes
1
answer
410
views
Can we force the built-in Weather modern web part to dynamically show the Weather for the current user location.If not is there any other alternatives
We have a modern communication site inside SharePoint online tenant and we want to add a modern web part to a modern page to show the Weather of the login-in User location. Now we added the built-in ...
1
vote
1
answer
1k
views
SPFx - React component fail to load on site page
I was trying to import and using react component from: https://www.npmjs.com/package/react-calendar-timeline
It is just rendering normal on workbench:
When I try to bundle and deploy to site page it ...
- 11
1
vote
3
answers
3k
views
This generator (@microsoft/sharepoint:app) requires yeoman-environment at least 3.0.0, current version is 2.10.3
I am getting the following error when trying to use yo @microsoft/sharepoint
Error @microsoft/sharepoint
This generator (@microsoft/sharepoint:app) requires yeoman-environment at least 3.0.0, current ...
- 77
0
votes
3
answers
816
views
How to get the file length using PnP JS?
I know how to get the file size using REST API, basically this here:
https://tenant.sharepoint.com/sites/site_name/_api/web/GetFileByServerRelativePath(decodedurl='/sites/site_name/Lists/ListName/...
- 135
1
vote
1
answer
107
views
Add WebPart to display a link above a modern library in SharePoint Online
When the company I am working for migrated from SP2013 to SP Online, they migrated to the classic experience. As we move forward years later, they are using the modern experience per my push. There ...
- 89
1
vote
0
answers
82
views
If I mouse over the hyperlinks, it's showing a full link on the webpage itself. How to overcome this?
If I mouse over the hyperlinks, it's showing a full link on the webpage itself. How to overcome this?
- 11
0
votes
1
answer
1k
views
Unable to add the 'React Script Editor Web Part' to a SharePoint Online Communication Site
I have a question regarding a SharePoint Online App installation and using it on a SharePoint Online SiteCollection. The site template is a 'Communication' site.
I used the below articles to install ...
- 33
0
votes
1
answer
300
views
SPFx web part which render an HTML BOX which have a configurable Title, Description and Clickable Button
I want to build an SPFx web part, which should allow me to display this Box:
Where the Box will have a configurable Title, Description text & clickable button.
So the user can add this web part ...
0
votes
1
answer
334
views
Reverse the display name with split name on SharePoint Spfx
I am trying to show displayname from AAD using in my spfx but for the full name i cannot get the array of first item. I know i am missing something from below but couldn't analyse what's missing.
...
- 101
0
votes
1
answer
153
views
Remove spfx webpart not in app catalog and site contents
I was working on the Spfx webpart and deployed multiple of them but in Advanced Category webpart items i saw some strange webpart. How can remove it from my site collection, it is not in Site contents ...
- 101
0
votes
2
answers
838
views
SPFx - Increment Like in sharepoint list item rating
I have a SharePoint list with reviews enabled, I am trying to patch an increment to the like count within SPFx.
What's the best way to achieve this? Can't find much info online, can anyone point me in ...
- 416
0
votes
1
answer
2k
views
SPFx - How to get the URL and description from a hyperlink?
I'm trying to create a React SPFx web part which can render items from a SPO list.
I am having difficulty if the column is a Hyperlink. (I can get the value if it is a string).
Does anyone know how to ...
- 99