Form

The Form component is a tool to help you solve the problem of allowing end-users to interact with the data and modify the data in your application.


Install

// with npm
npm install @itsy-ui/form

// with yarn
yarn add @itsy-ui/form


Usage

import { Form } from '@itsy-ui/form';

const formSchema = {
	"id": "sample-form",
	"displayName": "Sample form",
	"typeId": "form",
	"propertyDefinitions": {
		"name": {
			"id": "name",
			"displayName": "Name",
			"placeholderText": "Enter name",
			"ui:widget": "string",
			"required": true
		},
        "phone": {
			"id": "phone",
			"displayName": "Phone number",
			"placeholderText": "Enter phone number",
			"ui:widget": "integer",
			"required": true
		},
        "info": {
			"id": "info",
			"displayName": "Additional info",
			"placeholderText": "Enter additionl info",
			"ui:widget": "textarea"
		}
	}
};

const schema = {
  typeId: "sample_form",
  formSchema: formSchema
};

<Form className="form" schema={schema} />


API

name type default description
className String additional class name of root node.
style Object {} Inline style object
schema Object {} Schema which contains information to be displayed.


Schema API’s

name type default description
typeId String Unique key for the form schema
formSchema Object {} Schema object which contains the form field informations as a JSON object in "propertyDefinitions" key. Each property definition object contains following attributes,
  • id - key name of the field
  • propertyType - Type of the field (string/integer/datetime/boolean/lookup)
  • displayName - Display label of the field
  • placeholderText - Placeholder text fot the field
  • validationPattern - Validation regex pattern
  • required - mandatory field or not
  • ui:widget - type of widget to be load
record Object {} Form context object which helps to load form prefilled.
objectId string When this values set, Form widget try to fetch the object from datasource to prefill the t fields.
dataSource string Set custom datasource for form instead of using default one


Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions