TypeScript icon, indicating that this package has built-in type declarations

0.4.6 • Public • Published

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.

Join the chat at https://gitter.im/formgen-react/Lobby npm version License: MIT Build Status Dependency Status Downloads


  • 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


The package can be installed via NPM:

npm install sp-formgen-react --save


Full documentation from formgen-react
Full documentation from sp-formgen-react


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 (
    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:
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:

    useLocalHost={ false } />

otherwise it will still search sharepoint at your localhost proxy.


Copyright (c) 2018 to hilkenan and individual contributors. Licensed under MIT license, see LICENSE for the full license.

Package Sidebar


npm i sp-formgen-react

Weekly Downloads






Unpacked Size

255 kB

Total Files


Last publish


  • hilkenan