Questions tagged [office-ui-fabric-react]

Office UI Fabric React is the official open-source React front-end framework designed to build experiences that fit seamlessly into a broad range of Microsoft products. Use this tag when your question is specifically around the ReactJS usage of the Office UI Fabric.

Filter by
Sorted by
Tagged with
0
votes
1answer
24 views

Display count/number on icon in SPFX Extensions

I have a requirement to display the count (actually, the count of active notifications) on the icon in SPFX extensions. I have the count. I am using React UI Fabric Icon control. Is there any property ...
1
vote
1answer
113 views
+100

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
0answers
41 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 ...
0
votes
0answers
54 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
34 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
0answers
29 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
22 views

How to set dropdown value from query string in fabric dropdown

i am trying to set value in dropdown from query string but unable to do so , below is the code private SelectReferralFromQueryString(name) { name = this.GetParameterValues('Country'); if (name ...
1
vote
1answer
41 views

SharePoint Online Workbench layout much different from deployed .sppkg webpart - Using React

I'm using SPFx/React to create a simple custom form. Using Fluent UI grid, controls, etc. and it looks fine in the dev workbench area, but as soon as it's deployed the layout is completely ignored. I ...
0
votes
0answers
38 views

Bind Detailed List on selection of Dropdown SPFX

I had created a SPFX webpart which bind data in Detailed list and one more component is there which is dropdown . I am unable to bind Detailed List on change of Dropdown , below is my full code , now ...
0
votes
0answers
17 views

getting document from Sharepoint Document library

Can anyone guide me to how to get document from Sharepoint Library using rest api in Spfx ,tried using below code to bind static data in Detailed List ,but unable to get rest api call ? ...
0
votes
1answer
86 views

How to change dropdownItem color in office-ui-fabric-react?

I am new to SPFX and office-ui-fabric-react. I have a dropdownlist with below code and attributes: <Stack tokens={stackTokens}> <Dropdown placeholder="Select an option" label=&...
1
vote
1answer
156 views

Icon missing and access to XMLHttpRequest at officeapps url got CORS error

I am developing a SPFX extension. While I am debug it at my SP online site using debug script, I found the icons are not showing up. Those icon are <i className="ms-Icon ms-Icon--PageEdit &...
0
votes
1answer
49 views

object Object error in SPfx

Trying below code to read Site column but getting value as [object Object] OnClick Function: onClick={()=>{this.Funnel(items.SiteColumn)}} Complete function code: public render(): ...
1
vote
0answers
216 views

Sticky Header in SPFx webpart

I have a SPFx webpart where I am using "DetailsList" to bind search data, I want to make header sticky while person scrolls the webpart, I have a search bar then dropdown and then grid in ...
0
votes
0answers
23 views

Updating a Dropdown when it is rendered inside DetailsList

I am rendering some Dropdown elements inside two of the columns in the DetailsList element. The items of the DetailsList are dependant on an previous selection which updates the items displayed in the ...
0
votes
0answers
23 views

Issue while searching folder with specific name

I am facing an issue while retrieving the folder available in a list based on userId. Using the below code to fetch the folder using Name and the “response” returned is most the times “not available” ...
0
votes
1answer
122 views

UI Fabric TextField in spfx for SP2019 - overwrite css

Has anyone got known a technique/trick for overriding css style of the Office UI Fabric's component related to Spfx 1.4.0 (for the SP2019)? More specifically I would like to update TextField red ...
1
vote
1answer
120 views

Fetch multiple images from SharePoint library and display images in SPFX webpart

SharePoint Library -- Multiple image and HexID field I am able to display one image by giving full URL of images but i have to filter the images based on HexID, But I am not sure how to apply filter, ...
0
votes
1answer
104 views

React.js: avoid delay on element <input type=“file”> onChange event

Any react-specific solution to the problem, described here? https://stackoverflow.com/questions/46072489/how-to-avoid-delay-on-element-input-type-file-onchange-event?noredirect=1&lq=1 Basically ...
2
votes
1answer
171 views

React Props in main component, change to state on change dropdown

I have a main component that is calling a list. I am passing this item to one of the components prop which is the value of a dropdown. For me to be able to setstate, I assigned the prop to state ...
1
vote
1answer
328 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
384 views

SPFX - calling async function - Missing properties

I'm trying to create a modern webpart that connects to MSGraphClient using the UI Fabric, to create quick access to files. I'm getting the follow error calling an async function with _allItems (...
0
votes
1answer
359 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
0answers
30 views

Customize SharePoint left menu pages by using a specify term set in Taxonomy

I have a term set called WikiPages. What I would like to do is creating a contextual menu (i.e the quick launch or left menu) for all my pages of my team site (modern experience) using Fabric-UI Nav ...
2
votes
1answer
647 views

SharePoint Online Modern Page Layout Column Size

I am trying to make three column page layout and I want middle column to be bigger than other two. How it is possible. Do we have to add anything into spfx web part or is there other way !!
0
votes
2answers
153 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
0answers
102 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("/../../../....
1
vote
1answer
410 views

Office UI Fabric verticle align middle not working

I am trying to make my image vertically aligned in middle using CSS which is not working in Office UI Fabric. My HTML Code: <div class="ms-Grid" dir="ltr"> <div class="ms-Grid-row"> ...
0
votes
1answer
113 views

SPFx webpart component set default color

I have created a tiles webpart where i am changing the color on toggle between tiles but i want to set default color for one of tiles once page load and then user can toggle ...
2
votes
0answers
231 views

What are the supported office UI fabric versions for SPFX 1.1.0

There are many threads and answers regarding this question. But i didn't find a satisfying answer. I am currently working on a SPA for SharePoint 2016 OnPrem. I scaffolded my Project with the Yeoman ...
1
vote
0answers
93 views

SPFX : TypeError: external__react_.useContext is not a function

I am using office-ui-fabric card in my spfx web part. Getting the error as below. createComponent.tsx:51 Uncaught TypeError: external__react_.useContext is not a function at result (...
0
votes
1answer
103 views

Auto play false Image Carousel SPFX webpart

I have created image carousel SPFx web-part which is set as auto-play equal to true and on click of image there is modal pop up, its working fine. But when I click on image my modal pop up open but ...
0
votes
1answer
170 views

on click change Document card color SPFX

I have developed a webpart where on hover i am changing the color of document card office fabric component and on click of document card i am showing grid ,but i am not able to change color of ...
0
votes
1answer
210 views

Css overide for office fabri ui Pivot

How can we do padding left in office fabric UI CSS for pivot component , Want to padding of Pivot component its working on develoepr tool added screenshot for same but not able to override through css ...
0
votes
0answers
86 views

SPFx: Unwanted border on click of Document Card in React JS

I am creating SPFx webpart using React JS. On click in document card component I am getting unwanted border. I tried removing it but not working. I have applied border-radius on document card style, ...
0
votes
1answer
188 views

Document card hover colour change

Hi I have used office fabric ui document card i want to change colour on hover of document card , const cardStyles: IDocumentCardStyles = { root: [ ...
0
votes
1answer
68 views

Empty “URL” does not load SPFx web-part

I am creating SPFx web-part in which I am using office fabric to bind SharePoint image link (hyperlink column). Web-part works fine if all values present. If hyperlink column is blank web-part does ...
0
votes
2answers
2k views

How make accordion detail list with UI fabric react

I start with UI Fabric react; I am developing a FAQ; I use for that a list; but the result is not good; I want to do something looks like an accordion, where we can see the question as a header and ...
1
vote
3answers
261 views

get sharepoint list with pnp [closed]

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 '...
0
votes
1answer
960 views

What are the supported office UI fabric versions for each SPFx versions?

It is so confusing that some parts of office fabric will not work as expected with different SPFx versions. I have created a SPFx solution for SharePoint 2019 on-Premise. Following things are not ...
0
votes
1answer
1k 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
0answers
37 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 ...
1
vote
0answers
274 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 "...
0
votes
1answer
2k views

Fabric UI DetailsList component - Dynamically load group items

I'm using grouped DetailsList Fabric UI component in custom SPFx webpart for displaying list data. https://developer.microsoft.com/en-us/fabric/#/controls/web/detailslist/grouped I need to load ...
1
vote
0answers
92 views

(Problem)SPFx rendering items from RSS after selecting number of items you want to display with slider

I am currently building an RSS webpart in SPFx using React as a framework. Now I am in the stage that I want the user to be able to select how many news items he/she want to see with a slider (taken ...
0
votes
1answer
336 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 ...
0
votes
1answer
367 views

MSGraph with spfx WebPart does not propt user for permission

I am expermimenting with people in MSGraph. I am attempting the "/me/people" graph call and getting a 403 forbidden. The People.Read permission states it does not need Admin Consent. People ...
-1
votes
1answer
143 views

Debounce in sfx react

The code I am using: <TextField onChanged={e => this.handleCommChange(e, 'Contact')} private handleCommChange(e: any, controlType: any): void { const { temp_items } = this.state; const ...
1
vote
1answer
513 views

Selecting a date in 2nd date picker clears the 1st date picker (UI Fabric React)

I'm making a SPFx webpart and I've 3 date pickers. See images below. First I start with 3 empty date pickers (oké they looks good) Then I select a pick up date (no problems so far) Then I select a ...
1
vote
2answers
435 views

Error when using 'boolean' type property in spfx

I have used office ui fabric 'Checkbox' component in my spfx. For storing value of checkbox I have declared one property with name 'var_Passport' as 'boolean' type. further, I'm assigning value (true/...