Customizing Export Panel
Learn how to customize the Export panel.
Disabling Config Fields
The following options can be used to disable export config fields:
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
export: {
props: {
export: {
output: true,
api: true,
theme: true,
download: true,
},
}
}
})
Adding New Export Fields
The sections
and separators
export of @vueform/builder
have an export
property that—just like in the case of different element types—contains the config panel sections
and separators
of the Export panel:
js
// builder.config.js
import { defineConfig, sections, separators } from '@vueform/builder'
// Nothing will change in this case
export default defineConfig({
export: {
sections: sections.export,
separators: separators.export,
}
})
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 an installation instructions field at the end of the Export panel:
js
// builder.config.js
import { defineConfig, sections, separators, BaseExportField } from '@vueform/builder'
// Creating the Instructions field
const ExportInstructionsField = class extends BaseExportField {
name = 'ExportInstructionsField'
get schema() {
return {
uniqueId: {
type: 'static',
label: 'How to install?',
content: 'Lorem ipusm dolor sit amet...'
}
}
}
}
// Adding the Instructions field
sections.export.export.fields.instructions = {
type: ExportInstructionsField,
}
// Creating a separator between our new and existing fields
separators.export.export = [
...separators.export.export,
['instructions'],
]
export default defineConfig({
export: {
sections: sections.export,
separators: separators.export,
}
})
Export fields need to be extended from the BaseExportField
export of @vueform/builder
and they usually start with the Export
field name prefix.
Retriving Field Value
The field's value gets added to the export
property of the Builder Object.