React Slider Field Customizer
The sample illustrates how to use Office UI Fabric React Slider in Field Customizer with permissions-base inline editing
Used SharePoint Framework Version
SPFx Extensions RC0
|react-slider-field-customizer||Alex Terentiev (Sharepointalist Inc., AJIXuMuK)|
|1.0||June 6, 2017||Initial release|
|1.1||August 30, 2017||Update to RC0|
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
This project contains SharePoint Framework extensions that illustrates next features:
- field customizer
- usage of Office UI Fabric React
- usage of PnP JS
- inline editing of list items (Users who have EditListItems permissions can edit value by dragging the slider)
NOTE: this customizer should be applied to a column with type Number. For the simplicity author assumes that the values of the column are between 0 and 100.
To use with Percentage column the code should be modified to multiply
value by 100
Building the code
git clone the repo npm i npm i -g gulp gulp
This package produces the following:
- lib/* - intermediate-stage commonjs build artifacts
- dist/* - the bundled script, along with other resources
- deploy/* - all resources which should be uploaded to a CDN.
Debug URL for testing
Here's a debug URL for testing around this sample. Notice that this sample is designed to be used with Number field type. In below debug URL sample we define the field internal name as Percent. Slider in this case is designed to show values between 0 and 100.