Add child

Add child

With the add child option it is possible to define a set of prefabs (which can be added by the pagebuilder user) to a parent component.

For example, a dataTableColumn (child) to a dataTable (parent)

To define the children, you can create a variable in the structure options the like this:

  const childrenArray = [
    DataTableColumn({
      options: {
        ...dataTableColumnOptions,
        property: property('Property', {
          value: '',
          showInAddChild: true,
        }),
      },
    }),
  ],

Make sure that the DatableColumn and the dataTableColumnOptions are imported from structures like this:

  import { DataTableColumn } from '../../DataTableColumn';
  import { dataTableColumnOptions } from '../../DataTableColumn/options';

And property is imported from the @betty-blocks/component-sdk package like this:

  import { property } from '@betty-blocks/component-sdk';

To show the add child option in the component's options, you can add the addChild option to the structure's options.

First make sure that addChild is imported from the @betty-blocks/component-sdk package like this:

  import { addChild } from '@betty-blocks/component-sdk';

Then add the option like this:

  addChild: addChild('Add Column', {
    value: { children: childrenArray, addChildWizardType: 'ChildSelector' },
  }),

An example of the addChild can be found in the material-ui-component-set datatable: src/prefabs/structures/DataTable/options/index.ts

---

AddChildWizardType

The addChildWizardType determines what kind of modal should be opened. Currently it is possible to use the PropertySelector or the ChildSelector.

PropertySelector

This opens a modal with a property to select. For this modal it's required to have a parent component with a model selected (datacontainer, datatable) or else you cannot select a property.

ChildSelector

This opens a modal with options marked with the showInAddChild key. Any option of the defined child can be shown here.

---