Podcast #128: We chat with Kent C Dodds about why he loves React and discuss what life was like in the dark days before Git. Listen now.
5

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='Project Complexity' options={[ {key: '1', text: 'Well Mastered Routine'}, {key: '3', text: 'Many similar projects done before'}...


4

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 end, there's no error.


4

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 http function, you can init options in componentDidMount: public async componentDidMount(): Promise<void> { this.categories = await SpService....


3

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={pickUpDate => { this.setState({ pickUpDate }); }} firstDayOfWeek={DayOfWeek.Monday} />


3

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) setting external image icon (which you are already using) 2) Use base-64 encoded image You create your own image or download the fabric UI image(s) and ...


3

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 id='button1' ariaLabel='Button1' description='First button description' onClick={ () => this._RequestButton('Button 1')}>Button 1</CompoundButton> ...


3

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. But with Typescript we are able to use ES6(which is compiled to ES5 at runtime). Using PnP-JS Core with Typescript, we have not only saved a lot of time( by ...


3

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 have any luck getting the default selected items to work unless I had the value the first time the component was rendered. If I passed a default and then based ...


2

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 for styling Angular v1.x client-side web parts including Angular and ngOfficeUIFabric in the web part bundle Whereas office-ui-fabric-react uses react js ...


2

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'


2

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 variable to your state definition. Example: export interface IExampleState { isChecked: boolean; } Initialize your state in your constructor to a ...


2

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 'office-ui-fabric-react/lib/Utilities'; import styles from './ProjectSizingTool.module.scss'; import { IProjectSizingToolProps } from './IProjectSizingToolProps'...


2

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 --save office-ui-fabric-react react react-dom redux redux-thunk react-redux Do check out this blog Using Office Fabric UI. Also, have a look onto the Part1 for ...


2

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 = "" public static _onShowPanel1() { alert("other"); }; } and using them in another web part TS file as: import {PanelSmallRightExample2} from './...


2

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 Office 365 (and most of Microsoft), which means your web parts look good -- no matter what theme your site uses. You can find out how to use it at: https://...


2

Try using below line in your code: <DocumentCardImage height={150} imageFit={ImageFit.cover} imageSrc={items.ImageLink ? items.ImageLink["Url"] : ''} />


2

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 !important; } /* Background color for Document Card on Hover */ .documentCardStyle:hover { background-color: yellow !important; } Then use this class in your ...


1

Khadi, I've been meaning to create an accordion control for SPFx web parts, so I took this opportunity to build one in response to your question -- I hope you won't mind. Take a look at the sample at https://github.com/hugoabernier/AccordionWebPart It creates an accordion which is designed to look like the accordion used in Microsoft sites: From the code ...


1

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://tahoeninjas.blog/2019/07/28/sharepoint-framework-design-series-layout-patterns-i/ And if there is something that you're looking for that isn't in the post, let me know ...


1

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, or you only care about a subset. To make them available, you may initialize by adding the following to your code before you need an icon: import { ...


1

You could leverage lodash debounce and wrap your method's body as the debounce parameter (callback)


1

Just adding undefined to property 'var_Passport' solved my issue. export interface IVariables { var_JobTitle:string | undefined; var_JobDescription:string | undefined; var_Technology: { key: string | string | undefined }; var_Salary:string | undefined; var_Age:string | undefined; var_JoiningDate:Date; var_Location:{ key: string | number | ...


1

The onChange methods first parameter is of type React.FormEvent and the second parameter is of type boolean. Go to this link and check out the first example code: https://developer.microsoft.com/en-us/fabric#/components/checkbox Change your code to this (haven't tested it): private _onPassportCheckboxChange = (item: React.FormEvent<HTMLElement>, ...


1

Try something like this, i am not an spfx man :D : You can also check, if the ItemName is not empty, cause in the first case it is, this is reason why you have only button, not text: {this.state.items.map(myitems1 => { if(myitems1.Item_x0020_Name != "") { return ( <div key={myitems1.Id}> <span>{myitems1....


1

I did simple test in my online environment while can't reproduce. I think this related to CSS, you'd better use developer tool to debug/compare the CSS difference.


1

Addd disabledPP class to your people picker you want to hide (X) and use below CSS: .disabledPP { font-family: inherit; } .disabledPP > div > div > div, .disabledPP > div > div > div:hover { border-color: #f4f4f4 !important; } .disabledPP button { pointer-events: none !important; display: none; }


1

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 : 600px; } In tsx file use the below code <Dialog hidden={this.state.hideDialog} onDismiss={this._closeDialog} type={DialogType.normal} ...


1

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" npm config set proxy "same url" npm config set strict-ssl false To check the current config list use the below command. npm config list


1

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 environment for detail


1

The User Profile Service doesn't provide information about a user's presence. SharePoint, or Delve for that matter, doesn't keep track of a user's presence so it cannot give you that information. You should probably hook up to the communication system your company's using, like Skype for Business or MS Teams. An example implementation of how to connect to ...


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