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
3
votes
2answers
2k 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....
0
votes
1answer
25 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(): ...
3
votes
1answer
2k views

Office-ui-fabric-react : error in components & BaseComponent.d.ts file

add office-ui-fabric-react package in SPFX react webpart using <!-- language: lang-ps --> npm --save install office-ui-fabric-react then add <!-- language: lang-ts --> import { ...
1
vote
0answers
134 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 ...
3
votes
1answer
2k views

Office-UI-Fabric-react uncheck checbox

How Can I uncheck a checkbox dynamically from the code? I need to uncheck some checkboxes at the same time from the code when I press a button. I'm using: SharePoint Framework - Typescript - Office ...
0
votes
0answers
11 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
738 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
41 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
1k 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
1answer
41 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
28 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
83 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
160 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
222 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
209 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
254 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
90 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
80 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
244 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"> ...
1
vote
0answers
169 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 ...
0
votes
1answer
95 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 ...
1
vote
0answers
78 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
0answers
95 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
1answer
141 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
67 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
119 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
60 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
146 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
0answers
28 views

SPFX rest api taking time to bind data on click

Hi i have wriiten function on click of button i am calling this function to bind data in table but it taking some time to bind, data also less it should not take time. i am using multiple rest call ...
1
vote
3answers
223 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
51 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 ...
1
vote
2answers
266 views

Office UI fabric react Commandbar 3rd level menu rendering issue

I am using Office UI fabric react commmandbar in Office 365 - SharePoint to display 3 level navigation.It's showing 1st level then click on it user can see 2nd level and onmouseovercof 2nd level,3rd ...
0
votes
0answers
81 views

How to display content of Rich text on webPart

On my SharePoint list, I have a rich text with picture. When I retrieve it on my webPart, the picture doesn't get displayed. I obtained plain text but how can I display picture. i already tried this ...
0
votes
1answer
1k 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
0answers
20 views

How can we inherit the Theme of SharePoint Online

we have used below link to inherit the Theme of SharePoint Online in our react webpart, but it's not working. kindly suggest. https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-ui-fabric-...
0
votes
1answer
768 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
34 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
244 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
260 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 ...
1
vote
0answers
88 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 ...
1
vote
1answer
609 views

DetailsList component row rendering issue

There is a DetailsList component inside spfx webpart, which loads all the documents/files using PnP. There is a office-ui-fabric-react check out button outside DetailsList component. When I select ...
2
votes
2answers
372 views

Can I use SPFx 1.7 with Sharepoint 2016 Feature Pack 2 updated to the latest January 2019 patch?

We have an on-prem Sharepoint 2016 server which has been kept up to date with the latest security and feature updates and patches. We want to build a client application using SPFx Web parts, ...
3
votes
2answers
3k views

Can I use Fabric React in SharePoint 2013 without SPFX?

I want to use Fabric React JS in SharePoint 2013 Environment without SPFx. Is it Possible to use and deploy? Code: import * as React from 'react'; import { CommandBar, ICommandBarProps } from '...
1
vote
1answer
443 views

Office UI Fabric React People Picker Remove 'X'

Is there a way I can have certain personas unremovable from people picker? I was thinking how I can remove the X button: On the screenshot, I need to disable removal of test user2 and Test 115 while ...
0
votes
1answer
330 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 ...
2
votes
1answer
359 views

Hooking up the presence indicator for FabricUI's Persona component

I am using the Persona component for my SPFx web part. The React component looks like this: <Persona {...examplePersona} size={PersonaSize.size10} presence={PersonaPresence.offline} ...
-1
votes
1answer
125 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
451 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 ...