Questions tagged [office-ui-fabric-react]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
0
votes
0answers
30 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
537 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
48 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
23 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 (...
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....
3
votes
1answer
1k 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 { ...
0
votes
0answers
29 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
79 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

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
44 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
41 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
69 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
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 ...
1
vote
3answers
95 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
35 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
142 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
49 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
302 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-...
0
votes
1answer
226 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
177 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 ...
1
vote
0answers
27 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
122 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
129 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
83 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
378 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 ...
0
votes
0answers
18 views
1
vote
2answers
280 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
2k 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 '...
0
votes
0answers
52 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 ...
1
vote
1answer
264 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
206 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
269 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
101 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
210 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
202 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/...
1
vote
1answer
94 views

Unable to open popup in spfx react

<div className="backdrop" style={this.backdropStyle}> <div className="modal" style={this.modalStyle}> {this.props.children} <...
2
votes
1answer
3k 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
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>{...
0
votes
1answer
247 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:
0
votes
1answer
909 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
105 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 ...
2
votes
0answers
719 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
0answers
54 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
187 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
0answers
178 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 ...
3
votes
1answer
2k views

SPFx - Office UI React - How to default select user in People Picker

I want to set default selected Item on people picker? <NormalPeoplePicker defaultSelectedItems={()} inputProps={{ disabled: true }} onChange={this._onChangePeoplePicker} ...
0
votes
2answers
321 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
1answer
119 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 ...