formio/formio

Hey @rahul106-cpu,

If you use angular's lib, then you can register the component inside Form Builder as you normally would and add something similar to this to it which would allow you to add a collection (add a new row, remove a row) to the component's configuration screen:

const MY_CUST_COMP_OPTIONS: FromioCustomComponentInfo = {
type: ...
selector: ...
title: ...
group: ....
icon: ....
template: ....
chagneEvent: ...
editForm() {
const myCustomCompTextFieldForFormBuild: ExtendedComponentSchema<NestedComponent> = {
weight: 101, type: 'textfield', .....
}
const myCustomCompMapThatHasATableInFormBuilder: ExtendedComponentSchema<NestedComponent> = {
weight: 102,
type: 'datamap',
input: true,
key: 'customOptions.myCustomCompMapKey',
label: 'Label of the map collection you want to show inside Form Builder',
tooltip: 'The tooltip you want to show as help to the user configuring your custom component',
validate: { requried: true // and all other validator rules you might want},
valueComponent: {
type: 'textfield',
column: 'value',
key: 'value',
label: 'Whatever label you want to show for this column',
placeholder: 'Some placeholder string that makes sense',
input: true,
validate: { requried: true // and all other validator rules you might want},
}
}
};

// Steal a reference to the default Form Builder registered components
const addedFields: ExtendedComponentSchema<any>[] JSON.parse(
     JSON.stringify(Components.components.textfield.editForm().components)
);

// Register our own form builder custom component's settings
for(const fieldSchema of addedFields) {
    if(fieldSchema.key === 'tabs') {
        const tabs = fieldSchema.components;
        for(const tab of tabs) {
            if(tab.key === 'display') { // I'm assuming you want your component added to Display tab
                const displays = tab.components;
                // Let's add those extra form field that configure our custom components to Form Builder
                displays.push(myCustomCompTextFieldForFormBuild); // register custom text field
                displays.push(myCustomCompMapThatHasATableInFormBuilder); // register custom map
            }
        }
    }
}

};

Now use the new MY_CUST_COMP_OPTIONS to register your custom component with the FormIO library as you normally do.

For extra help, check FormIO's git repos for the given class types in above code. See how they use it as there are plently of examples in their repos :)