SharePoint React Form Generator with UI Fabric React Components
All of you are very welcome to contribute with this project! Also my other project formgen-react. This project is only the injection for SharePoint for the formgen-react project. See formgen-react documentation.
Features
- Same as for formgen-react project
- Replace the People Picker control with a SharePoint People Picker control
- Dependency Injection for SharePoint List loading for the controls:
- DropDonw
- Combobox
- Choice Group
- Cascading Dropdonw (over multiple lists)
- Load translated list content from sharepoint
Installation
The package can be installed via NPM:
npm install sp-formgen-react --save
Documentation
Full documentation from formgen-react
Full documentation from sp-formgen-react
Configuration
The example below shows how to use the form generator with a simple json definition. This JSON need to map to the JSON schema:
;;;
The above ./test.json file could look like this:
{ "$schema": "../schemas/jfrom-schema.json", "id": "testform", "theme": "red", "title": "Test EN", "title_trans": { "de": "Test DE", "fr": "Test FR", "it": "Test IT" }, "sp_config": { "lists": [{ "key": "configKeyList", "config": { "view_name": "All Elementes", "key_field": "ID", "list_name": "yoursharepointlist", "display_fields": [{ "internal_name": "Title" }] } }] }, "rows": [{ "columns": [{ "controls": [{ "id": "choiceGroup", "title": "ChoiceGroup", "dataProviderConfigKeys": [ "configKeyList" ], "control_type": [ "ChoiceGroup" ], "label_position": [ "Top"] }] }] }] }
The JSON has to fit the Schema Definition:
Form Schema
SharePoint Config
You need also the following global Schemas:
Translation
Object Translation
Local Development
The master
branch contains the latest version of the Form component.
To start your example app, use the following steps:
- npm run proxy
- Enter your SharePoint Environment url with credentials
- Ctrl Brack to stop the server
- npm run serve
We use sp-rest-proxy as server to route the calls to an sharePoint applicaiton. For more info see this module. With "npm run serve" you start this proxy AND a simple webserver on http://localhost:3000. The proxy for your SharePoint runs at http://localhost:4323.
Remark, that the used SharePoint Poeple Picker nor correctly runs with the proxy server. It shows the control but no users are found.
Publishing to SharePoint
When you publish the solution to sharepoint you has to set the property useLocalHost from the SPForm to false:
SPForm useLocalHost= /
otherwise it will still search sharepoint at your localhost proxy.
License
Copyright (c) 2018 to hilkenan and individual contributors. Licensed under MIT license, see LICENSE for the full license.