Custom Buttons

By default, there are edit and delete buttons displayed next to each item in a CollectionField:

Sometimes, you'll want to customize these buttons by adding new buttons, changing the button icons, etc... For example, let's add a Send button that will redirect the user to another page specific to the item. And, let's change the icon of the delete button.

We accomplish this by defining a buttonsFactory and then wiring up listeners for each button, preserving the edit and delete functionality:

{
  component: 'CollectionField',
  name: 'collectionField',
  label: 'Records',
  help: 'Example help',
  required: true,
  formFactory: {
    component: 'Factory',
    product: {
      component: 'Form',
      fields: [
        {
          name: 'firstName',
          component: 'TextField',
          label: 'First Name',
          required: true,
        },
        {
          name: 'lastName',
          component: 'TextField',
          label: 'Last Name',
        },
      ],
    },
  },

  buttonsFactory: {
    component: 'Factory',
    product: {
      component: 'GridItem',
      content: {
        component: 'Fragment',
        items: [
          {
            name: 'edit',
            component: 'ButtonField',
            icon: 'Edit',
            tooltip: 'Edit',
            listeners: [
              {
                event: 'click',
                actions: [
                  {
                    component: 'Set',
                    name: 'parent.parent.parent.parent',
                    value: {
                      currentForm: '{{parent.parent.parent}}',
                      mode: 'update',
                    },
                  },
                ],
              },
            ],
          },

          {
            name: 'delete',
            component: 'ButtonField',
            icon: 'DeleteOutline',
            tooltip: 'delete',
            listeners: [
              {
                event: 'click',
                actions: [
                  {
                    component: 'Set',
                    name: 'parent.parent.parent.parent',
                    value: {
                      currentForm: '{{parent.parent.parent}}',
                      mode: 'delete',
                    },
                  },
                ],
              },
            ],
          },

          {
            name: 'send',
            component: 'ButtonField',
            icon: 'Send',
            tooltip: 'Send',
            listeners: [
              {
                event: 'click',
                actions: [
                  {
                    component: 'Redirect',
                    path: '/foo/{{parent.parent.parent.fields.id.value}}'
                  }
                ],
              },
            ],
          },
        ],
      },
    },
  },
}