Questions tagged [office-ui-fabric-react]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
3
votes
2answers
999 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
24 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 ...
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
39 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
56 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
0answers
76 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
232 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
14 views
1
vote
2answers
191 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
27 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
172 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
78 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
161 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
68 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
80 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
94 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
48 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
1k 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
30 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
208 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
466 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
85 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
493 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
35 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
127 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
147 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
1k 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
1k 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
184 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
84 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
1answer
2k 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 ...
1
vote
2answers
558 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
0answers
108 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
174 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
3k 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 ...
0
votes
0answers
197 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
154 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 ...
1
vote
1answer
136 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-...
1
vote
1answer
214 views

SharePoint 2016 SPFx React TypeScript Issue

I am getting an error of TypeScript 2.2.2 in SharePoint 2016. I can install SPFx web part with No JavaScript Framework approach. And it's working fine but when I choose "React" in "yo @microsoft/...
1
vote
0answers
199 views

SPFx, Fabric, and Modern Themes - Where are they available?

According to the last few comments of this techcommunity post, modern themes are currently only available on the 2 modern group-connected team and communication site templates. Does that mean ...
0
votes
2answers
1k 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
79 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)....
3
votes
1answer
910 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
1answer
344 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://...
2
votes
0answers
673 views

Sharepoint React Framework , office ui fabric css not getting applied on components

This is the current version of office ui fabric referened in my package : I am using sharepoint react framework and have used List component : Code Link : https://github.com/OfficeDev/office-ui-...
3
votes
2answers
852 views

SPFX Office Fabric react ChoiceGroup does not render properly after SetState

I'm trying to make a react component that would print out the total sum of selected values in 2 ChoiceGroup components. It must evaluate on every choice change. I'm updating state with SetState, but ...
3
votes
1answer
671 views

SPFX Fabric UI React Buttons handled by one click event

I need to put multiple CompoundButtons on my SPFX webpart, I need them to trigger the same onClick event handler. How do I know in my event which button has fired? I tried to use an id, but it seems ...
6
votes
1answer
1k views

How to perform CRUD Operations on sharepoint lists using React and PnP-JS Core with SharePoint FrameWork (SharePoint 2016)

I would like to create forms using react and PnP-JS Core with sharepointframework to perform CRUD Operations on sharepoint lists. Do you have any simple examples I can look at and test on SharePoint ...
2
votes
1answer
596 views

Office UI Fabric React Message Bar Icon not displaying

I have written a SPFX Application Customizer. The purpose of the customizer is to read in the current page list ID and Site Url. It then passes the information through to the React Components. I ...