Questions tagged [spfx-webparts]

Technical questions about building and using web parts based on the SharePoint Framework client-side development model.

Filter by
Sorted by
Tagged with
0
votes
2answers
36 views

get sharepoint list with pnp

I want to get a sharepoint list and assign it to my list 'items' which of type is IExampleItem, but I don't really know how to do it; I tried the following code but it gives me an error, my list '...
2
votes
1answer
777 views

how to use react-bootstrap in SPFx webpart

installing react-bootstrap straightforward; "npm install react-bootstrap --save" and "npm install @types/react-bootstrap --save" then add references import FooButton from 'react-bootstrap/...
0
votes
1answer
21 views

Programmatically trigger flow and send properties

I want to manually trigger an external flow from my SPFx project, and at the same time send values to the flow. In flow, I have my request body: { "$schema": "http://json-schema.org/draft-04/schema#...
0
votes
1answer
45 views

SPFX Tiles webpart

Hi I am new to SPFX and react JS , i like to create Tiles webpart from sharepoint list where it will render all properties of tiles from list like icon, colour,text, I had tried using office fabric ...
1
vote
2answers
979 views

How to edit a Rich Text Field in an SPFX Webpart

I am creating an spfx webpart to allow users to edit some items in a list. I am trying to use office-ui-fabric-react for all the controls as recommended. The list has a rich text field(Enhanced rich ...
1
vote
1answer
182 views

SPFx - Using UI Fabric Core Controls without React Framework

Just wanted to check If I am not missing something. I wanted to use Office UI Fabric core controls on SPFx webpart without React component. So basically I have option to use SP Fabric Core. https://...
1
vote
0answers
19 views

React button to open SharePoint Document Picker

I have seen and experimented with the Property Pane controls that allow you to select a document or image from a pane and was curious if anyone has seen this same capability available from a button ...
0
votes
1answer
736 views

Angular 2 Routing in SharePoint Framework - SPFX

Using Angular.IO site's Routing example , I created a simple SPFX webpart with two components Dashboard and HeroDetails. When I try to run it through SharePoint site I see following error. Attaching ...
3
votes
1answer
1k views

Display a SPFx web part within a popup on a modern page

I am looking for a way to display an SPFx web part within a pop-window in a way, similar to using the modal window ( as descrbed here: https://www.ericgregorich.com/blog/2013/12/30/open-a-page-in-a-...
0
votes
0answers
28 views

How to add Edit webpart button in Teams tab for SPFx like this?

I want this kind of edit web part button in teams tab for installed SPFx web part.
3
votes
1answer
2k views

VS Code : Breakpoint ignored because generated code not found (source map problem?)

I am trying to debug my SharePoint Framework web part in VS code using the Chrome Debugger extension but I am getting error message as Breakpoint ignored because generated code not found. Also in ...
0
votes
3answers
1k views

Add OnClick Event to SPFX Html - No Framework

I have an SPFX Web Part (No Framework) and would like to add an onClick event to my which will call my function swap(). Code: export default class ExpandableIFrameWebPart extends ...
1
vote
0answers
17 views

Question regarding webpart and reading/uploading images

Scenario: I have a Modern Webpart written in ReactJS, it allows user to filter images based on custom attributes that I have in a json file that is mapped to image file names. Currently the images ...
5
votes
1answer
614 views

SPFx web part not showing from the catalog

Followed the video from SharePoint Framework development with SharePoint 2016 Feature Pack 2 but could not add the web part to the site because it did not show up. I made sure I have only SPFx 1.0....
0
votes
1answer
29 views

SPFX: is @pnp/sp get call asynchronous?

I am new with @pnp/sp and I am having problems with my code: public render(): React.ReactElement<IVisualizadorPermisosProps> { var arbol=[]; sp.web.get().then((data)=>{ arbol....
0
votes
0answers
13 views

Drag n Drop API not working as expected

I am working on a project on which user will drag a text from webpart(e.g. webpart1) & dropping the same text into other webpart(e.g. webpart2) . I am referring This link as reference . Based on ...
1
vote
1answer
47 views

SHAREPOINT FRAMEWORK - REACT JS alert on Page Load

I am new to SharePoint framework and React JS. I have build a basic Web Part with CRUD operation using React JS. I wanted to show drop-down(html select) value on Page Load in an alert. I am able to ...
1
vote
0answers
41 views

Office ui fabric Dropdown menu does not work on keyboard press

I have SPFX component with React library. The Dropdown menu is working fine with mouse onclick events. however, on pressing enter or space is not working. I am thinking of using eventhandlers such as "...
1
vote
1answer
97 views

SPFX Webpart- “Error initializing application” after refreshing page

SPFX app is created and deployed tenant level. IF it is add to a page at site collection level (ex:https://text.sharepoint.com/sites/ABC) it is working perfectly. If it is added at subsite level (ex:...
0
votes
1answer
44 views

SPFx web part throwing error in SP2019

I have created spfx solution by selecting option which will work in SP Online and SP 2019. I have tested this in SP Online which is working fine. Now I have moved this .sppkg file to SP 2019 app ...
1
vote
2answers
32 views

SPFX rest call response seen in network tab but I cant read it on console

I got an issue I'm doing a rest call to get columns of a list, the call success because I can see the response in the network tab of the developer tools, here is a picture: for some reason when I try ...
3
votes
2answers
198 views

Calling external API in SharePoint framework

I am trying to call the dummy API from SPFX, but I am getting an error, Failed to fetch, this.context.httpClient .get("http://dummy.restapiexample.com/api/v1/employees", HttpClient.configurations....
0
votes
0answers
30 views

SPFx packages are referencing older versions

I have created a new solution with option SharePoint 2016 onwards, including 2019 and SharePoint online. Then I have added a web part and did the gulp serve. I got below error: Now I checked the ...
3
votes
1answer
43 views

PnPJS - MS Graph API - how to get group photo

I am using PnPJS for MS Graph API to retrieve groups information in SPFx solution. I am able to get the groups information properly. I need to get the group photo also, since photo is not available ...
0
votes
1answer
88 views

SPFX open new list item using modal dialog

The code below opens a new item in Iframe/modal dialog. But when the user saves or closes the modal form i would like it to be closed and not redirected to any other page. Is there any way I can ...
1
vote
1answer
650 views

Open modern image file dialog in SPFx web part

By using the "Quick links" client-side web part on a modern site page it is possible to add a new link and set an optional image by a file dialog. Is it possible to use this kind of file dialog in ...
4
votes
4answers
370 views

How to catch navigation event in SPFx webpart?

Is it possible to catch navigation event inside Sharepoint Framework web part? I know this is possible in application customizer using context.placeholderProvider.changedEvent, but I cannot find ...
1
vote
0answers
13 views

How to Render Modern Search Web part Results in Tabular format with additional metadata columns that allows to sort the results

I am using Modern Search Webpart with custom template to display the results in tabular format with additonal managed properties, which works fine. How can I make headers to act as Sortable fields, ...
1
vote
2answers
65 views

spfx webpart/component with position: fixed

I'm trying to create a spfx-react webpart for SharePoint Online like the feedback button on the walmart page (https://www.walmart.com right side). This works in edit mode and in the workbench (local ...
3
votes
2answers
807 views

Custom webpart (spfx) not listed in app gallery

I created an app catalog and a developer site Then I uploaded the SpFX Webpart package But the Webpart is not listed in the app gallery of my developer site so I can't use the web part. Any tips?
3
votes
2answers
1k views

Office UI Fabric DetailsList(React) rendering: DetailsColumn.render() error

I am trying to add a very basic implementation of the Office UI Fabric's DetailsList React component to my project, but keep on getting the following error when trying to render it: 'DetailsColumn....
1
vote
1answer
88 views

SPFX - React JS : How to handle an empty list

SPFX-ReactJS newbie here. Wondering how I should handle an empty list. I am trying to connect my web part to a list and simply display them on my web part and automatically update the page as items ...
1
vote
2answers
537 views

SPFX webpart context is undefined

Ok so i've searched for a while and tried everything. I've followed these steps as well -> How to retrieve pageContext in SPFx? So far its just a "testing phase", but i get stuck at the beginning ...
0
votes
1answer
49 views

Office UI Fabric not loaded with SharePoint 2016 | SPFx

I have sharepoint 2016, and i am trying to load the property panel of spfx webpart, however it's loaded without fabric icons. For example the Back and Next buttons look like this: Is there a way to ...
3
votes
1answer
258 views

how to install api(youtube-api-search ) in spfx&React project created by yeoman-generator

I created my project wth yeoman template generator; yo @microsoft/sharepoint command(react choosen as JS framework). than installed youtube search api npm install youtube-api-search so far ...
0
votes
1answer
33 views

Adding data to window object -

In the webpart I am currently preparing using SPFX I need to assign some user data into window object: (<any>window).userDetails = { displayName: this.context.pageContext.user.displayName,...
6
votes
2answers
5k views

workbench page shows “This site can’t provide a secure connection” on creating SPFx Webpart

I am new to SPFx, tried to create simple webpart using SPFx. Referred from here. Followed these steps: -Installed nodejs -Installed gulp & yomen using npm install -g yo gulp in powershell. -...
1
vote
3answers
57 views

To retrieve a single list item by using current date

I have created a list, and the list has many items. I have to retrieve a single list item based on current date. I would appreciate if some one could help me how to retrieve that particular item from ...
1
vote
2answers
280 views

SharePoint Framework/ issue/ drop down change event on web part/

I want to use drop down control on SharePoint framework webpart(done) and on change event to call some method/ some rest api and so.but it is not allowing. I did not find any article where spfx web ...
2
votes
1answer
90 views

SPFX and React : Component not rendering correctly because of findDOMNode returns null

I am a new React learner, and I may have a situation with render() and findDOMNode. What I have and what is the wrong behavior : I'm quite new to React so, I may have done lots of mistakes there. I ...
3
votes
1answer
300 views

SPFx Custom Property Pane

I had created a SPFx web part. The web part contains a Property Pane Custom Field, which returns a string. Now, when I hit apply button on property pane, my custom property gets the data and render it ...
5
votes
1answer
182 views

New Communication site Template supports Multilingual Content

we have a requirement to use new Communication Site template and build a web site, but it should be multilingual. Since new Communication site look and feel and responsiveness suit to my client ...
0
votes
1answer
1k views

set office ui fabric datepicker format

How to set date format in UI-Fabric DatePicker component ? my code here <DatePicker firstDayOfWeek={firstDayOfWeek} strings={DayPickerStrings} placeholder="select date..." /> I ...
1
vote
4answers
61 views

function to retrieve the list item based on todays date

private _getListData(): Promise<ISPLists> { Date.prototype.addDays = function(days) { var Date = new Date(this.valueOf()); Date.setDate(Date.getDate() + days); return Date;...
0
votes
1answer
27 views

To retrieve the list items based on todays date

import { Version } from '@microsoft/sp-core-library'; import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@...
1
vote
0answers
37 views

To get the items from the list based on todays date [closed]

private _getListData(): Promise<ISPLists> { Error: A function whose declared type is neither 'void' nor 'any' must return a value. Promise iam getting an error. The above 'Error' is my ...
1
vote
1answer
20 views

To retrieve a single list item by using current date or todays date

private _getListData(): Promise<ISPLists> { Date.prototype.addDays = function(days) { var Date = new Date(this.valueOf()); Date.setDate(Date.getDate() + days); return ...
4
votes
1answer
959 views

Multi language support for Client Side webpart with New SharePoint Development Framework

I have created a sample Hello world webpart using the Examples provided at Office site Webpart has a Property called "Description" in Property Pane which displayed in English Language. I would like ...
0
votes
1answer
139 views

Workbench issues with spfx 18.2 and react 16.8.4

I have recently updated a number of modern spfx webparts to spfx 18.2 and this morning when I try to debug in workbench (locally and on tenant) I am getting serve errors in relation to react and react-...
4
votes
1answer
623 views

How do I get Terms from termstore using SharePoint Framework?

I want to fetch terms from termstore, in my SharePoint Framework app. I have tried this microsoft sample: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/knockout-taxonomy I ...