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
51 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=&...
0
votes
1answer
108 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 ...
0
votes
1answer
179 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
62 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
1answer
34 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(): ...
0
votes
1answer
90 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 ...
0
votes
1answer
327 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
134 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
91 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
159 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
189 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
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 ...
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 ...
0
votes
1answer
306 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
701 views

error: no mixin named focus-border office ui fabric react.Issue when referring common

Requested priority: (Blocking, High, Normal, Low) : High Describe the issue: I have created a sharepoint react framework solution.This solution uses List Component.I now want to use the (https://...
0
votes
1answer
3k views

SPFX list view WebPart with react, list data loaded with PnP js, but not rendering

I have created SPFX webpart with react framework. I successfully get data from SharePoint pnp bu in react data is not loaded. When I resize browser window then data displayed successfully. Please see ...
0
votes
1answer
18 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 ...
0
votes
0answers
22 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
16 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
0answers
18 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
70 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 ...
0
votes
2answers
332 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
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 ...
0
votes
0answers
97 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("/../../../....
0
votes
0answers
108 views

Jest with SharePoint Framework. SyntaxError: Unexpected token export

I'm trying to do tests on an SPFx project with Jest and Enzyme. I have configured the environment using Andrew Connel's preset to test my solution with React and Typescript. After run 'npm test' I've ...
0
votes
0answers
79 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
894 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
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 ...
0
votes
1answer
354 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 ...
0
votes
2answers
514 views

SPFX Web Part Disappears on Save

I have a weird issue. In this one web part, it works when I add it to a page. But it disappears once the page is saved. Additionally, web part properties for the web part also don't persist. Once a ...
0
votes
0answers
309 views

How to use the reusable components in SPFx projects

I am working in a SharePoint Framework (SPFx) project in Online version. We have created two separate projects, one is main project and another one is common project. The common project will contain ...
0
votes
0answers
251 views

office UI fabric react in sharepoint web part

I am currently developing a web part using the SPfx. Wnated to know how can we edit or override the styles for office UI fabric react ? Thanks in advance. BreadCrumb.module.scss @import '~@...
0
votes
1answer
175 views

SPFx image previewer extension

I am looking around to create an image previewer extension using SharePoint framework. I don't want to reinvent the wheel, so I am just wondering if there are some ready components which I can include ...
0
votes
2answers
3k views

Setting default value office ui fabric react people picker

I'm currently using the CompactPeoplePicker component however I'm looking to extend it using the selectedItems property to set the people picker from a rest call. <CompactPeoplePicker ...
0
votes
1answer
217 views

collapseByDefault not working in Nav-component from Office UI Fabric

I try to build a navigation with spfx. Its working fine but I want to have the navigation collapsed. It seems that the property is not assigned or recognized by SPFx (it is running but with no effect)....
0
votes
1answer
286 views

SPFx -Error when use last version of Office-UI-React with SPFX 1.4.0

I want to use last version of Office-UI-React with SharePoint Framework v 1.4.0 with TypeScript Version 2.2.2. When i install last version office-UI-React have following error:
-1
votes
1answer
138 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
2