SharePoint Field Conntrols for usin in SPFX react component

%3CLINGO-SUB%20id%3D%22lingo-sub-36090%22%20slang%3D%22en-US%22%3ESharePoint%20Field%20Conntrols%20for%20usin%20in%20SPFX%20react%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-36090%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20working%20on%20a%20smaple%20SPFX%20webpart%20that%20well%20let%20users%20edit%20some%20data%20in%20a%20sharepoint%20list.%20How%20can%20I%20reuse%20the%20controls%20used%20my%20Sharepoint%20Online.%20like%20the%20datepicker%2C%20the%20dropdown%20select%2C%20etc.%3C%2FP%3E%3CP%3EThnaks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-64134%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Field%20Conntrols%20for%20usin%20in%20SPFX%20react%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-64134%22%20slang%3D%22en-US%22%3E%3CP%3Ealso%20%26nbsp%3Bwe%20should%20have%20access%20to%20the%20rich%20text%20editor.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-59153%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Field%20Conntrols%20for%20usin%20in%20SPFX%20react%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-59153%22%20slang%3D%22en-US%22%3EI%20would%20like%20to%20be%20able%20to%20re-use%20the%20people%20picker%20and%20taxonomy%20picker%20used%20in%20modern%20lists%20in%20my%20SPFx%20UI%20without%20having%20to%20code%20it%20myself.%20You%20already%20have%20field%20renderers%20for%20all%20SP%20types%2C%20and%20being%20able%20to%20re-use%20those%20would%20be%20great.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-46756%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Field%20Conntrols%20for%20usin%20in%20SPFX%20react%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-46756%22%20slang%3D%22en-US%22%3E%3CP%3EI%20agree%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F8901%22%20target%3D%22_blank%22%3E%40Russell%20Gove%3C%2FA%3E.%20%26nbsp%3BI%20was%20able%20to%20look%20at%20OlivierCC's%20PropertyField%20repository%2C%20and%20decipher%20what%20he's%20doing%20against%20the%20root%20webpart%3A%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FOlivierCC%2Fsp-client-custom-fields%2Fblob%2Fmaster%2Fsrc%2FPropertyFieldPeoplePicker.ts%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3EOlivierCC's%20PeoplePicker%20Service%3C%2FA%3E%26nbsp%3Bbut%20looking%20at%20leveraging%20the%20SPHttpClient%20of%20the%20Webpart%20root%20object%20in%20a%20component%20view%20of%20a%20React%20app%20project%2C%20is%20where%20I'm%20having%20some%20confusion%2C%20and%20guidence%20would%20be%20great.%20But%20that%20is%20also%20because%20this%20is%20the%20first%20time%20I'm%20using%20React%20too%2C%20and%20my%20Angular%20brain%20is%20probably%20trying%20to%20over-complicate%20it.%20%3AD%3C%2Fimg%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAnyways%2C%20thanks.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-45608%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Field%20Conntrols%20for%20usin%20in%20SPFX%20react%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-45608%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3CBR%20%2F%3EI%20think%20what%20we%20really%20need%20is%20some%20goidance%20on%20how%20to%20use%20the%20office-ui-fabric-react%20components%20in%20a%20way%20that%20is%20consistent%20with%20the%20way%20sharepoint%20uses%20them.%3C%2FP%3E%3CP%3EHow%20do%20we%20add%20a%20time%20control%20to%20the%20date-picker%3F%3CBR%20%2F%3EHow%20do%20we%20make%20a%20panel%20open%20when%20user%20selects%20an%20item%20in%20a%20Details%20list.%3CBR%20%2F%3EHow%20do%20we%20add%20the%20ellipses%20to%20a%20DetailsList%20and%20make%20it%20open%20a%20context%20menu%3CBR%20%2F%3EHow%20do%20we%20make%20a%20DetailsList%20display%20like%20the%20QuickEdit%20view(if%20thats%20what%20quickedit%20uses).%3CBR%20%2F%3EHow%20do%20we%20populate%20a%20PeoplePicker%20from%20sharepoint.%3C%2FP%3E%3CP%3EI%20think%20a%26nbsp%3B%20document%20(or%20a%20webcast)%20on%20how%20the%20SharePoint%20team%20uses%20Office%20Ui%20Fabric%20would%20be%20awesome!%3C%2FP%3E%3CP%3EThanks%2C%3CBR%20%2F%3ERussell%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-45370%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Field%20Conntrols%20for%20usin%20in%20SPFX%20react%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-45370%22%20slang%3D%22en-US%22%3EAnd%20one%20other%20thing....%20When%20we%20generate%20a%20react%20project%20from%20yeoman%2C%20the%20generated%20webpart%20ought%20to%20be%20using%20office-ui-fabric-react%20controls%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-45366%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Field%20Conntrols%20for%20usin%20in%20SPFX%20react%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-45366%22%20slang%3D%22en-US%22%3EHi%20Chaks%2C%3CBR%20%2F%3EI'm%20looking%20for%20controls%20to%20use%20in%20the%20webpart%20UX%2C%20I've%20been%20using%20the%20Office-ui-fabric-react%20controls.They%20work%20well%20for%20the%20most%20part.%20But%20it%20looks%20like%20the%20sharepoint%20team%20has%20enhanced%20some%20of%20them.%20For%20example%20the%20SharePoiint%20Date%20Picker%20has%20a%20time%20selector%2C%20Office%20Ui%20Fabric%20datepicker%20does%20not.%20I%20don't%20know%20what%20other%20controls%20have%20similar%20'enhancements'--%20maybe%20peoplepicker.%3CBR%20%2F%3E%3CBR%20%2F%3EAnd%20then%20theirs%20the%20quickedit%20view.%20I%20ended%20up%20writing%20my%20own%20grid%20to%20let%20users%20edit%20items%20from%20multiple%20lists%20in%20a%20grid%2C%20It%20would%20be%20nice%20if%20I%20could%20reuse%20whatever%20grid%20control%20is%20used%20by%20quickedit.%3CBR%20%2F%3E%3CBR%20%2F%3ERussell%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-45301%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Field%20Conntrols%20for%20usin%20in%20SPFX%20react%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-45301%22%20slang%3D%22en-US%22%3E%3CP%3EAre%20you%20specifically%20asking%20in%20the%20property%20pane%20or%20within%20the%20web%20part%20UX%3F%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFor%20property%20pane%2C%20we%20already%20have%20a%20series%20of%20controls%20in%20the%20road%20map.%20For%20web%20part%20UX%2C%20you%20can%20import%20the%20Fabric%20components%20and%20load%20your%20data%20based%20on%20your%20business%20logic%20in%20the%20web%20part.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThat%20said%2C%20please%20submit%20your%20suggestion%20to%20the%20%3CA%20title%3D%22SPFx%20uservoice%22%20href%3D%22https%3A%2F%2Faka.ms%2Fspfx-uservoice%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3ESPFx%20uservoice%3C%2FA%3Eas%20well.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThanks%2C%3C%2FP%3E%0A%3CP%3EChaks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-45171%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Field%20Conntrols%20for%20usin%20in%20SPFX%20react%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-45171%22%20slang%3D%22en-US%22%3E%3CP%3Ehi%2C%2C%3C%2FP%3E%3CP%3Ethe%2Conly%20'answer'%20i%20found%20is%20that%20they%20are%20thinking%20of%20open%20sourcing%20some%20of%20the%20code%20after%20they%20go%20live.%20%26nbsp%3Bit's%20kind%20of%20ridiculous%20that%20you%2Cme%2C%20%26nbsp%3Band%20everyone%20else%2C%20would%20need%20to%20implement%20their%20%26nbsp%3Bown%20peoplepicker.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ewe%20should%20start%20a%20uservoice%20on%20this%20after%20spfx%20gets%20released.%3C%2FP%3E%3CP%3Erussell%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-45122%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Field%20Conntrols%20for%20usin%20in%20SPFX%20react%20component%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-45122%22%20slang%3D%22en-US%22%3E%3CP%3EDid%20you%20ever%20find%20any%20answers%20on%20this%3F%20I'm%20namely%20looking%20for%20a%20peoplepicker%20control%20using%20the%20Office-UI-Fabric-React%20components%20but%20am%20not%20quite%20getting%20it%20to%20load%20anything.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Frequent Contributor

Hi, 

I'm working on a smaple SPFX webpart that well let users edit some data in a sharepoint list. How can I reuse the controls used my Sharepoint Online. like the datepicker, the dropdown select, etc.

Thnaks

9 Replies
Highlighted

Did you ever find any answers on this? I'm namely looking for a peoplepicker control using the Office-UI-Fabric-React components but am not quite getting it to load anything. 

Highlighted

hi,,

the,only 'answer' i found is that they are thinking of open sourcing some of the code after they go live.  it's kind of ridiculous that you,me,  and everyone else, would need to implement their  own peoplepicker.

 

we should start a uservoice on this after spfx gets released.

russell

Highlighted

Are you specifically asking in the property pane or within the web part UX?

 

For property pane, we already have a series of controls in the road map. For web part UX, you can import the Fabric components and load your data based on your business logic in the web part. 

 

That said, please submit your suggestion to the SPFx uservoice as well.

 

Thanks,

Chaks

Highlighted
Hi Chaks,
I'm looking for controls to use in the webpart UX, I've been using the Office-ui-fabric-react controls.They work well for the most part. But it looks like the sharepoint team has enhanced some of them. For example the SharePoiint Date Picker has a time selector, Office Ui Fabric datepicker does not. I don't know what other controls have similar 'enhancements'-- maybe peoplepicker.

And then theirs the quickedit view. I ended up writing my own grid to let users edit items from multiple lists in a grid, It would be nice if I could reuse whatever grid control is used by quickedit.

Russell

Highlighted
And one other thing.... When we generate a react project from yeoman, the generated webpart ought to be using office-ui-fabric-react controls
Highlighted

Hi,
I think what we really need is some goidance on how to use the office-ui-fabric-react components in a way that is consistent with the way sharepoint uses them.

How do we add a time control to the date-picker?
How do we make a panel open when user selects an item in a Details list.
How do we add the ellipses to a DetailsList and make it open a context menu
How do we make a DetailsList display like the QuickEdit view(if thats what quickedit uses).
How do we populate a PeoplePicker from sharepoint.

I think a  document (or a webcast) on how the SharePoint team uses Office Ui Fabric would be awesome!

Thanks,
Russell

Highlighted

I agree @Russell Gove.  I was able to look at OlivierCC's PropertyField repository, and decipher what he's doing against the root webpart: OlivierCC's PeoplePicker Service but looking at leveraging the SPHttpClient of the Webpart root object in a component view of a React app project, is where I'm having some confusion, and guidence would be great. But that is also because this is the first time I'm using React too, and my Angular brain is probably trying to over-complicate it. :D 

 

Anyways, thanks. 

Highlighted
I would like to be able to re-use the people picker and taxonomy picker used in modern lists in my SPFx UI without having to code it myself. You already have field renderers for all SP types, and being able to re-use those would be great.
Highlighted

also  we should have access to the rich text editor.