honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
sp-dev-fx-webparts/samples/react-list-form
History
Dany 137526e5d4 New sample react-list-form (#373) 
* Initial commit

* Create LICENSE

* readme updated

* Major extensions (more web part properties, field ordering, adding, refactoring list form rendering...)

* Updated to newest version of packages / support display field User & Lookup

* Refactored rendering of SPFormField / support more field types / Check fro local environment and notify user / Added ConfigureWebPart / Introduced showSupportedFields option

* Removed unused imports

* Use of resource strings for localization / ListForm component now not relying on web part context (just spHttpClient) / added comments / fixed bug where old values were still shown after switching to other form type or item / Moved date picer strings to localized resources

* Fixed bug where fields would not clear when switching formtype or id

* Updated Readme and added overview clip gif
 		2017-12-01 16:45:08 +02:00
..
.vscode New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
assets New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
config New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
src New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
typings New sample react-list-form (#373) 2017-12-01 16:45:08 +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 New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
LICENSE New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
README.md New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
gulpfile.js New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
npm-shrinkwrap.json New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
package.json New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
tsconfig.json New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00
tslint.json New sample react-list-form (#373) 2017-12-01 16:45:08 +02:00

README.md

React List Form WebPart

Summary

The React 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

drop

Applies to

Solution

Solution Author(s)
react-list-form Dany Wyss

Version history

Version Date Comments
1.0 November 24, 2017 Initial release

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.