sp-dev-fx-webparts/samples/react-list-form
Hugo Bernier 7ed51a0838 Updated sample JSON 2021-03-15 03:48:14 -04:00
..
.vscode Add support for User and taxonomy fields 2020-09-12 20:44:43 -07:00
assets Updated sample JSON 2021-03-15 03:48:14 -04:00
config Added version history and solution version 2021-02-23 00:04:54 -05:00
src Updated regex in default tax values 2021-02-22 09:51:23 +01:00
typings spfx base updated to 1.6.0 (#674) 2018-11-12 10:48:51 +02:00
.editorconfig New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
.gitignore New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
.yo-rc.json #1354 issue fix and package update to spfx version 1.10.0 2020-07-06 19:34:30 +05:30
LICENSE spfx base updated to 1.6.0 (#674) 2018-11-12 10:48:51 +02:00
README.md Added version history and solution version 2021-02-23 00:04:54 -05:00
gulpfile.js spfx base updated to 1.6.0 (#674) 2018-11-12 10:48:51 +02:00
npm-shrinkwrap.json Added version history and solution version 2021-02-23 00:04:54 -05:00
package-lock.json updated react-list-form to SPFx 1.7.1, Added RichText Mode and Tinymce Editor (#791) 2019-03-10 18:20:18 +02:00
package.json Added version history and solution version 2021-02-23 00:04:54 -05:00
tsconfig.json #1354 issue fix and package update to spfx version 1.10.0 2020-07-06 19:34:30 +05:30
tslint.json updated react-list-form to SPFx 1.7.1, Added RichText Mode and Tinymce Editor (#791) 2019-03-10 18:20:18 +02:00

README.md

page_type products languages extensions
sample
office-sp
javascript
typescript
contentType technologies platforms createdDate
samples
SharePoint Framework
react
12/1/2017 12:00:00 AM

List Form

Summary

The List Form web part is a web part for adding a list form to any page. It provides a working example of implementing generic SharePoint list forms using the SharePoint Framework (SPFx) and the React and Office UI Fabric libraries.

The web part allows configuring which list to use and if a form for adding a new item, editing or displaying an existing item should be shown. When selecting display or edit form the ID can be defined either as a fixed number or as a query string parameter name. The form fields can be added, ordered using drag-and-drop or removed visually in the web part. A URL including placeholder for the ID can be provided to redirect to after successfully saving the form.

Demo

Used SharePoint Framework Version

Compatibility

SPFx 1.10 Node.js LTS 8.x | LTS 10.x SharePoint Online Teams N/A: Untested with Microsoft Teams Workbench Hosted: Does not work with local workbench

Applies to

Solution

Solution Author(s)
react-list-form Dany Wyss
react-list-form Harsha Vardhini (@harshagracy)
react-list-form Ryan Schouten (@shrpntknight)
react-list-form Abderahman Moujahid
react-list-form Kman1131
react-list-form Fredrik Thorild @fthorild

Version history

Version Date Comments
1.0.0 November 24, 2017 Initial release
1.0.1 February 22, 2019 Updated to SPFx 1.7.1 and dependencies, Added Turkish translation, Added RichText Mode and Tinymce Editor
1.0.2 October 14, 2019 Updated to SPFx 1.9.1 and dependencies
1.0.3 July 7, 2020 Updated to SPFx 1.10.0 and dependencies. Fixed required field validation (Harsha Vardhini)
1.0.4 September 12, 2020 Added support for User, UserMulti, Taxonomy, and TaxonomyMulti field types
1.0.5 September 26, 2020 Fix date handling problems and redirect after edit
1.0.6 October 8, 2020 Added support for cascading lookup fields
1.0.7 December 11, 2020 Fix limit of lookup fields
1.0.8 February 7, 2021 Fixed dragging and dropping fields
1.0.9 February 19, 2021 Fixed regular expressions for text validation

Disclaimer

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.


Minimal Path to Awesome

  • Clone this repository
  • in the command line run:
    • npm install
    • gulp serve

Features

This Web Part illustrates the following concepts on top of the SharePoint Framework:

  • Using React for building SharePoint Framework client-side web parts.
  • Using React controlled components for SharePoint form fields.
  • Using SharePoint REST services to retrieve and update schema and data for lists and fields.
  • Using Office UI Fabric React components and styles for building user experience consistent with SharePoint and Office.
  • Integrating drag and drop to provide better user experience for configuring web parts visually.
  • Using custom drop-down property editors in the property pane.