Questions tagged [office-ui-fabric-react]

Office UI Fabric React is the official open-source React front-end framework designed to build experiences that fit seamlessly into a broad range of Microsoft products. Use this tag when your question is specifically around the ReactJS usage of the Office UI Fabric.

Filter by
Sorted by
Tagged with
3
votes
1answer
2k 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
1answer
21 views

Get selected value of fabric dropdown

I want to get value of selected dropdown in my Visacontact() function, below is my code: <Fabric className={styles.matrix2}> <VirtualizedComboBox styles={comboBoxStyles} ...
1
vote
1answer
35 views

SharePoint css classes reference

Please help me with reference link, where I can get all SharePoint CSS class name in fluent UI. Example: sp-field-severity--low
0
votes
1answer
1k 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 ...
2
votes
1answer
56 views

SPFX Webpart width shrinked after published in Modern Page - SharePoint Online

Developing SPFX app, where everything looks good(I mean the width) in edit mode, soon after publish the webpart width is getting reduced somehow. Using Fabric UI CSS .propertyDigitalManagementWebpart ...
0
votes
1answer
71 views

how to use Fluent UI HoverCard in SPFX Webpart

In my current project there's requirement to show more details when hovering on a read more HTML span, where specified functionality is to show Fluent UI HoverCard with all the details, I am trying to ...
0
votes
1answer
62 views

How to enable promoted results in modern pnp search app search result

How to enable promoted results in modern pnp search app search results? MS Search showing the promoted results are first.
1
vote
1answer
216 views

open another teaching bubble on click of heading in Teaching bubble

First Teaching bubble as per your example import * as React from 'react'; import { MouseEvent } from 'react'; import { DefaultButton, IButtonProps } from 'office-ui-fabric-...
0
votes
1answer
30 views

Display count/number on icon in SPFX Extensions

I have a requirement to display the count (actually, the count of active notifications) on the icon in SPFX extensions. I have the count. I am using React UI Fabric Icon control. Is there any property ...
1
vote
1answer
820 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
74 views

Typeerror : failed to fetch in pnpjs in Sharepoint SPFx webpart

I have written below code in SPFx Webpart to upload file to Sharepoint Library. It gives me error sometimes like TypeError : Failed to fetch. Can anyone give me some idea what this error signifies and ...
3
votes
2answers
2k 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
0answers
61 views

pass data from component to Teaching Bubble headlines

I am trying to pass data for headline from my .tsx file to teaching bubble headline which is another but getting below error import * as React from 'react'; import { ...
0
votes
2answers
35 views

Headline for teaching Bubble

Trying to show HTML data to teaching bubble headline but getting below error. Any idea how can I resolve it?
0
votes
0answers
55 views

Change date and time entered by user to different timezone in React Sharepoint SPFx

I am trying to change date entered by user to different timezone. Right now it only for default value. But I want to change the date which will be entered by user in React Sharepoint Framework SPFx &...
0
votes
1answer
25 views

How to set dropdown value from query string in fabric dropdown

i am trying to set value in dropdown from query string but unable to do so , below is the code private SelectReferralFromQueryString(name) { name = this.GetParameterValues('Country'); if (name ...
1
vote
1answer
46 views

SharePoint Online Workbench layout much different from deployed .sppkg webpart - Using React

I'm using SPFx/React to create a simple custom form. Using Fluent UI grid, controls, etc. and it looks fine in the dev workbench area, but as soon as it's deployed the layout is completely ignored. I ...
0
votes
2answers
3k 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
103 views

Bind Detailed List on selection of Dropdown SPFX

I had created a SPFX webpart which bind data in Detailed list and one more component is there which is dropdown . I am unable to bind Detailed List on change of Dropdown , below is my full code , now ...
0
votes
0answers
21 views

getting document from Sharepoint Document library

Can anyone guide me to how to get document from Sharepoint Library using rest api in Spfx ,tried using below code to bind static data in Detailed List ,but unable to get rest api call ? ...
0
votes
1answer
176 views

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

I am new to SPFX and office-ui-fabric-react. I have a dropdownlist with below code and attributes: <Stack tokens={stackTokens}> <Dropdown placeholder="Select an option" label=&...
1
vote
1answer
402 views

Icon missing and access to XMLHttpRequest at officeapps url got CORS error

I am developing a SPFX extension. While I am debug it at my SP online site using debug script, I found the icons are not showing up. Those icon are <i className="ms-Icon ms-Icon--PageEdit &...
0
votes
1answer
58 views

object Object error in SPfx

Trying below code to read Site column but getting value as [object Object] OnClick Function: onClick={()=>{this.Funnel(items.SiteColumn)}} Complete function code: public render(): ...
1
vote
0answers
265 views

Sticky Header in SPFx webpart

I have a SPFx webpart where I am using "DetailsList" to bind search data, I want to make header sticky while person scrolls the webpart, I have a search bar then dropdown and then grid in ...
3
votes
1answer
2k 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
0answers
36 views

Updating a Dropdown when it is rendered inside DetailsList

I am rendering some Dropdown elements inside two of the columns in the DetailsList element. The items of the DetailsList are dependant on an previous selection which updates the items displayed in the ...
0
votes
0answers
23 views

Issue while searching folder with specific name

I am facing an issue while retrieving the folder available in a list based on userId. Using the below code to fetch the folder using Name and the “response” returned is most the times “not available” ...
0
votes
1answer
182 views

UI Fabric TextField in spfx for SP2019 - overwrite css

Has anyone got known a technique/trick for overriding css style of the Office UI Fabric's component related to Spfx 1.4.0 (for the SP2019)? More specifically I would like to update TextField red ...
0
votes
1answer
2k 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
163 views

Fetch multiple images from SharePoint library and display images in SPFX webpart

SharePoint Library -- Multiple image and HexID field I am able to display one image by giving full URL of images but i have to filter the images based on HexID, But I am not sure how to apply filter, ...
0
votes
1answer
185 views

React.js: avoid delay on element <input type=“file”> onChange event

Any react-specific solution to the problem, described here? https://stackoverflow.com/questions/46072489/how-to-avoid-delay-on-element-input-type-file-onchange-event?noredirect=1&lq=1 Basically ...
2
votes
1answer
226 views

React Props in main component, change to state on change dropdown

I have a main component that is calling a list. I am passing this item to one of the components prop which is the value of a dropdown. For me to be able to setstate, I assigned the prop to state ...
1
vote
1answer
435 views

Open image in new tab in spfx webpart

I want to open image in new tab if some one click on legend "Click here". <p className="legends"><FieldUrlRenderer text={'Click here'} url={imageList.Image ? imageList.Image["Url"] :''} ...
0
votes
2answers
515 views

SPFX - calling async function - Missing properties

I'm trying to create a modern webpart that connects to MSGraphClient using the UI Fabric, to create quick access to files. I'm getting the follow error calling an async function with _allItems (...
0
votes
1answer
440 views

SPFX Webpart - BaseWebPart.properties Error

I'm new to SPFX / React Development, So I thought I'd start with a simple project! I want to add a Resource Quick Access webpart on my Modern Sharepoint Page where users can quickly access SharePoint/...
2
votes
1answer
903 views

SharePoint Online Modern Page Layout Column Size

I am trying to make three column page layout and I want middle column to be bigger than other two. How it is possible. Do we have to add anything into spfx web part or is there other way !!
0
votes
2answers
198 views

PnP SPFx Controls not rendering responsive

I have created one static web part using react carousal but it is not working as responsive. Please guide me if I am missing anything import { Carousel, CarouselButtonsDisplay, ...
1
vote
1answer
544 views

Office UI Fabric verticle align middle not working

I am trying to make my image vertically aligned in middle using CSS which is not working in Office UI Fabric. My HTML Code: <div class="ms-Grid" dir="ltr"> <div class="ms-Grid-row"> ...
2
votes
0answers
259 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
124 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
108 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 (...
0
votes
1answer
191 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
128 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
259 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
103 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
231 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: [ ...
1
vote
3answers
283 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
84 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
356 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
1answer
1k 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 ...