Home

Welcome to the sp-formgen-react wiki!

Main functionality

If you need a form that should render in SharePoint with UI Fabric controls within an responsive layout that should validate and should be translatable then you are with sp-formgen-react right.

The basic are the same as for the sp-formgen-react

To add a form at your project, simple install sp-formgen-react and import the SPForm. Also create an JSON or an JSON File that define the structure of your form

Form Declaration

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

export class Example extends React.Component {
render() {
  return (<SPForm jsonFormData={jsonForm}  />)
  }
}

Configuration with JSON

{
     "$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"]
            }]
        }]
    }]
 }

A more complex form definition you can finde at Test Form

Here you see two main differences from the JSON from formgen-react

1. The Controls that are bound to SharePoint has an attribute "dataProviderConfigKeys". At the moment only one key per control is allowed. It is the reference to the key in the sp_config section.
2. The sp_config section. Here all Keys used in this JSON are defined. Each define an set for a given list (or for cascader or custom a list tree)

Form properties

They are the same as for formgen-react plus and the following:

| Property Name | Type | Required | Description | | ------------- | ------------- |------------- | ------------- | ------------- | | useLocalHost | boolean | not | If set to true then use the http://localhost:4323 as proxy to an sharepoint server |

JSON scheme explanations

Only the differences are here documented. The use of the property "dataProviderConfigKeys" is discribed above. Now lets see how to configure each of those keys. Also the feature how to translate the loaded data.

Form scheme

JSON Scheme

Only the sp_config section and the dataProviderConfigKeys is added.

Data Binder sheme

JSON Scheme

Attribut Name	Parent	Type	Required	Description
sp_config	n/a	object	not	The config node for the sharepoint databinders
base_url	sp_config	string	no	If the lists are defined in a subsite from the current then define here the url for this subsite starting with a /
lists	sp_config	list array	yes	All used sharepoint lists in the form
[list]	lists	object	min 1	One list object in the lists array
key	list	string	yes	The key used in the controls dataProviderConfigKeys as referenc. Any unique string (no special chars)
config	list	object	yes	The config object for the list
key_field	config	string	yes	The internal name form the field with the key. In the most cases it should be ID
web_url	config	string	no	The url relative to the base_url for this list
list_name	config	string	yes	The Display Name from the List (if the display name form the list is translated then you has also give all translations for this List name)
view_name	config	string	no	The name of the view to use for the filter. If not set den the default view is used.
display_format	config	string	no	Any dipslay format for the defined display_fields. Eg if you have defined two display_fields then you could format it like "{texts[0]} any text {texts[1]}" then the variables would be replaced with the output of the two diaply_fields
display_fields	config	fields array	yes	At least one field that should be used for displaying
[display_field]	display_fields	object	min 1	Defines a filed to display in the dropdown or other controls
internal_name	display_field	string	yes	The internal name of the field to show
display_format	display_field	string	no	Any dipslay format for the field. Use the variable {fieldValue} as placeholder for the ouput of the field. E.g. "Test: {fieldValue}"
child_lists	config	array of child_list	no	Only used for Cascading DropDown and can be used for custom controls. Defines all child lists that has an relaiton to the parent list
[child_list]	child_lists	object	min 1	Configure an child list
parent_field	child_list	string	yes	The internal field in the child list that has an relation (Lookup field) to the parent list
child_config	child_list	object	yes	The same object as for "config" in this table (with this it will be a recursive tree)
child_config_trans	child_list	object	no	Translations for the properties in the child_config object. See Object Translation scheme
config_trans	list	object	no	Translations for the properties in the config object. See Object Translation scheme

Translation scheme

JSON Scheme

Attribut Name	Type	Description
de	string	German translation for the given attirbute
fr	string	French translation for the given attirbute
en	string	English translation for the given attirbute
it	string	Italien translation for the given attirbute
es	string	Spanish translation for the given attirbute

The default value is in any case the origin string (e.g. "title"). This will be shown if no translation for the set langauge is available. So if you want english as default then use for "title" an english string and translate only the other needed language. The default Language must only be defined once.

Object Translation scheme

JSON Scheme

Attribut Name	Type	Required	Description
properties	array of property	yes	Array of properties that must be translated
[property]	object	min 1	Translation for a given property
key	string	yes	The property name that must have an translation See Translation Keys
object_trans	object	no	Translations for the property. See Translation and Translation scheme

For example see Control types config example

#Translation Keys The key is bild with all Internal Javascript Names. So see at the folder "objects" the mapping classes from JSON to the Javascript objects how they are called. Then you can collect them together. If an array should be selected then use [i] (i = index) to select the item. E.G.

"DisplayFields[0].InternalName"

would define an translation for the JSON display_fields the first item and there for the internal_name. With this you could select another field for each language.