adding a new component

I would like to have two buttons next to each other in a form, say

<div class="form-group">
<button class="btn btn-primary disabled" type="submit">Save</button>
<button class="btn btn-primary" type="button" style="margin-left: 10px;">Cancel</button>
</div>

How can I create this in the formbuilder? Do I have to create a “custom component”? It is not clear for me how to do this after reading section “Adding Components” at https://github.com/formio/ngFormBuilder. Is this documented clearly for starters somewhere? At https://gitter.im/formio/formio I did not get reactions on the same question.

[zackurben]

@StefanHoutzager, You can use the block setting to make each button take the entire width of the container and you can nest multiple columns if needed.

I think thats the best option for now, unless you want to make a custom layout component, or mess with custom css. It’s possible you can use the html component to make a bootstrap row and put the buttons html as the content; however, I haven’t tried that personally.

[Morshed0308]

@PetroSutch
You can create a new js file and create a new group if you want like bellow

app.config(['formioComponentsProvider', function (formioComponentsProvider) {

   formioComponentsProvider.addGroup('amazing', { title: 'Custom Template Components' });
formioComponentsProvider.register('name', {
       title: 'Your Title',
       template: 'formio/components/desiredURL.html',
       controller: ['$scope', function ($scope) {
        
       }],
       group: 'amazing',
       icon: '',
       settings: {
           input: true,
           fontSize: '',
           activeColor: '',
           multiple: false,
           protected: false,
           persistent: true,
           tableView: false
       },
       views: [
         {
             name: 'Display',
             template: 'formio/components/icons/yourURL.html'
         }
       ]
   });

if you don’t wanna create new group ,you can give the group name ‘basic’ and ignore the .addgroup() line.