How can i create custom element with multiple fields #45
-
Can you provide an example of how to create a custom element, such as a container with various fields like text, number, and radio, using the VueForm Builder? // builder.config.js
export default {
element: {
types: {
basicinfo: {
label: 'Basic Info',
description: 'Basic Information',
category: 'static',
rules: [],
schema: { // Here I want to add multiple fields like text, number, etc. inside a container
label: 'name',
type: 'text',
},
sections: {
// ...
},
separators: {
// ...
},
operators: [
// ...
],
}
}
}
} Could you please provide guidance on this? Thank you! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
The So you can define an The only thing you need to pay attention is to extend each element's schema with a Here's how a custom container would look like with a text and number field by default: // builder.config.js
export default {
element: {
types: {
basicinfo: {
label: 'Basic Info',
description: 'Basic Information',
category: 'static',
rules: [],
schema: {
label: 'Basic Info',
type: 'object', // or 'group'
builder: {
type: 'container',
},
schema: {
text: {
type: 'text',
label: 'Text',
builder: {
type: 'text',
},
},
number: {
type: 'text',
label: 'Number',
inputType: 'number',
rules: ['nullable', 'numeric'],
autocomplete: 'off',
builder: {
type: 'number',
},
},
}
},
sections: 'container',
separators: 'container',
operators: [],
}
}
}
} |
Beta Was this translation helpful? Give feedback.
The
schema
you pass to a builder element is the same schema you set for an element when using Vueform with schema rendering.So you can define an
object
orgroup
as elementtype
and pass its children viaschema
(as you would do for eg. anObjectElement
).The only thing you need to pay attention is to extend each element's schema with a
builder
object. This object needs to contain thetype
of the element in the builder. So for example fornumber
we usetype: 'text'
on the element schema, but we needbuilder.type: 'number'
because that's the associated field in the builder (that's how the builder know what eg. icon to display for this element eg. in the tree). You can see the available buil…