title: Getting started description: This Form Builder library focused on building the dynamic forms. navigation: title: Getting Started

Form Builder library

This is Vue 3.x library focused on building the dynamic forms. Works great in pair with Form Renderer

Pre requirements

Make sure you have installed the voicenter-ui-plus library

Installation

1. run yarn add @voicenter-team/form-builder or npm i @voicenter-team/form-builder

2. Now you can use main component as:

<template>
    <DynamicFormBuilder
        v-model="formBuilderData"
        :component-list="componentsList"
    />
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {DynamicFormBuilder} from '@voicenter-team/form-builder'
import {TResultParametersCategory, TComponentConfig} from '@voicenter-team/form-builder/types/types'

const formBuilderData = ref<Array<TResultParametersCategory>>([])
const componentsList: Array<TComponentConfig> = [
    {
        name: 'String',
        type: 'String',
        icon: 'vc-icon-notes',
        id: 1,
        componentParameterCategories: [
            {
                uid: 1,
                name: 'General',
                componentParameters: [
                    {
                        name: 'title',
                        uid: 1,
                        icon: 'vc-icon-name',
                        type: 'String',
                        parentId: 1,
                        propJpath: '$.title',
                        parameterData: {
                            title: 'Title',
                            mandatory: true,
                            validationRegex: '\\S',
                            validationMessage: 'The field is required',
                            type: 'text'
                        }
                    },
                    {
                        name: 'mandatory',
                        uid: 3,
                        icon: 'vc-icon-name',
                        type: 'YNSelect',
                        parentId: 1,
                        propJpath: '$.mandatory',
                        parameterData: {
                            title: 'Is Mandatory',
                            mandatory: true,
                            defaultValue: false
                        }
                    },
                    {
                        name: 'validationRegex',
                        uid: 4,
                        icon: 'vc-icon-name',
                        type: 'String',
                        parentId: 1,
                        propJpath: '$.validationRegex',
                        parameterData: {
                            title: 'Validation Regex',
                            defaultValue: '',
                            type: 'text'
                        }
                    },
                    {
                        name: 'validationMessage',
                        uid: 5,
                        icon: 'vc-icon-name',
                        type: 'String',
                        parentId: 1,
                        propJpath: '$.validationMessage',
                        parameterData: {
                            title: 'Validation Message',
                            mandatory: true,
                            defaultValue: '',
                            type: 'text',
                            validationRegex: '\\S',
                            validationMessage: 'The field is required',
                            parameterConditions: [
                                {
                                    parameterConditionList: [
                                        {
                                            parameterConditionJPath: '$.validationRegex',
                                            parameterConditionOperator: 'isNotEmpty'
                                        }
                                    ]
                                }
                            ],
                        }
                    },
                    {
                        name: 'defaultValue',
                        uid: 6,
                        icon: 'vc-icon-name',
                        type: 'String',
                        parentId: 1,
                        propJpath: '$.defaultValue',
                        parameterData: {
                            title: 'Default Value',
                            defaultValue: '',
                            type: 'text'
                        }
                    }
                ]
            },
            {
                uid: 2,
                name: 'Additional',
                componentParameters: [
                    {
                        name: 'Type',
                        type: 'ISelect',
                        uid: 7,
                        icon: 'vc-icon-type',
                        parentId: 2,
                        propJpath: '$.type',
                        parameterData: {
                            title: 'Type',
                            mandatory: true,
                            defaultValue: 'text',
                            options: [
                                {
                                    icon: 'vc-icon-ticket-open',
                                    label: 'Plain Text',
                                    value: 'text'
                                },
                                {
                                    icon: 'vc-icon-ticket-open',
                                    label: 'Text Area',
                                    value: 'textarea'
                                },
                                {
                                    icon: 'vc-icon-ticket-open',
                                    label: 'Number',
                                    value: 'number'
                                },
                                {
                                    icon: 'vc-icon-ticket-open',
                                    label: 'Email',
                                    value: 'email'
                                },
                                {
                                    icon: 'vc-icon-ticket-open',
                                    label: 'Password',
                                    value: 'password'
                                }
                            ]
                        }
                    },
                    {
                        name: 'Placeholder',
                        type: 'String',
                        uid: 8,
                        icon: 'vc-icon-type',
                        parentId: 2,
                        propJpath: '$.placeholder',
                        parameterData: {
                            title: 'Placeholder',
                            mandatory: false,
                        }
                    }
                ]
            }
        ]
    }
]
</script>

<style>
@import '@voicenter-team/form-renderer/library/style.css';
@import '@voicenter-team/form-builder/library/style.css';
</style>

Documentation

Visit documentation for detailed info