Reconfigure - bettyblocks/cli GitHub Wiki

Reconfigure

To reconfigure the children in the parent, you can enable this with the reconfigure option. This gives the user a clear overview of all children in the parent.

  const childrenArray = [
    DataTableColumn({
      options: {
        ...dataTableColumnOptions,
        property: property('Property', {
          value: '',
          showInReconfigure: 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 reconfigure option in the component's options, you can add the reconfigure option.

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

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

Then add the option like this:

  reconfigure: reconfigure('Reconfigure', {
    value: { children, reconfigureWizardType: 'PropertiesSelector' },
  }),

---

reconfigureWizardType

To show a modal for displaying the reconfigure, a reconfigureWizardType must be described. This determines what kind of modal should be opened. Currently it is only possible to use PropertiesSelector or ChildrenSelector.

PropertiesSelector

This shows a modal where the user can only select properties of the selected model of the parent component.

ChildrenSelector

This shows a modal that displays a list of children and their options. These options can be marked with the key showInReconfigure:

---

Wrapper in reconfigure

The ChildrenSelector and the ChildSelector can also handle a wrapper as a child.

The children array would look like this:

  const childrenArray = [
    wrapper(
      {
        label: 'Wrapper',
        options: {
          buttonText: linked({
            label: 'Button text',
            value: {
              ref: {
                componentId: '#button',
                optionId: '#buttonText',
              },
            },
            showInReconfigure: true,
            showInAddChild: true,
          }),
        },
      },
      [
        Box({}, [
          Button(
            {
              ref: { id: '#button' },
              options: {
                ...buttonOptions,
                buttonText: variable('Button text', {
                  value: ['Button'],
                  ref: { id: '#buttonText' },
                }),
              },
            },
            [],
          ),
        ]),
      ],
    ),
  ],

And the options like this:

  reconfigure: reconfigure('Reconfigure', {
    value: { children: childrenArray, reconfigureWizardType: 'ChildrenSelector' },
  }),
  addChild: addChild('Add Wrapper', {
    value: { children: childrenArray, addChildWizardType: 'ChildSelector' },
  }),