Skip to main content
Share Your Experience: Take the 2024 Developer Survey
9 votes

Using Office Fabric UI icons in a SPFx extension

This is currrently a SPFx limitation. You cannot directly use Fabric UI Icons as command set icons in SPFx list extension. Currently SPFx extension allows you only 2 ways to set extension icon, 1) ...
Gautam Sheth's user avatar
  • 30.9k
5 votes
Accepted

SPFX Office Fabric react ChoiceGroup does not render properly after SetState

Thanks for the suggestion but the issue was elsewhere. We must re-render control's value after setting state. What I was missing was selectedKey property of ChoiceGroup: <ChoiceGroup label='...
Sherbertas's user avatar
4 votes
Accepted

Office UI Fabric Dropdown event onChange not working

I do observe the same here. Interestingly, the deprecated onChanged event fires and not onChange. Works if extending a basecomponent and something is missing while extending React.Component. In the ...
kalyany1's user avatar
4 votes
Accepted

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

Init a property, which stores your options inside component's class: private options: any[] = []; Then load options dynamically (it depends on your application's logic), for example using async ...
Sergei Sergeev's user avatar
4 votes

What are the supported office UI fabric versions for each SPFx versions?

I'm not sure if this is still relevant, but this is the version I am using: SPFX version: 1.4.1 Office UI Fabric React: [email protected] Use Yeonman in order to install the template for ...
George Mavridis's user avatar
4 votes
Accepted

How to change dropdownItem color in office-ui-fabric-react?

Try using something like: const dropdownStyles: Partial<IDropdownStyles> = { dropdownItemSelected: { backgroundColor: "red" }, };
Ganesh Sanap - MVP's user avatar
3 votes
Accepted

Selecting a date in 2nd date picker clears the 1st date picker (UI Fabric React)

It seems you are not setting any value to your components: <DatePicker isRequired label={strings.datePickUp} value={this.state.datePickup} //Add this key={"1"} onSelectDate={...
LeonidasFett's user avatar
3 votes
Accepted

SPFX Fabric UI React Buttons handled by one click event

I don't know what you are trying to achieve but you can call your method like this: public render(): React.ReactElement<IReportingProps> { return ( <div> <CompoundButton ...
Lukas Nespor's user avatar
  • 1,661
3 votes

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

We have taken multiple initiatives where in we are developing client side web-parts using react for our clients. Traditionally we had been using jquery for making ajax requests in script editors. ...
mohd tahir's user avatar
  • 2,406
3 votes
Accepted

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

I have found that earlier versions lacked the selected items property but the current version, 5.28.0, includes the selected items property and with that I was able to set the default select. I didn't ...
Ryan Schouten's user avatar
3 votes
Accepted

Open image in new tab in spfx webpart

Try following workarounds: Using window.open(): window.open(imageUrl, '_blank'); Using Anchor tag / hyperlink: Add your image somewhere in SharePoint library/picture gallery Add anchor tag (...
Ganesh Sanap - MVP's user avatar
3 votes
Accepted

SharePoint css classes reference

You can find the styles, theme colors, typography, iconography defined by the Fluent UI at: Fluent UI - Styles Some of the classes are also listed at: Column formatting - Style guidelines You can also ...
Ganesh Sanap - MVP's user avatar
2 votes
Accepted

ngOfficeUIFabric or office-ui-fabric-react

ngOfficeUIFabric uses angular js directives to provide with ready made components. using Angular v1.x with TypeScript for building SharePoint Framework client-side web parts using ngOfficeUIFabric ...
mohd tahir's user avatar
  • 2,406
2 votes
Accepted

Office UI Fabric React Message Bar Icon not displaying

I was missing an import in my sass file. At the top of my file I added the import @import '~office-ui-fabric-core/dist/sass/Fabric.scss'
Cann0nF0dder's user avatar
  • 1,793
2 votes
Accepted

Office-UI-Fabric-react uncheck checbox

Fabio, I'm assuming that you're using Office UI Fabric Checkbox and DefaultButton for this answer -- let me know if you aren't. To solve this issue use the following steps: Make sure to add a state ...
Hugo Bernier's user avatar
  • 1,236
2 votes

Reuse Child Component Method to Parent Component Fabric React - SPFx

You are missing the 'static' keyword in your class definition. I have tried below in my test environment and it works superfine : export class PanelSmallRightExample2 { public static _string = "" ...
DvG's user avatar
  • 2,332
2 votes
Accepted

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

It was simple. Add a custom class in containerClassName property. So in the SCSS file use the below code .textDialog { max-width: 100%; width : 600px; max-height: 100%; height : ...
Ashik Paul's user avatar
2 votes

Can I use Fabric React in SharePoint 2013 without SPFX?

The Answer is YES, we can use Office UI fabric without SPFX. Fabric UI is just like a 3rd party library. You can create a simple React project and install the Office Fabric UI dependencies. npm i --...
DvG's user avatar
  • 2,332
2 votes
Accepted

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

It seems like you don't have correct config proxy url. Please try to set the proxy url by using the following command. It may help you to resolve the issue. npm config set https-proxy "full proxy url"...
Prakash's user avatar
  • 322
2 votes

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

You need to run npm install -g yo gulp to install yo and gulp from global first so that you can have yo and gulp command ready. Please reference Set up your SharePoint Framework development ...
Verona Chen's user avatar
2 votes

SPFX Office Fabric react ChoiceGroup does not render properly after SetState

Could you try this one and let me know if it works: import * as React from 'react'; import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup'; import { autobind } from '...
Thi Vo's user avatar
  • 364
2 votes
Accepted

Unable to open popup in spfx react

At the risk of being an unpopular response, I believe that you should try to use the Dialog control in Office UI Fabric. Office UI Fabric helps design web parts that are consistent with the rest of ...
Hugo Bernier's user avatar
  • 1,236
2 votes
Accepted

SPFX Tiles webpart

Kumar, I don't know if this will help, but I wrote a blog post on the Grid layout -- complete with code samples. It uses the DocumentCard to render the grid items. Take a look at: https://...
Hugo Bernier's user avatar
  • 1,236
2 votes
Accepted

Empty "URL" does not load SPFx web-part

Try using below line in your code: <DocumentCardImage height={150} imageFit={ImageFit.cover} imageSrc={items.ImageLink ? items.ImageLink["Url"] : ''} />
Ganesh Sanap - MVP's user avatar
2 votes
Accepted

Document card hover colour change

You can create a CSS class in your WebPartName.module.scss file in your web-part project like: /* Default background color for Document Card */ .documentCardStyle { background-color: green !...
Ganesh Sanap - MVP's user avatar
2 votes

SPFx webpart component set default color

I think, here you are passing the style as a prop property for the component. That's the reason color is not visible. Solution 1. Just pass the color-code form the master page. like <...
Palash Kanti Bachar's user avatar
2 votes
Accepted

Office UI Fabric verticle align middle not working

The following example code for your reference. <div className="ms-Grid" dir="ltr"> <div className="ms-Grid-row"> <div className="ms-Grid-col ms-sm6 ms-md4 ms-lg6"> ...
LZ_MSFT's user avatar
  • 6,219
2 votes

SharePoint Online Modern Page Layout Column Size

According to my research, there is currently no OOTB method to modify the height and width of the column. Here's a user voice that's been proposed: Allow changing the width of columns when adding ...
Binggo_ MSFT's user avatar
2 votes

open another teaching bubble on click of heading in Teaching bubble

@kumar, I copied the example in codepen and did some changes as below: const { DefaultButton, IButtonProps, TeachingBubble, Fabric, initializeIcons } = window.FluentUIReact; const { useBoolean } = ...
Baker_Kong's user avatar
  • 1,179
1 vote

Office UI Fabric not loaded with SharePoint 2016 | SPFx

Dan, Office UI Fabric quietly changed how it loads icons a while ago. By default, the Fabric icons are not added to your bundle, in order to save bytes for scenarios where you don't care about icons,...
Hugo Bernier's user avatar
  • 1,236

Only top scored, non community-wiki answers of a minimum length are eligible