-
Notifications
You must be signed in to change notification settings - Fork 57
Home
Note: The SharePoint Framework is currently in preview and is subject to change. SharePoint Framework client-side web parts are not currently supported for use in production enviornments.
This library is a kit of 23+ components to customize SPFx web parts custom fields, to make the optimal experience to edit your Web Parts.
This kit includes Web Part property fields as PropertyFieldDatePicker, PropertyFieldDateTimePicker, PropertyFieldPicturePicker, PropertyFieldDocumentPicker,PropertyFieldPeoplePicker, PropertyFieldColorPicker, PropertyFieldFontPicker, PropertyFieldFontSizePicker, PropertyFieldIconPicker, PropertyFieldSliderRange, PropertyFieldRichTextBox, PropertyFieldDisplayMode, PropertyFieldAlignPicker, PropertyFieldCustomList, PropertyFieldSPListPicker, PropertyFieldSPListMultiplePicker, PropertyFieldSPListQuery, PropertyFieldSPFolderPicker, PropertyFieldPhoneNumber, PropertyFieldMaskedInput, PropertyFieldDropDownSelect, PropertyFieldMapPicker. These controls are based on the Office UI Fabric framework and React. You can use these custom fields to your own client side Web Parts.
Now available in more than 16 languages as: English, French, Arabic, German, Chinese, Danish, Spanish, Finnish, Hindi, Italian, Japanese, Norwegian, Dutch, Portuguese, Russian, Swedish.
Current stable version: 1.0.8 - Release note
Current SPFx Drop support - RC0
To install this library is your project, open a command line and execute this command in your WebPart's folder:
npm i --save sp-client-custom-fields
Open your file 'config/config.json'
, and add the following lines in the externals and in the localizedResources sections:
"externals": {
"sp-client-custom-fields": "node_modules/sp-client-custom-fields/dist/sp-client-custom-fields.bundle.js"
}
"localizedResources": {
"sp-client-custom-fields/strings": "../node_modules/sp-client-custom-fields/lib/loc/{locale}.js"
}
Execute gulp in the command line
gulp
You are now ready to use a custom property field in your web part! It's really easy to add a custom property field in your project, you can read any property documentation bellow to view how to do that. More information
You can use these custom fields to your own client side web parts. You can find bellow the list of all these custom fields and you can click on the custom field name to consult the documentation.
Custom Field | Description | Overview |
---|---|---|
PropertyFieldColorPicker | Custom field to select a Color with a visual RGB editor based on the Office UI Fabric ColorPicker control | |
PropertyFieldFontPicker | Custom field to select a Font with a visual dropdown box and fonts preview | |
PropertyFieldFontSizePicker | Custom field to select a Font size with size preview as drop down | |
PropertyFieldAlignPicker | Custom field to select an alignement (left, center or right) | |
PropertyFieldIconPicker | Custom field to select an Icon style in the Office UI Fabric icons list | |
PropertyFieldDisplayMode | Custom field to select a list display mode (list or tiles) |
Custom Field | Description | Overview |
---|---|---|
PropertyFieldDatePicker | Custom field to select a Date with a mini-calendar based on the Office UI Fabric DatePicker control | |
PropertyFieldDateTimePicker | Custom field to select a Date Time with a mini-calendar based on the Office UI Fabric DatePicker control | |
PropertyFieldSliderRange | Custom field to select a range of numbers with a 2 levels slider | |
PropertyFieldRichTextBox | Custom field to insert a rich text area to generate html with WYSIWYG | |
PropertyFieldDropDownSelect | Custom field to select multiple values in a dropdown with checkbox | |
PropertyFieldPassword | Custom field to select a password. | |
PropertyFieldPhoneNumber | Custom field to select a phone number with a masked control based on phone numbers international formats. | |
PropertyFieldMaskedInput | Custom field to add a text input with a specified masked based on regexp. | |
PropertyFieldMapPicker | Custom field to add a gps localisation with map preview. |
Custom Field | Description | Overview |
---|---|---|
PropertyFieldPeoplePicker | Custom field to select users from the SharePoint users database with a search field. Start to enter a lastname or a firstname, and pick a user | |
PropertyFieldPicturePicker | Custom field to select a picture thanks to a SharePoint visual browser | |
PropertyFieldDocumentPicker | Custom field to select a document (docx, pptx, pdf, etc.) thanks to a SharePoint visual browser. | |
PropertyFieldCustomList | Custom field to select a collection of data with forms as an object property of your web part | |
PropertyFieldSPListPicker | Custom field to select a list from the current SharePoint web site. | |
PropertyFieldSPListMultiplePicker | Custom field to select multiple lists from the current SharePoint web site. | |
PropertyFieldSPListQuery | Custom field to query parameters and to get a REST web url to get items. | |
PropertyFieldSPFolderPicker | Custom field to select a folder from the current SharePoint web site. |
Copyright (c) 2016 Olivier Carpentier
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.