Home

Welcome to the formgen-react wiki!

Main functionality

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

To add a form at your project, simple install formgen-react and import the Form. 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 (<Form jsonFormData={jsonForm}  />)
  }
}

Configuration with JSON

{
    "$schema": "../schemas/jfrom-schema.json",
    "id": "testform",
    "title": "Test Form",
    "rows": [{
        "columns": [{
                "controls": [{
                    "id": "info",
                    "title": "<b>This is a Info about this Test Document in Englisch</b>",
                    "control_type": [ "InfoText" ]
                },{
                    "id": "text",
                    "title": "Textbox",
                    "control_type": [ "Textbox" ],
                    "info": "Info Test",
                    "label_position": [ "Left"]
                },{
                    "id": "submit",
                    "control_type": ["SubmitButton"]
                }
            ]
        }]
    }]
 }

now when you start you project you should get a result as follow:

The "$schema" tag is optional. Only need when you want have intelisense support on your json Editor. To make this work you need to download the following 3 schemas and store it in an "schemas" folder:

Form scheme
Translation
Object Translation

A more complex form definition you can finde at Test Form

Form properties

The "Form" react component has the following public properties:

Property Name	Type	Required	Description
jsonFormData	Json object	yes	See Form scheme
customControls	DynamicControl[]	no	If control type of "custom" is used. See Custom enhancements
customValidators	CustomValidator[]	no	If validator type of "custom" is used. See Validators
customActions	CustomActions[]	no	Actions for CustomButton. See Custom enhancements
dataBinders	DataBinder[]	no	Databinding methods for controls. See Databinding
formDidMount	event: (controls:GenericFormInput[]): void	no	Event called when the form is mounted. In the parameter "controls" are all mounted Generic Controls available. See Event handling
onSubmitForm	event: (formData: any): void	no	Event called when SubmitButton is clicked. The used Json with filled "value" properties for the controls is set as "formData". Only called if the form is valid
onInvalidSubmitForm	event: (formData: any): void	no	Event called when SubmitButton is clicked. But the form is not valid. The used Json with filled "value" properties for the controls (all those are valid at this time) set as "formData".
onCancelForm	event: void	no	Event called when the "CancelButton" is clicked
onUpdated	event:(key: string, value: any): void	no	Event then any control has updated (only if valid). The key is the full Control id (see Control Ids). the Value the object comming from the control. This value whill also be used as "value" for the JSON control property
showErrorsWhenPristine	boolean	no	If true then shows the error message also direct when loaded and the form is untouched
Language	string	no	If not set then the browser language is used to decide the used langauge. If you want to set any other supported language then set the two letter language identifier here (en, de, it, es, fr)

JSON scheme explanations

Here a short explanation from the nodes in the scheme. Fore more Info see other parts of this documentation:

Form scheme

JSON Scheme

Attribut Name	Parent	Type	Required	Description
id	n/a	string	yes	Root identifier for the form. See Control Ids
title	n/a	string	no	Title of the Form
theme	n/a	string	no	Theme from UI Fabric. E.g. "red"
title_trans	n/a	object	no	Translations for the form title. See Translation and Translation scheme
label_with	n/a	int	no	The with in a number defined by UI Fabric Layouts, Specify the with of all labels in this form (if not overwritten by column with)
rows	n/a	row array	yes	All rows in the Form
[row]	rows	object	min 1	One row object in the rows array
columns	row	column array	yes	All columns in this row
[column]	columns	object	min 1	One column object in the collumns array
label_with	column	int	no	The with in a number defined by UI Fabric Layouts, Specify the with of all labels in this column
css_class	column	string	no	Defines any loaded css class that overwrite the styles for this column
styles	column	object	no	See Inline CSS in JSX (not recommanedet to use) for this column
controls	control	control array	yes	All controls in this column
[control]	controls	object	min 1	One control object in the controls array
id	control	string	yes	Unique string in this columns array. See Control Ids
title	control	string	no	Title of the control (label)
title_trans	control	object	no	Translations for the title (label). See Translation and Translation scheme
info	control	string	no	Renders a small (i) icon on the right side that shows this html text as callout by hovering
info_trans	control	object	no	Translations for the info html message. See Translation and Translation scheme
info_action	control	object	no	Show a link at the bottom of the info callout
link	info_action	string	no	Is a absolut or relative link for the info action Link
text	info_action	string	no	Is the link text for the info action link
value	control	object (any)	no	Stores the value from the control as an "any" object. Can also be used as default initial value
css_class	control	string	no	Defines any loaded css class that overwrite the styles for this control
styles	control	object	no	See Inline CSS in JSX (not recommanedet to use) for this control
databinders	control	string array	no	Defines the databinding methods. See Databinding
validators	control	validator array	no	Defines the used validators for this control
[validator]	validators	object	min 1	Defines an validator. See Validators
validator_type	validator	enum	yes	See Validators
message	validator	string	no	The text to show when validation fail
message_trans	validator	object	no	Translations for the error message. See Translation and Translation scheme
value	validator	number	no (depends on validatior_type)	Any value defines limits (e.g. minValue)
regex	validator	string	only for regex type	Any valid regular expression See RegExp
custom_type	validator	string	only for custom type	any string that defines an custom validator id. See Validators
label_position	control	enum	no (default is top)	Defines the positio of the label: right, left or top. See Label Positions
control_type	control	enum	yes	Defines the type of the control. See Control types
customtype_name	control	string	no (depend on type)	Name of any custom type. For CustomButton the custom action type, and in case of a custom control the type of the custom control type. See Custom enhancements
subrows	control	array of row	no	Can be used for Checkbox and Toggle type. This Rows are only displayd if toggle or checkbox is activated
subcontrols	control	array of control	no	Can be used for Checkbox, Toggle and MUSST be used for TabContainers. In TabContainers this array defines the used Tabs.
subcontrol_label_with	control	int	no	The with in a number defined by UI Fabric Layouts, Specify the with of all labels in the "subcontrols" (1-12)
config	control	object	no	Control configuration. Depending on the Type. See Control types
config_trans	control	object	no	Translations for the properties in the config object. See Translation and 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
object_trans	object	no	Translations for the property. See Translation and Translation scheme

For example see Control types config example

Control Ids

The Ids are used to identify an control uniquly from other controls. Internaly the id will be concatinaed. So if you have an control in a tabcontainer and a tab then the id for the control in this tab look like:

"formId.TabContainerId.TabId.controlid"

But you only need to add "controlid" in the control id attribute. The full control id will be used for Databinding.