Based on Module options which is stored in website front database, we developed solution for dynamic form generator. Here the example of form fields config
config = {
id: 1,
name: 'Module1',
type: 'C',
description: 'Module1 Desc',
options: [
{
fieldSet: 'FieldSet 4',
name: 'testColor',
description: 'testColor Description',
title: 'colorTitle',
type: 'color',
readonly: false,
isRequired: true,
defaultValue: '#000000',
options: {
placeholder: 'testDate Placeholder'
},
},
{
fieldSet: 'FieldSet 3',
name: 'testDate',
description: 'testDate Description',
title: 'dateTitle',
type: 'date',
readonly: false,
isRequired: true,
options: {
placeholder: 'testDate Placeholder',
inputElement: false,
manual: false,
dateFormat: 'YYYY/MM/DD',
},
},
{
fieldSet: 'FieldSet 1',
name: 'testInput',
description: 'testInput Description',
title: 'inputTitle',
type: 'input',
readonly: false,
isRequired: true,
defaultValue: 'inputDefaultValue',
options: {}
},
{
fieldSet: 'FieldSet 1',
name: 'testText',
description: 'testText Description',
title: 'textTitle',
type: 'text',
readonly: false,
isRequired: true,
defaultValue: '',
options: {},
},
{
fieldSet: 'FieldSet 2',
name: 'testSelect',
description: 'testSelect Description',
title: 'selectTitle',
type: 'select',
readonly: false,
isRequired: true,
defaultValue: 'selectOption2',
options: {
showEmpty: true,
emptyTitle: 'None',
list: [
{
value: 'selectOption1',
title: 'selectOptionTitle1'
},
{
value: 'selectOption2',
title: 'selectOptionTitle2'
},
{
value: 'selectOption3',
title: 'selectOptionTitle3'
},
{
value: 'selectOption4',
title: 'selectOptionTitle4'
},
]
},
},
{
fieldSet: 'FieldSet 2',
name: 'testRadio',
description: 'testRadio Description',
title: 'radioTitle',
type: 'radio',
readonly: false,
isRequired: false,
defaultValue: 'radioOption3',
options: {
list: [
{
value: 'radioOption1',
title: 'radioOptionTitle1'
},
{
value: 'radioOption2',
title: 'radioOptionTitle2'
},
{
value: 'radioOption3',
title: 'radioOptionTitle3'
},
{
value: 'radioOption4',
title: 'radioOptionTitle4'
},
]
},
},
{
fieldSet: 'FieldSet 2',
name: 'testCheck',
description: 'testCheck Description',
title: 'checkTitle',
type: 'check',
readonly: false,
isRequired: false,
value: true,
defaultValue: true,
options: {
value: 'checkValue',
},
},
{
fieldSet: 'FieldSet 2',
name: 'testSwitcher',
description: 'testSwitcher Description',
title: 'switcherTitle',
type: 'switcher',
readonly: false,
isRequired: false,
isChecked: true,
isDefaultChecked: true,
options: {
value: 'switcherValue',
},
},
{
fieldSet: 'FieldSet 3',
name: 'testDateTime',
description: 'testDateTime Description',
title: 'dateTimeTitle',
type: 'datetime',
readonly: false,
isRequired: false,
options: {
placeholder: 'testDateTime Placeholder',
inputElement: false,
manual: false,
dateFormat: 'YYYY/MM/DD',
timeFormat: 'HH:mm'
},
},
{
fieldSet: 'FieldSet 3',
name: 'testTime',
description: 'testTime Description',
title: 'timeTitle',
type: 'time',
readonly: false,
isRequired: false,
options: {
placeholder: 'testTime Placeholder',
inputElement: false,
manual: false,
timeFormat: 'HH:mm'
},
},
{
fieldSet: 'FieldSet 4',
name: 'testImage',
description: 'testImage Description',
title: 'imageTitle',
type: 'image',
readonly: false,
isRequired: false,
options: {
avatar: true
},
},
]
};All options inside every field are optional except options.list in "select" and "radio" types.
In React front admin panel part we support the following types (the most popular field types):
- input Simple string value
- text Multiple rows text value
- check Checkbox can set true / false values
- switcher The same as Checkbox but has switcher view
- radio Radio group with options, can set one value from options
- select Selectbox with options, can set one value from options
- datetime DateTimePicker can set datetime value in custom format
- date DateTimePicker can set date value in custom format
- time DateTimePicker can set time value in custom format
- image File Uploader can set file converted to base64 even if it's not image format
- color Color Picker, can set color value in hex string format
Also form generator supports field validations. But there is implemented only 3 "required", "email" and "number", but it can be easily extended on front part