Questions tagged [spfx-webparts]
Technical questions about building and using web parts based on the SharePoint Framework client-side development model.
1,090
questions
0
votes
0answers
17 views
Clicking browser back button after you leave a page with an SPFx Angular SPA web part, throws JSON like response instead of real page
We are using SharePoint 2019 and have SPFx web part developed using Angular 7.2 with hash routing.
Whenever we are navigating through more than 1 routing and then redirecting to any non angular page ...
0
votes
1answer
19 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 ...
0
votes
1answer
10 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
1answer
34 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
1answer
22 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
vote
1answer
16 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 ...
1
vote
1answer
23 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/...
0
votes
1answer
18 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 ...
0
votes
0answers
36 views
Update app ALM Api in sharepoint site not giving proper response
I have tried updating the apps in sharepoint site using pnp/sp in SPFx web part
import { Web } from "@pnp/sp/webs";
public static async UpdateApp(id, web) {
var app = web....
0
votes
0answers
14 views
Strings defined in my localization en-us.js will get removed after deploying my SPFx
I am working on a custom SPFx SharePoint online web part, and we have a localization file named en-us.js.. now when i tried to defined new string as follow:-
define([], function () {
return {
...
0
votes
0answers
32 views
Get List Items with specific view by using SPFx with PnP/SP
I refer to the document from https://wowsomuch.com/sharepoint/pnp-js-caml-query/. When there are 3000 List items in specific view of List, the performance is not good (Low Performance). Does anyone ...
0
votes
1answer
38 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
1answer
67 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
2answers
18 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
1answer
27 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.
...
0
votes
0answers
27 views
MS.Utitlity.Event Error while uploading SPFx app to Appcatalog
I try to add a spfx app(.sppkg file) to SharePoint 2019 on-premise appcatalog. and got the error
Invalid SharePoint App package. Error: The type initializer for 'MS.Utility.EventTrace' threw an ...
0
votes
1answer
52 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: /...
0
votes
2answers
36 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
1answer
27 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 ...
0
votes
1answer
27 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
0answers
20 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
1answer
22 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>
...
0
votes
0answers
19 views
Show 3 boxes inside 2 columns instead of 3 columns inside my SPFX React sharepoint web part
I am trying to achieve this layout inside my SharePoint SPFx web part:-
But currently i have this layout:-
Here is my full code and description:-
I have a custom list inside my SharePoint online ...
0
votes
0answers
7 views
How i can make a copy of our SPFx web part one version for UAT other for Development inside the same App Catalogue
I have developed an React SPFx web part for our Development SharePoint online site. I want to make another copy of the same SPFx to add it inside the UAT site collection. So my question is; what are ...
0
votes
0answers
14 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/...
1
vote
1answer
68 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
1answer
61 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 ...
0
votes
0answers
37 views
Modify my SPFx web part to read css file instead of writing the css code inside the web part
I have built a web part which is similar to this web part from github @ https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-enhanced-list-formatting . The web part allow to embed custom ...
1
vote
0answers
38 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<...
0
votes
1answer
48 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
1answer
233 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
1answer
18 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
1answer
47 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 ...
1
vote
0answers
42 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 ...
0
votes
0answers
14 views
Is there any SPFx web part which I can use to inject custom CSS files inside different modern pages by specifying the custom CSS file URL [duplicate]
I am starting this non-standard 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 ...
1
vote
1answer
29 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
1answer
27 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 ...
0
votes
0answers
40 views
Can I show a Rich Text inside Popup for our SPFX web part instead of Plain-Text
I want to build an SPFX web part which render 2 buttons and when the user clicks on the buttons, 2 Popups should be shown + have 2 fields ("Who We Are" & "Our Value") to enter ...
0
votes
1answer
23 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
2answers
101 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
0answers
35 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
1answer
25 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
1answer
32 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
1answer
90 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 ...
1
vote
3answers
762 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 ...
0
votes
3answers
42 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/...
1
vote
1answer
16 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 ...
1
vote
0answers
12 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?
0
votes
1answer
91 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 ...
0
votes
1answer
29 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 ...