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-reduxform
History
Vipul Kelkar 13954cc7bc Redux-Form sample webpart (#503) 
* Redux-Form sample SPFx webpart added.

New SPFx webpart sample added that uses redux-form library. Sample is a data entry form with dynamic grid built using typescript, react, redux and redux-form library.

* Readme file updated.

Readme file updated with correct webpart demo gif file path.
 		2018-05-12 04:57:03 +03:00
..
SetupScript Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00
assets Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00
config Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00
src/webparts/PurchaseRequestWebpart Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00
.editorconfig Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00
.gitignore Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00
.yo-rc.json Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00
README.md Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00
gulpfile.js Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00
package-lock.json Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00
package.json Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00
tsconfig.json Redux-Form sample webpart (#503) 2018-05-12 04:57:03 +03:00

README.md

SPFx webpart using Redux-Form library and React

Summary

Sample webpart to demonstrate the use of Redux-Form library with SPFx, React and Typescript. Demonstrates how to easily build a dynamic grid using redux-form.

SPFx redux-form webpart

Used SharePoint Framework Version

drop

Applies to

Prerequisites

  • Basic knowledge of react-redux concepts - reducer,actions and dispatch.
  • PnP PowerShell - to setup Fields and Lists to work with the webpart.

Solution

Solution Author(s)
react-reduxform Vipul Kelkar @vipulkelkar

Version history

Version Date Comments
1.0 May 02, 2018 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

  • The webpart requires two custom lists in the SharePoint site. The folder "SetupScript" contains a PnP PowerShell script that will setup the custom fields, content type and the required lists.

  • Change the site URL in the PowerShell script and execute with proper credentials to setup the lists.

  • Clone this repository

  • in the command line run:

    • npm install
    • gulp serve

  • Navigate to - /_layouts/workbench.aspx and add the "ReduxFormWebpart"

Features

  • This is a data entry webpart to create a "Purchase Request". Each purchase request can have several items that can be ordered within it.

  • The webpart interacts with two SharePoint lists - "PurchaseRequest" and "PurchaseRequestItems".

  • The purchase request is created in the "PurchaseRequest" list. The purchase items are stored in separate "PurchaseRequestItems" list along with the ListItem ID of the corrosponding PurchaseRequest item.

Redux-Form :

  • Webpart makes use of Redux-Form library which makes it easy to maintain the state of form fields without explicitly requiring to maintain the state everytime data in a form field is added/updated/deleted. Refer to the Getting started guide for the basics of redux-form

  • The sample demonstrates how to integrate redux-form in SPFx webpart and develop a dynamic grid component using FieldArray component of redux-form.

  • The sample also uses custom renderers for form fields along with required field and number validations.