Customizing Settings Panel
Learn how to customize the form Settings panel.
Disabling Config Fields
The following options can be used to disable form settings config fields:
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
form: {
props: {
properties: {
name: true,
width: true,
nesting: true,
},
submission: {
endpoint: true,
formKey: true,
},
validation: {
live: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
forceLabels: true,
floatPlaceholders: true,
displayErrors: true,
displayMessages: true,
},
}
},
})Adding New Settings Fields
The sections and separators export of @vueform/builder have a form property that—just like in the case of different element types—contains the config panel sections and separators of the Settings panel:
js
// builder.config.js
import { defineConfig, sections, separators } from '@vueform/builder'
// Nothing will change in this case
export default defineConfig({
form: {
sections: sections.form,
separators: separators.form,
}
})The sections are structured the same way as for element types. The same is true for separators.
Here's an example of how you can add, for example, a uniqueId field to the beginning of the form Settings panel:
js
// builder.config.js
import { nextTick } from 'vue'
import { defineConfig, sections, separators, BaseFormField } from '@vueform/builder'
// Creating the Unique ID field
const FormUniqueIdField = class extends BaseFormField {
name = 'BaseFormField'
get schema() {
return {
uniqueId: {
type: 'text',
label: 'Unique ID',
columns: { label: 6 },
onMounted: (el$) => {
setTimeout(async () => {
await nextTick()
if (!el$.value) {
el$.update(this.generateUUID())
}
}, 0)
}
}
}
}
generateUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0;
var v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
}
// Adding the Unique ID field
sections.form.properties.fields = {
uniqueId: {
type: FormUniqueIdField,
},
...sections.form.properties.fields
}
// Creating a separator between our new and existing fields
separators.form.properties = [
['uniqueId'],
['name', 'width', 'nesting']
]
export default defineConfig({
form: {
sections: sections.form,
separators: separators.form,
}
})Form Settings fields need to be extended from the BaseFormField export of @vueform/builder and they usually start with the Form field name prefix.
Retriving Field Value
The field's value gets added to the form property of the Builder Object.
