hilkenan / sp-formgen-react

SharePoint form generator with JSON for react. UI Fabric controls are used for rendering

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:

import * as React from 'react';
import Form from 'formgen-react';
var jsonForm = require('./test.json');

export class Example extends React.Component {
render() {
  return (
  <SPForm 
    useLocalHost={ false }
    onCancelForm={ () => console.log("cancel click") }
    onSubmitForm={ (formData:any) => console.log("submit click: " + JSON.stringify(formData)) }
    jsonFormData={ jsonForm }  />
);
}

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:

1. npm run proxy
2. Enter your SharePoint Environment url with credentials
3. Ctrl Brack to stop the server
4. 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={ false } />

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.