Podcast #128: We chat with Kent C Dodds about why he loves React and discuss what life was like in the dark days before Git. Listen now.

Questions tagged [office-ui-fabric-react]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
1
vote
0answers
18 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
23 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
36 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
70 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
37 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
39 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
0answers
23 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 ...
0
votes
1answer
65 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
34 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
0answers
45 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
211 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
18 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-...
1
vote
3answers
85 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
123 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
163 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
26 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
100 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
0answers
429 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
82 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
113 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
0answers
18 views

How to stop the fabric component from inheriting the site theme in spfx webpart?

I Want my component to be independent of the site theme.
0
votes
0answers
45 views

SharePoint 2013, React Component Dropdown not working in content editor web part

I am creating a React component in SharePoint 2013 page, I an using content editor web part to render HTML and React component javascript. I have used Textbox, Choice group control and they are ...
0
votes
1answer
186 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
95 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
190 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
187 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/...
2
votes
1answer
2k views

How to dynamically bind value (Options) to Dropdown - Office UI Fabric React Components

I'm using Office UI Fabric React dropdown in my spfx webpart. I have added static options in that dropdown as below, but I want to bind options dynamically which i'm getting from REST api. <...
1
vote
1answer
90 views

Unable to open popup in spfx react

<div className="backdrop" style={this.backdropStyle}> <div className="modal" style={this.modalStyle}> {this.props.children} <...
1
vote
1answer
33 views

Getting always extra button on display .. 1 button dont have any ID

I am having problem while looping. I am always getting an extra button. Please help. {this.state.items.map(myitems1 => { return ( <div key={myitems1.Id}> <span>{...
1
vote
2answers
124 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 ...
1
vote
2answers
267 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, ...
0
votes
1answer
842 views

Using Office Fabric UI icons in a SPFx extension

I want to add an icon to one of my buttons on my SPFx list extension. In the JSON, I can amend this for an url for an icon to my CDN, but how about if I just want to use office fabric UI, any ideas? "...
1
vote
1answer
104 views

Office UI Dialog not showing correctly on SPFX Web part

On the SharePoint Workspace the UI dialog works fine. The dialog comes out when you click on Forward Case. When I have gulp packaged the solution and adding the app (locally on gulp) then I get this ...
1
vote
0answers
52 views

Alignment wrong on a SPFX web part

I am newbie on SPFX with react but I have created this : but I need to align the left hand label with all the command buttons and get the background colour the same, the id label is a little bit ...
2
votes
0answers
183 views

Office-UI-Fabric Pivot with React Router? Possible or not?

I face real challenge (at least for me) so I decide to ask for some help here. I'm building SPFx app where I'm using Pivot from UI-Fabric and I would like the current user to be able to navigate back ...
1
vote
1answer
344 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
0answers
695 views

Sharepoint Framework Dialog, Modal and Panel not working

I have created a web part in react js which contains a Microsoft office UI fabric control "Modal" and it pop outs on a button click. This feature works fine on my local workbench but whenever I ...
1
vote
1answer
248 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 ...
1
vote
0answers
174 views

Set current user in Fabric.UI people picker

I'm struggling setting the current user to a people picker control in Office.Fabric.UI const people: (IPersonaProps & { key: string | number })[] = [ { key: 1, imageInitials: 'PV', ...
3
votes
1answer
2k views

Office UI Fabric Dropdown event onChange not working

I am creating SPFx component with React framework. For UI I am using Office UI Fabric controls. During my development I have found that "Dropdown" control's onChange event is not firing Based on ...
0
votes
2answers
295 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 ...
1
vote
2answers
807 views

Trying to use SPFX + React. Error “yo : The term 'yo' is not recognized as the name of a cmdlet”

I want to build my first SPFX React web part, so i am following this article:- https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components first step i ...
2
votes
1answer
240 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} ...
2
votes
0answers
125 views

Dynamic update Icon in SPFX client Web Part

I am using office ui frabric details list to display documents on spfx client web part from here. Now, I want to implement check-in/check-out icons to be displayed on spfx client web part dynamically ...
0
votes
0answers
217 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 ...
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....
0
votes
0answers
227 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 '~@...
1
vote
1answer
196 views

Reuse Child Component Method to Parent Component Fabric React - SPFx

I am using Fabric React with SPFx. I want to use one component public method to another component. How can be possible to reuse method? My Parent Component: export class PanelSmallRightExample2 ...
3
votes
2answers
4k views

How to customize width and hieght of Dialog component of Office UI fabric in SPFX webparts

I need a Office UI fabric dialog component of 600 by 600 px in SPFX webpart. Tried className and containerClassName attributes both didn't work. The style attribute doesn't. The max-width is set to ...
1
vote
1answer
163 views

Office UI Fabric Ract Command Giving an error UNMET PEER DEPENDENCY

Issue while adding command "npm --save install office-ui-fabric-react" NPM Version: @microsoft/generator-sharepoint@1.0.2 gulp@3.9.1 yo@2.0.2 How to solve this issue? It gives warning:office-ui-...