Questions tagged [spfx-webparts]
Technical questions about building and using web parts based on the SharePoint Framework client-side development model.
948
questions
0
votes
1answer
19 views
Need guidance to create React SPFx webpart with nested dynamic content
I am working on a scenario where we have a top level SP online site 'Top1' and it has subsites for each department say dept1,dept2,dept3.Each department has specific request list and and respective ...
0
votes
2answers
32 views
Newly created SPFx web part using react framework gives error with SharePoint online workbench while testing
I have just created one SPFx web part with react framework. I tried testing through SharePoint online workbench (https://demo.sharepoint.com/sites/test/_layouts/15/workbench.aspx).
I am getting an ...
0
votes
2answers
33 views
Exception in String type error on SPFX with JQuery
I really need help to resolve Type error encountered on this function in SPFX with jQuery.
Here is the function, The return statement is failing:
var addFile = function (fileTitle, fileName, fileType, ...
0
votes
0answers
9 views
Iterate nested array of objects and append children to a particular object using jQuery/React
Iterate nested array of JSON objects and append children to a particular object using jQuery/React
We are trying to create a tree view navigation using PnP react TreeView control for SharePoint ...
0
votes
3answers
49 views
While setting up new SPFX environment getting Error of unsupportability
I am trying to set up an environment for SPFX development. I tried to install the latest version of nodejs.
I installed latest version of nodejs 14.15.4 and automatically npm verion 6.14.11 installed.
...
2
votes
2answers
32 views
Not able to insert data into TaskList In sharepoint Spfx
Using SP-Pnp-Js Library, I am not able to insert data from a webpart into the sharepoint Tasklist.
private SubmitWorkflowForm(): void {
var TaskNameVal = document.getElementById('taskName')['value'];
...
1
vote
1answer
34 views
SPFX No Javascript Framework
I am encountering the below error and would welcome any information to resolve the issue:
SharePoint 2019
SPFx webpart with No Javascript Framework
PropertyPaneFieldType'.\n Property 'DynamicField' ...
0
votes
2answers
29 views
Promise is missing properties
When I try to create array, to put the results in the array, then I get the following error message:
const allItems : any [] = sp.web.lists.getByTitle("Documents").items.get();
Type '...
0
votes
0answers
15 views
Intercepting Query String Changes in Web Parts -Error when traversing between items in Left nav (SPFx Webparts)
I am working in Sharepoint online 2019 with SPFx Webaparts. We had a requirement to change query string (added filter)
in application spfx webpart with kendo grid. It got changed in URL but the grid ...
0
votes
0answers
40 views
SPFx Play HTML5 Video dynamically on a webpart
We are developing a webpart
That has a textbox where we supply a Video URL
This would fetch the Video URL from a SharePoint list on button click and set the SRC of the Video Element.
Code
function ...
0
votes
0answers
24 views
Getting Manifest not found for component id errors when adding a custom SPFx webpart to a site
For my SP Online instance, I made a SPFx webpart and when I deploy it to a site, I get the following. I did a non-tenant wide install to the tenant app catalogue. And then I installed the app on my ...
3
votes
3answers
124 views
Share “node_modules” folder between webparts
Here is my scenario:
I have 7 different webparts
In order to have more control over the projects, I have split them in different projects
All of the projects were created using the Yeoman installer
...
2
votes
1answer
41 views
SPFX Webpart width shrinked after published in Modern Page - SharePoint Online
Developing SPFX app, where everything looks good(I mean the width) in edit mode, soon after publish the webpart width is getting reduced somehow.
Using Fabric UI CSS
.propertyDigitalManagementWebpart ...
0
votes
0answers
16 views
How to prioritise loading of one web part in SPFx?
I have a SharePoint modern page on which I have a couple of web parts installed. The web part on top is a carousel that needs to be rendered first. The problem I am facing is that when the page is ...
0
votes
2answers
22 views
Can GraphAPI be used to create item to list using SPFx, even if Current Loged-In user have have only Read Permission on list?
With SPFx can item be created in a list using GraphAPI if User have only "Read" permission on list? Will granting delegate Permission to SPFx solution with Sites.ReadWrite,Site.All will work?...
1
vote
1answer
43 views
Filter based on date only, not time | PnP JS
I am using PnPjs to query a SharePoint list. I am using this code:
let today: string = (new Date()).toISOString();
today = `${today.substring(0, today.indexOf('T'))}T00:00:00Z`
let results = await sp....
2
votes
1answer
52 views
onDisplayModeChanged not called when client side page changes display mode
I have a web part that use onDisplayModeChanged to handle different content based on edit mode end view mode - and they have worked fine for months - until some days ago.
MS doc: https://docs....
0
votes
1answer
40 views
how to use Fluent UI HoverCard in SPFX Webpart
In my current project there's requirement to show more details when hovering on a read more HTML span, where specified functionality is to show Fluent UI HoverCard with all the details, I am trying to ...
0
votes
0answers
18 views
Microsoft Teams Tab is not able to fetch SharePoint List Data
Is there any way, so that my "Teams Tab" could fetch the value from SharePoint list's data?
I have used SP PnP JS library in SharePoint SPFx to build this solution.
I have Sync this ...
0
votes
1answer
22 views
How to enable promoted results in modern pnp search app search result
How to enable promoted results in modern pnp search app search results?
MS Search showing the promoted results are first.
1
vote
0answers
16 views
Initialising spfxContext for a different user in pnp/sp
I'm trying to build an spFx app, that uses a different user to access lists and libraries than the logged in user. The logged in user won't have the permissions to access the lists directly but only ...
0
votes
2answers
46 views
Fluent UI no theme in SpFx
I'm currently working on my first SPFx project using Microsoft's Fluent UI React. I tested my solution in the local workbench and everything seemed fine. But as soon as I release it to the app catalog ...
0
votes
1answer
35 views
SharePoint Online and adding an interactive page (Javascript)
I haven’t developed in SharePoint for a while and trying to gain some knowledge on how to create a interactive SharePoint Online page - either classic or modern.
The requirement is to display/edit a ...
0
votes
1answer
24 views
VideoPlayer using React and Typescript
Being new to typescript , I have been struggling with its implementation lately using it on the webpart.tsx file
With the help of the posts here , was able to get to the point where the video plays ...
0
votes
2answers
137 views
How to use the latest set of Fluent UI icons for SPFx?
I am using the code from here
https://developer.microsoft.com/en-us/fluentui#/controls/web/icon
which is
import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
<FontIcon iconName="...
0
votes
0answers
11 views
Component Inheritance from Property Pane
I want to know if it is possible for other react components created within the spfx project to inherit property pane properties from the root class and if yes how does one go about it???
1
vote
1answer
185 views
open another teaching bubble on click of heading in Teaching bubble
First Teaching bubble as per your example
import * as React from 'react';
import { MouseEvent } from 'react';
import { DefaultButton, IButtonProps } from 'office-ui-fabric-...
0
votes
1answer
72 views
Creating items or updating items inside folder in sharepoint list in SPFX typescript using PNP or spghttp client
I was trying to creating an SPFX solution using React where on submit of form I am saving multiple items inside a folder in SharePoint list.
I understood how to create folder inside SharePoint list ...
0
votes
1answer
16 views
Hide SharePoint sppkg from site contents
How do we hide all the solutions deployed in a site from site contents? I am structuring my solution to have separate project for each web part. So far I have 7 web parts each deployed with a ...
1
vote
1answer
36 views
Update List in List view webpart based on url parameter
Is there any way to dynamically update the list in the 'list view web part' based on the url parameter?
My requirement is-
I have a sharepoint modern/classic web page, in that I have to display list ...
0
votes
1answer
38 views
SPFX Package Error in SharePoint
We are getting the below error while trying to deploy SPFX webpart in SharePoint. We are using SharePoint 2019 On-premise.
When generating the package it does not generate any errors but when I upload ...
0
votes
0answers
27 views
How to check the App Id from the AppTile object in PnP PowerShell for SharePoint Online?
In PnP Powershell, I want to get a list of all my custom deployed web parts from (SPFx) and also check which all sites have them deployed to (they are non tenant wide installs). I have this script so ...
0
votes
0answers
35 views
Error calling Azure Function from Domain-Isolated SPFx web part in local/remote workbench
I created a domain-isolated SPFx web part for SharePoint Online, which calls an Azure AD secured Azure Function.
I added the web part to the SharePoint Online App Catalog, approved the "isolated&...
0
votes
2answers
210 views
'resourceid cannot be empty' when approving API access in admin site
In the SharePoint online admin center, I'm unable to approve API access for my SharePoint spfx app.
I keep getting this error: 'resourceid cannot be empty'
The app already works on another tenant. I ...
0
votes
1answer
28 views
How to list all sites that contain a custom webpart in sharepoint online?
I have made several web parts from SPFx and deployed it non-tenant wide. There are multiple sites that I have deployed these apps too, but not all sites contain all of them. Is there some api that I ...
0
votes
1answer
31 views
SharePoint Online - Teams Chat Messages Notifications and Conversations
Is it possible in SharePoint online instead of directing the users to teams, have a pop-up on the same screen at the bottoms of a page with the same chat experience in Teams?
If so, can someone please ...
0
votes
1answer
44 views
error no-unused-expression: unused expression, expected an assignment or function call
I am getting an error as:
error no-unused-expression: unused expression, expected an assignment or function call
at else statement in below code. And also showing error as:
missing semicolon
at ...
0
votes
0answers
52 views
Typeerror : failed to fetch in pnpjs in Sharepoint SPFx webpart
I have written below code in SPFx Webpart to upload file to Sharepoint Library. It gives me error sometimes like TypeError : Failed to fetch. Can anyone give me some idea what this error signifies and ...
1
vote
0answers
17 views
How to set active item index in pnp/spfx carousel?
I am using Pnp/spfx Carousel control and binding elements like below:
<Carousel
buttonsLocation={CarouselButtonsLocation.center}
buttonsDisplay={...
0
votes
1answer
48 views
Pnp JS getting data from list
I am trying out pnpjs USING SharePoint framework and adding new item to my list.
But when I try to gulp serve and run it inside my SharePoint Online
const iar: IItemAddResult = await sp.web.lists....
1
vote
1answer
33 views
how can we automatically add commas to numbers being typed in SPFx react fluent textfield. ex: 1,000,000,000
<div>
<TextField
value={this.state.Budget}
onChanged={this.onChangeBudget}
/>
</div>
public onChangeBudget = (value: string) => {
console.log("Budget : ...
0
votes
1answer
54 views
How do I access Sharepoint list data from a custom spfx webpart?
I'm trying to get all list items from a list on the same domain as the client-side spfx web-part. It's a pretty basic call via the REST API, however the information being returned doesn't match that ...
0
votes
0answers
56 views
pass data from component to Teaching Bubble headlines
I am trying to pass data for headline from my .tsx file to teaching bubble headline which is another but getting below error
import * as React from 'react';
import { ...
0
votes
2answers
35 views
Headline for teaching Bubble
Trying to show HTML data to teaching bubble headline but getting below error.
Any idea how can I resolve it?
0
votes
2answers
38 views
SPFX - What is the scss variable for the themes primary colour?
What is the scss variable for the themes primary color (orange)?
I am using: $ms-color-themePrimary
But this is giving me a blue color and not the orange one displayed in the image below:
0
votes
1answer
19 views
Is there an internal variable or something like it that indicates when all the Rest API calls in a SPFx webpart are done?
I have about 200+ Rest API calls in a SPFx webpart (TypeScript and JSON). Most of them are asynchronized. Everything is working fine. I just need to know when all the calls are done so I can save the ...
1
vote
1answer
32 views
Disable dates for a selected range in React SharePoint SPFx [closed]
I am new to React SharePoint Online SPFx and want to know how to disable dates in selected range in react-datetime. For now, I am using npm-reactdatetime and able to disable dates from current date.
...
0
votes
0answers
11 views
Are there any new webparts available for sharepoint tabs and accordion from Microsoft coming soon?
I did watch a video from Microsoft (can't find it anymore) showing how you can create a page with accordion and tabs.
But can't seem to find the link :(
Anyone seen this or know something about it?
0
votes
0answers
39 views
Change date and time entered by user to different timezone in React Sharepoint SPFx
I am trying to change date entered by user to different timezone. Right now it only for default value.
But I want to change the date which will be entered by user in React Sharepoint Framework SPFx
&...
0
votes
1answer
29 views
Rating in Spfx for low , high ,medium
Hey i want to display rating in spfx webpart as below image from sharepoint list choice column if value is high , low , medium for respective columns is
