How can i create custom element with multiple fields

[L150n]

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!

[adamberecz]

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 or group as element type and pass its children via schema (as you would do for eg. an ObjectElement).

The only thing you need to pay attention is to extend each element's schema with a builder object. This object needs to contain the type of the element in the builder. So for example for number we use type: 'text' on the element schema, but we need builder.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 builder element types here.

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: [],
      }
    }
  }
}

[L150n]

Now it's working, Thanks!
Are there any table fields available in VueForm Builder? If not, how can I add them to this builder? Alternatively, can I integrate other Vue table libraries like ag-Grid into this builder?

[catamaican]

I'm also interested in integrating table-like features, with CRUD, eventually with master-details support. Thank you