Adding new group and adding new component to it

[bshivam1]

I want to create a new group and add my own custom component to it. Can anyone tell how to do it in ngFormBuilder ?

[bshivam1]

Done !
module.exports = function(app) {
app.config([
'formioComponentsProvider',
function(formioComponentsProvider) {
formioComponentsProvider.addGroup('GroupName',{
title: 'GroupTitle'

    })
    console.log(formioComponentsProvider);
    var isNumeric = function isNumeric(n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    };
    formioComponentsProvider.register('ComponentName', {
      title: 'ComponentTitle',

//Define template link here
template: 'formio/components/component.html',
settings: {

      },
      group: 'GroupName',
      controller: ['$scope', function($scope) {
      
      }]
    });
  }
]);

[virajkanwade]

Can you please provide more details? Where to write this code? how to call the function?

Thanks

[Morshed0308]

Hello @virajkanwade ,
You can first config your formiocomponents like this
app.config(['formioComponentsProvider', function (formioComponentsProvider) {

and then you can add your group and title like below:

formioComponentsProvider.addGroup('Group Name', { title: 'Group Title' });

after that you can register your custom component using the same group name inside this

formioComponentsProvider.register('componentName',{
});
    

For example a simple custom component will look like this :

app.config(['formioComponentsProvider', function (formioComponentsProvider) {
 
    formioComponentsProvider.addGroup('amazing', { title: 'Custom Template Components' });

formioComponentsProvider.register('reCAPTCHA', {
        title: 'reCAPTCHA',
        template: 'The URL where the component will load',
        controller: ['$scope', function ($scope) {
        
        }],
        group: 'amazing',
        icon: 'fa fa-refresh',  
      ////Here you can add your own json scema for this component///////////

    });

}]);

You can add this in a new file and add the script src where the main page is loaded.

<script src="/FolderName/Scripts/Customcomponent.js" type="text/javascript"></script>

Hope this helps.