Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [office-ui-fabric-react]

The tag has no usage guidance.

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 ...
3
votes
2answers
794 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
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
628 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 ...
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} ...
3
votes
2answers
1k 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 '...
3
votes
1answer
856 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 ...
3
votes
2answers
2k 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 ...
3
votes
2answers
912 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 { ...
2
votes
1answer
872 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. <...
2
votes
1answer
566 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 ...
2
votes
1answer
146 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
119 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 ...
2
votes
0answers
462 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 ...
2
votes
0answers
102 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 ...
2
votes
0answers
614 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-...
1
vote
1answer
65 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
75 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
38 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
2answers
506 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 ...
1
vote
1answer
141 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
205 views

ngOfficeUIFabric or office-ui-fabric-react

kind of newer on office 365 and SPFX ? Im tring to use OfficeUIFabric, im in front of two choices : ngOfficeUIFabric or office-ui-fabric-react the decision isnt easy, so i need your feedbacks on ...
1
vote
1answer
29 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
1answer
81 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
1answer
157 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
1answer
1k views

office-ui-fabric-react upload file compoment and country-region-selector abscent

how can get the "upload file" and "country-region-selector" compoments in office-ui-fabric-react. it seems that office Ui fabric doesnot have those compoments. on React there is only this https://npm....
1
vote
0answers
72 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
37 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
159 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, ...
1
vote
0answers
33 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 ...
1
vote
1answer
198 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 ...
1
vote
0answers
129 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', ...
1
vote
1answer
132 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
207 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
192 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
1answer
391 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? "...
0
votes
1answer
311 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
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 ...
0
votes
0answers
14 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
14 views
0
votes
0answers
23 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
67 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
151 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
164 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
181 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
0answers
321 views

SPFx and React: how to filter on cascading dropdownlists?

I am using the example from Github, but I am not sure how to filter the second dropdown list based on the selected value in the first list: <MyAsyncDropdown label ="Select a site" ...
0
votes
0answers
443 views

Advanced SPFx Search box web part

I have found a spfx search box in github, but I was wondering if there is one that has advanced functionality, like searching for specific sites, libraries, by content type? Is it possible to use ...
0
votes
0answers
161 views

SPFx extension commandbar ellipsis callout

How do I make the "show more" ellipsis display a call out with sub-menu items? It only shows the header of the menu item, but not its sub-menu items? http://jsbin.com/mapebawapa/ I want the "...
0
votes
1answer
81 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 ...