Skip to content

Accessing Nested Components

Geoff Cox edited this page Sep 27, 2020 · 2 revisions

You can use MSON's dot notation to access nested components and customize their functionality.

Let's say you want to specify custom buttons when using a RecordList component. The RecordList has a nested CollectionField that can be accessed at fields.collection. You could then use fields.collection.buttonsFactory to define a buttons factory, e.g.:

{
  name: 'app.Contacts',
  component: 'RecordList',
  label: 'Forms',

  baseFormFactory: {
    component: 'Factory',
    product: {
      component: 'app.Contact'
    }
  },

  'fields.collection.buttonsFactory': {
    component: 'Factory',
    product: {
      component: 'ButtonField',
      icon: 'Edit',
      tooltip: 'Edit',
      listeners: [
        {
          event: 'click',
          actions: [
            {
              component: 'Redirect',
              path: '/contact/{{parent.fields.id.value}}/edit'
            }
          ]
        }
      ]
    }
  }
}