Questions tagged [office-fabric]

79 questions
4
votes
3 answers

How to set ErrorMessage on TextField dynamically on Button onClick method

I need to bind ErrorMessage to textfield only when user press button. In this there are nice examples how to use errormessage but the problem is that I don't know how to make append errorMeesage after user click
user1223484
  • 175
  • 2
  • 12
4
votes
1 answer

Office UI Fabric - How to apply css styles to existing components

I'm using the provided components and every time I need to change a component style I wonder what's the proper way to do it. Lets say I need to change the IconButton background color when it's disabled. https://codepen.io/elsl/pen/KrQQdV If I…
Eduardo
  • 73
  • 1
  • 4
4
votes
1 answer

Using Office UI Fabric (without react and angular?)

I'm working on a simple add-in for Word Online (created using the Visual C# \ Office/Sharepoint \ Web Add-ins \ Word Add-in template in Visual Studio), and need to show a simple input-form. The add-in web-content is based on a C# MVC web application…
Gertsen
  • 1,078
  • 20
  • 36
4
votes
1 answer

Changing the color of Office UI Fabric React components

I am making an Office Fabric Panel in an React app, that is used as a form to create, update and delete an entity. The thing is that on the delete-panel I want the primary button to be red instead of Fabric's standard blue. If it is possible, I am…
Kikkomann
  • 386
  • 5
  • 20
4
votes
1 answer

How to focus a button in a details list using React and Office Fabric

Anyone have suggestions on how to focus a button in react DetailsList? Refs seem like the way to go, and I'd like to do something like this: findDOMNode(this.refs.mybutton).focus() But I haven't been able to get a ref…
Lars
  • 9,976
  • 4
  • 34
  • 40
3
votes
0 answers

Fluent UI Detail List - I want to include the contextual menu in column headers for sorting and filtering

I am using Fluent UI DetailsList. I want a functionality to sort and filtering to choose when column header is clicked in the detailList. Filtering would be like, when Clicking on filter by it should ask for filtering as per below image Sorting…
Shivam
  • 31
  • 2
3
votes
0 answers

Passing functions to child components

I'm creating a simple SPFX extension to manage a task list. I have created a list which gets items via REST through pnpjs. I want to be able to delete said items by clicking on a button. When I click the delete button, a modal (WarningModal) opens,…
eralardz
  • 31
  • 2
3
votes
1 answer

@fluentui/react DetailsList with the Column headers always Showing

Any way I can make the Column headers of my @fluentui/react "DetailsList" always show at the top when scrolling down? Is there another @fluentui/react that does it? Thank you
Ofer Gal
  • 707
  • 1
  • 10
  • 32
3
votes
2 answers

How we can close the error messagebar of office react fabric component?

I am trying to use fabric react messageBar component in my application but i am not able to close(dismiss) the message section even i clicked on close icon in the messageBar component. Please find the below code for reference. import React from…
Nagaraju
  • 113
  • 1
  • 7
3
votes
0 answers

Am I able to use Office UI Fabric in a React-Native application?

I've tried adding Microsoft's Office UI Fabric framework to my React-Native project. However, whenever I do this, I am no longer able to run my emulator through Android Studio. Is Fabric not supported in React-Native? Installed Fabric through…
Bethany
  • 1,003
  • 5
  • 12
  • 18
2
votes
1 answer

excel add ins | on manifest loading showing error on desktop excel

I have created excel add-ins using office.js and react-fabric UI. I have created manifest and validated using command: npx --ignore-existing office-addin-manifest validate manifest.xml And it looks good with no issue. When I am uploading manifest in…
sagar
  • 464
  • 4
  • 13
2
votes
1 answer

Fluent UI Reading the height of DetailsList's ViewPort

I'm using DetalisList within ScrollablePane component to keep the header in view, and let the rows scrollable. However, this requires me to manually set the height of the scrollable container. div.scrollable-container ScrollablePane …
CookieEater
  • 2,237
  • 3
  • 29
  • 54
2
votes
0 answers

Office.js | Desktop excel | restrict user to interact with excel or add-ins pane if dialog is open

I am using office.js to create excel add-ins. I do have requirement to open dialog box from task pane and show task pane content in to the dialog box. To show task pane content on dialog box using client side routing. Using below code we are able to…
2
votes
1 answer

How do you apply a style to icon of type IIconProps in Fluid UI?

I have button like the sample below with an icon (addFriendIcon). https://developer.microsoft.com/en-us/fluentui#/controls/web/button How do I add a style to this icon? For example change the color? import * as React from 'react'; import {…
2
votes
2 answers

Fluent UI DetailsList - Is there a way to add filters to each column

I am using Fluent UI DetailsList. My table looks like below: I need filters below every column (text or drop-down) as shown below: Please let me know if this is possible? Or maybe a way to display custom header (using html) ?
harshal gite
  • 123
  • 1
  • 1
  • 6
1
2 3 4 5 6