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) ...
- 31k
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='...
- 506
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 ...
- 56
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 ...
- 11.6k
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 ...
4
votes
Accepted
How to change dropdownItem color in office-ui-fabric-react?
Try using something like:
const dropdownStyles: Partial<IDropdownStyles> = {
dropdownItemSelected: { backgroundColor: "red" },
};
- 46.4k
4
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 ...
- 46.4k
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={...
- 527
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 ...
- 1,651
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.
...
- 2,416
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 ...
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 (...
- 46.4k
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 ...
- 2,416
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'
- 1,803
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 ...
- 1,246
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 = ""
...
- 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 : ...
- 293
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 --...
- 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"...
- 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 ...
- 78
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 '...
- 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 ...
- 1,246
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://...
- 1,246
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"] : ''} />
- 46.4k
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 !...
- 46.4k
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
<...
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">
...
- 6,249
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 ...
- 941
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 } = ...
- 1,189
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,...
- 1,246
Only top scored, non community-wiki answers of a minimum length are eligible