Questions tagged [spfx-webparts]
Technical questions about building and using web parts based on the SharePoint Framework client-side development model.
754
questions
0
votes
1answer
21 views
SPFX webpart to upload files to sharepoint [closed]
I am using following example to build spfx webpart to be able to upload file to sharepoint library and update sample metadata properties.
I constantly get the following errors in Firefox when ...
0
votes
1answer
29 views
this.state not re-rendering on state change
This is a weather widget
on default load Hong Kong with lat, long defined
Type and Load Google Places Autocomplete API , show list of cities
Get City Name and Get Lat Long from Open Cage API
Get Lat ...
0
votes
1answer
15 views
Error - [spfx-serve] The api entry could not be loaded: node_modules/@microsoft/sp-webpart-workbench/lib/api/
I am trying to do the tutorial found here:
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
But upon entering the command: gulp serve, I ge the ...
0
votes
1answer
25 views
SPFx JQuery Dialog button click does not find public function
I am new to TypeScript and SPFx development.
I have a jquery UI dialog box and a public function in the same class that makes some MSGRAPH calls after the button has been clicked.
The button click ...
1
vote
1answer
24 views
ReactDom render multiple elements spfx
Let me start by saying I am working on my first webpart and learning react spfx. I am trying to render multiple elements using ReactDom.render. How do I render both the elements on the same .ts file? ...
0
votes
1answer
67 views
SPFX page context react
I am developing a multiscreen webpart, I am using react framework. I am not able to get the context to load in the webpart file(.tsx) Below is the code so far.
There were 2 issues initially, one was ...
1
vote
0answers
17 views
Why does a Teams Tab based on a SharePoint Framework-WebPart open a Webbrowser?
A SharePoint Framework-WebPart, that is added to a Microsoft Teams-Team as a Tab, works fine for most users- but for a few users a Webbrowser opens when they try to open that Tab in their mobile Teams,...
1
vote
1answer
30 views
SPFX created New project paste developed code reveals GET error
I have developed a webpart to get list of news title and data.
I wanted to change the name shown in sharepoint thus I created another project a web-part with react.
yo@ microsoft/sharepoint
gulp ...
0
votes
0answers
19 views
Need to convert a sharepoint list field value from FieldValuesAsText to FieldValuesAsHtml in pnp-sp spfx webpart
I need lookupfield value,peoplepicker field value and enrich multiline text field value in one pnp-sp get call and display it in a table columnd so i used
let item: [] = await siteweb.lists....
0
votes
1answer
28 views
Get Enriched MultiLineText Field value without loosing its HTML property and Display it without html tag using spfx pnp/sp
I need to get enriched multi line text field value of a list item in SharePoint online SPFX web-part and display the field value in a table column without loosing its html property also hiding html ...
0
votes
0answers
9 views
Share Azure Application Insights instance between web parts
How to share Application Insights instance between web parts?
The idea is to have a single instance of preconfigured Azure Application Insights instance shared between a bunch of web parts.
Baseline
...
3
votes
1answer
41 views
SPFX - Inlcude Static Files in the Solution Package
We need to include a third-party solution in our SPFX app which itself is rendered as in iFrame within the web part. We have this working locally in the workbench and it works when deployed, but only ...
0
votes
1answer
34 views
Open image in new tab in spfx webpart
I want to open image in new tab if some one click on legend "Click here".
<p className="legends"><FieldUrlRenderer text={'Click here'} url={imageList.Image ? imageList.Image["Url"] :''} ...
0
votes
2answers
54 views
Call typescript function on button onclick event in SPFx(No Javascript Framework)
I am having trouble in calling typescript method on button click in SPFx with no JavaScript framework.
for Example:
private _renderListCustomer(items:ISPListCustomerItem[]):void{
let html:string=...
1
vote
1answer
25 views
Uncaught in promise Type error Cannot read property ServerRealativeUrl of undefined
I have been using this line previously, and suddenly it does not work.
private getListData() {
const opt: ISPHttpClientOptions = { headers: { 'Content-Type': 'application/json;odata=verbose' } };...
0
votes
2answers
41 views
SPFX MSGraphClient - Cannot read property 'id' of undefined
I am getting this issue when calling Shared and Recent OneDrive files using MS Graph Client on my modern webpart.
Uncaught (in promise) TypeError: Cannot read property 'id' of undefined
I get the ...
0
votes
0answers
13 views
Updating Provisioned Content Type Field In Elements.xml
I have an existing spfx 1.4 solution that has a provisioned custom list / content type. In that content type is a drop down field with options. I need to add options to the existing field.
Been ...
1
vote
1answer
31 views
Can we add multiple preconfiguredEntries to a SPFx web part for use on SharePoint Server 2016?
I'm finding that no matter which web part I try to add, only one of the preconfigured entries is ever added to a page.
Have I done something wrong in my web part manifest.json file, or does having ...
0
votes
1answer
25 views
How to retrieve Microsoft 365 security groups/members inside an SPFX web part?
How to retrieve Microsoft 365 security groups/members inside an SPFX web part?
Does anybody know how to do this or know of any tutorials? I am searching the internet with no luck.
0
votes
1answer
16 views
How to configure Rest API to be called with other user than the connected one
I need to break inheritance on a list item with a call to the API in my SPFX webpart. But if I do so with the connected user, he might not have the permission to do that.
Is there a way to configure ...
0
votes
1answer
50 views
SPFx - React - OfficeUI Fabric - Assign value from SharePoint List Item to DatePicker and DropDown Controls
Thank you for your reply. I have values stored in SharePoint list. Now I want to provide edit functionality to user so when user selects particular item, I’m showing user the fields in editable mode ...
1
vote
1answer
27 views
SPO:SPFX Modern Script editor - css class and id suffix changing and breaks styling
I am more of an admin than a developer but I managed to get the SPFx Modern script editor to work in my tenant to facilitate some required cosmetic changes. Unfortunately it seems that the CSS classes ...
1
vote
1answer
38 views
Handle failure response on SharePoint list item add using PnP JS
I have created one SPFx web part with React framework to add the items from .CSV file to SharePoint list using PnP JS.
I have used PnP JS item.add() method to add the item in the list by looping each ...
0
votes
1answer
53 views
SPFX Webpart - BaseWebPart.properties Error
I'm new to SPFX / React Development, So I thought I'd start with a simple project!
I want to add a Resource Quick Access webpart on my Modern Sharepoint Page where users can quickly access SharePoint/...
0
votes
2answers
60 views
I am using pnp peoplepicker in spfx and I want to clear the selected value by user on this people picker by code
Here is the people picker I am using within my component's Render:
<PeoplePicker context={this.props.context} titleText="" personSelectionLimit={1} groupName={""} showtooltip={true} selectedItems=...
0
votes
1answer
36 views
SPFX : Undefined Hammer while trying to load third party javascript
I have create a custom SPFX webpart and what I'm trying to do is to convert the HTML and JQuery flipbook into SPFx webpart. I've download this plugin and add all the reference. However, when it is ...
2
votes
2answers
49 views
SPFx. Error while importing modernizr in SPFx
I am new to SPFx and I am getting an error while trying to add jQuery and external JS in SPFX.
Example my web-part name is FlipBookWebPart and I am trying to add turn.js and modernizr.js into the ...
1
vote
1answer
21 views
Are there any dependencies for PS.js (Project Server JSOM)?
Because I can't seem to do what I need to get done using the REST API, I am going to try to use the Project Server JSOM in an SPFx webpart.
I found instructions on how to load the SharePoint JSOM ...
1
vote
2answers
24 views
SPFx web part cdnBasePath: possible to use server relative URL to make switching between environments easy?
Scenario:
SP 2016 on-premises. We have set up a centralized App Catalog site, and have settled on the solution of using a document library called "AppFiles" on the App Catalog site as our "CDN" to ...
2
votes
0answers
55 views
How do I change the TypeScript version used by gulp? [duplicate]
In SharePoint Online, how do I update my typescript version? I think I narrowed down my problem to typescript versioning. My helloworld web part works. The one thing that it has that many of my other ...
0
votes
0answers
9 views
SharePoint 2016 SSO with Custom Web API
I am trying to Build SSO between SharePoint 2016 On Premise site and Custom Web API which is hosted in On Premise IIS.
I tired to build a Provider Hosted Add In to achieve this. But It seems not ...
0
votes
1answer
85 views
Installing Yeoman generator fails with Node 10.18.1
This evening I thought I would update my SPFx Dev Toolchain:
install latest Node 10.xx LTS (using NVM as recommended by AC or David Warner MVPs) Better Node.js Install Management with Node Version ...
0
votes
1answer
28 views
Show survey questions only in webpart of home page
i want to show survey questions only to end users without default view of survey list in home page of sharepoint site .
and after user finished survey , it disabled or want to handle error message of ...
0
votes
1answer
64 views
Dynamically Pass List item parameter using pnp js
I have created SPFx web part using React JS framework. I am reading the data from the CSV file and adding item to SharePoint list using inBatch in PnP JS.
I was able to add the item to SharePoint ...
0
votes
1answer
63 views
SPFx React webpart onAfterPropertyPaneChangesApplied
I have created simple web-part in react and spfx for sharepoint online. In this web-part
weather.tsx have all rendering and function of the web-part. In componentDidMount function I call external API ...
0
votes
1answer
37 views
SPFx webpart icons
Trying to use external .png icon for my web-part but the don't appear both on local workbench as well as on production SharePoint online.
I have uploaded on Office 365 public CDN. All my icon size ...
4
votes
2answers
114 views
Remove spfx webpart
I've uploaded and deployed some spfx webparts through my App Catalog site.
Now these webparts are not useful anymore so I've deleted them from the App Catalog.
Then I've checked my sites and ...
0
votes
1answer
97 views
SPFx web part does not show/load in SharePoint online “_layouts/15/workbench.aspx” page in the internet explorer browser
I have developed a SPFx web part for SharePoint online, while running the gulp serve command, this is loading in the local workbench (http://localhost:4321/temp/workbench.html), as we can see in the ...
0
votes
1answer
62 views
How to add bootstrap media query add in spfx(jquery) web parts?
We have SharePoint SPFx web part (developed using jQuery).
We want to show these web parts responsive in the all devices.
Do we need to use bootstrap or any media query?
0
votes
0answers
33 views
Custom Drag n Drop webpart in sharepoint Edit Mode
Can anyone help me in SPFx online?
I am creating a custom web-part in which I am using HTML drag and drop API in edit mode. Somehow my drag and drop functionality is working if used it in preview ...
1
vote
1answer
28 views
How get team site groupId property from a SPFX webpart with pnp/js
I create a webpart with SPFX and it is deployed in a team site. I need get the team site groupId property.
0
votes
2answers
172 views
Gulp serve error - No valid rules for TypeScript files
I received the error message
below when I tried to run gulp serve on a tile web part that I got from a starter kit from https://github.com/SharePoint/sp-starter-kit/issues/131
Node version:
UPDATE:
...
1
vote
2answers
52 views
PnP Carousal Control Button style and dots
I have created react carousal from pnp controls, I was looking for help to style next and previous buttons and is there any way to add dots for the slides
My Carousal Code
public render(): React....
1
vote
1answer
39 views
check user in group SPFX get Httpclient request 403
I get a 403 error when i try to check if a user is part of group.
let props = this.properties;
let GroupsArray: string[] = [];
if (props.Groups != null && props.Groups.length > 0) {
...
0
votes
2answers
43 views
PnP SPFx Controls not rendering responsive
I have created one static web part using react carousal but it is not working as responsive. Please guide me if I am missing anything
import { Carousel, CarouselButtonsDisplay, ...
0
votes
1answer
51 views
Why are the SPFx web parts NOT working in one of the three tenants?
The five web parts needed to build the Luminas SP site are having issues with the external linking or security/settings, or maybe its just the app catalog?
I deployed five web parts in two separate ...
2
votes
3answers
40 views
Get information of employee from Employee ID in Sharepoint Framework(SPFX) using REST API
I am using Sharepoint Framework(SPFX) and using Typescript for calling REST APIs. I want to get information of other employees from Office 365 or Active Directory using their Email ID or Employee ID.
...
0
votes
0answers
37 views
SPFx React Fabric UI Typography and font issue
I am creating react component where in I have created fonts folder inside src folder inside fonts folder I have created
fonts.module.scss
@font-face {
font-family: FS Lola;
src: url("/../../../....
2
votes
1answer
39 views
SPFX: How to create an <img> tag containing the photo BLOB returned by MSGraph photo/$value
I'm creating somekind of custom Who-is-Who web part.
After retrieving the Users information with MSGraphClient /users API I'm trying to retrieve and display the Photo for each employee. I'm having a ...
1
vote
2answers
21 views
How get values that return sp.site.createModernTeamSite in pnpjs
Using below function:
const s = await sp.site.createModernTeamSite(
CustomerName,
CustomerID,
true,
1033,
"Customer Site for " + CustomerName);
You can create a team Site, but ...
