{"id":6734,"date":"2017-12-15T00:00:00","date_gmt":"2017-12-15T08:00:00","guid":{"rendered":"http:\/\/officedevblogs.wpengine.com\/?p=158"},"modified":"2021-11-15T10:29:20","modified_gmt":"2021-11-15T18:29:20","slug":"reusable-controls-for-your-sharepoint-framework-solutions","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/reusable-controls-for-your-sharepoint-framework-solutions\/","title":{"rendered":"Reusable controls for your SharePoint Framework solutions"},"content":{"rendered":"<div id=\"body-content\">\n<p>The\u00a0usage of\u00a0<a href=\"http:\/\/aka.ms\/spfx\">SharePoint Framework<\/a> keeps on growing and while there are already great solutions build, we have noticed that a lot of developers try to achieve the same thing. Also, many developers asked us to open source the first party solutions to learn from the SharePoint engineering team and re-use some of the code.<\/p>\n<p>We want to announce the availability of two types of libraries that include reusable SharePoint Framework controls. This allows you to speed up your development process by not rewriting these components for every project.<\/p>\n<p>Today the following types of controls types are available:<\/p>\n<ul>\n<li>Property pane controls: <a href=\"https:\/\/github.com\/SharePoint\/sp-dev-fx-property-controls\/\">https:\/\/github.com\/SharePoint\/sp-dev-fx-property-controls\/<\/a><\/li>\n<li>React controls: <a href=\"https:\/\/github.com\/SharePoint\/sp-dev-fx-controls-react\/\">https:\/\/github.com\/SharePoint\/sp-dev-fx-controls-react\/<\/a><\/li>\n<\/ul>\n<p>The two projects are\u00a0coordinated by the\u00a0<a href=\"https:\/\/aka.ms\/sppnp\">SharePoint Patterns and Practices<\/a> initiative and are open to community contributions.<\/p>\n<h2>Property pane controls<\/h2>\n<p>The property pane controls project contains a set of reusable controls that can be used while configuring the web part. Like, for example, a term picker control which allows you to select terms from various term sets without writing a lot of code.<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2018\/05\/controls-blog-post-taxonomy-both.png\" alt=\"Taxonomy control\" width=\"491\" height=\"400\" \/><\/p>\n<p>The following controls are currently available:<\/p>\n<ul>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-property-controls\/controls\/PropertyFieldColorPicker\/\">PropertyFieldColorPicker<\/a>\u00a0&#8211; Property pane color picker<\/li>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-property-controls\/controls\/PropertyFieldDateTimePicker\/\">PropertyFieldDateTimePicker<\/a>\u00a0&#8211; Property pane date and time selector<\/li>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-property-controls\/controls\/PropertyFieldListPicker\/\">PropertyFieldListPicker<\/a>\u00a0&#8211; Property pane list selector<\/li>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-property-controls\/controls\/PropertyFieldPeoplePicker\/\">PropertyFieldPeoplePicker<\/a>\u00a0&#8211; Property pane people \/ group selector<\/li>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-property-controls\/controls\/PropertyFieldSpinButton\/\">PropertyFieldSpinButton<\/a>\u00a0&#8211; Property pane spin button<\/li>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-property-controls\/controls\/PropertyFieldTermPicker\/\">PropertyFieldTermPicker<\/a>\u00a0&#8211; Property pane managed metadata term selector<\/li>\n<\/ul>\n<p>The following controls are extended controls that show a callout next to the label<\/p>\n<ul>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-property-controls\/controls\/PropertyFieldDropdownWithCallout\/\">PropertyFieldDropdownWithCallout<\/a>\u00a0&#8211; Property drop-down field with callout<\/li>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-property-controls\/controls\/PropertyFieldTextWithCallout\/\">PropertyFieldTextWithCallout<\/a>\u00a0&#8211; Property text field with callout<\/li>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-property-controls\/controls\/PropertyFieldToggleWithCallout\/\">PropertyFieldToggleWithCallout<\/a>\u00a0&#8211; Property toggle field with callout<\/li>\n<\/ul>\n<p>If you want to get started with these controls, check out the getting started documentation for these controls: <a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-property-controls\/getting-started\/\">https:\/\/sharepoint.github.io\/sp-dev-fx-property-controls\/getting-started\/<\/a>.<\/p>\n<h2>React controls<\/h2>\n<p>The React controls library contains a set of reusable controls that can be used in your React driven components. For example, a list view control which allows you to render your arrays as SharePoint like list views which allows sorting, grouping and other typical capabilities.<\/p>\n<p><img decoding=\"async\" class=\"img-responsive\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2018\/05\/controls-blog-post-listview.png\" alt=\"List view control\" width=\"600\" height=\"238\" \/><\/p>\n<p>The following components are currently available:<\/p>\n<ul>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-controls-react\/controls\/FileTypeIcon\/\">FileTypeIcon<\/a>\u00a0&#8211; Component that shows the icon of a specified file path or application<\/li>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-controls-react\/controls\/ListView\/\">ListView<\/a>\u00a0&#8211; List view component<\/li>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-controls-react\/controls\/Placeholder\/\">Placeholder<\/a>\u00a0&#8211; Component that can be used to show an initial placeholder if the web part has to be configured<\/li>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-controls-react\/controls\/SiteBreadcrumb\/\">SiteBreadcrumb<\/a>\u00a0&#8211; Breadcrumb component<\/li>\n<li><a href=\"https:\/\/sharepoint.github.io\/sp-dev-fx-controls-react\/controls\/WebPartTitle\/\">WebPartTitle<\/a>\u00a0&#8211;\u00a0Title control for web parts in similar ways as many out-of-the-box web parts have<\/li>\n<\/ul>\n<h2>Share your ideas and how to contribute<\/h2>\n<p>The SharePoint Framework reusable controls is an open-source project driven by the SharePoint Patterns and Practices initiative. The projects are built and managed publicly on GitHub at\u00a0<a href=\"https:\/\/github.com\/SharePoint\/sp-dev-fx-controls-react\/\">https:\/\/github.com\/SharePoint\/sp-dev-fx-property-controls\/<\/a> and <a href=\"https:\/\/github.com\/SharePoint\/sp-dev-fx-controls-react\/\">https:\/\/github.com\/SharePoint\/sp-dev-fx-controls-react\/<\/a>. <strong>We accept community contributions<\/strong>. If you have ideas of controls you are currently missing, and want to see being added to the projects, please share these ideas via the appropriate project issue lists.\u00a0We will be harvesting\u00a0ideas and reusable patterns also from the out of the box code used by the out-of-the-box client-side web parts, so you will be seeing some familiar capabilities from those web parts in these controls.<\/p>\n<p>Let\u2019s make our lives easier by making these great controls together.<\/p>\n<p><span style=\"font-size: large\"><em>\u201cSharing is caring\u201d<\/em><\/span><\/p>\n<hr \/>\n<p><i><a href=\"https:\/\/twitter.com\/officedevpnp\">SharePoint PnP team<\/a>\u00a0\/ SharePoint Engineering &#8211; 15th of December 2017<\/i><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The\u00a0usage of\u00a0SharePoint Framework keeps on growing and while there are already great solutions build, we have noticed that a lot of developers try to achieve the same thing. Also, many developers asked us to open source the first party solutions to learn from the SharePoint engineering team and re-use some of the code.\u00a0<\/p>\n","protected":false},"author":69078,"featured_media":159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-6734","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sharepoint-framework"],"acf":[],"blog_post_summary":"<p>The\u00a0usage of\u00a0SharePoint Framework keeps on growing and while there are already great solutions build, we have noticed that a lot of developers try to achieve the same thing. Also, many developers asked us to open source the first party solutions to learn from the SharePoint engineering team and re-use some of the code.\u00a0<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69078"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=6734"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6734\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=6734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=6734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=6734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}