Reconfigure

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' },
  }),

createProperty

If you want to create a new property via the onDrop/addChild modal of a component, you can add the createProperty key to the configuration of a property option like this:

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

  property: property('Question', {
    value: '',
    ref: { id: '#numberInputProperty' },
    configuration: {
      createProperty: {
        type: CreatePropertyKind.INTEGER,
      },
      allowedKinds: ['INTEGER', 'PRICE'],
      disabled: true,
    },
    showInAddChild: true,
  }),

This key will show an input field instead of the property selector with the option to switch to the property selector. When the user fills in this input, a new property will be created with that name.

When a user wants to select an existing property, allowedKinds will ensure he can only select the defined kinds INTEGER or PRICE in this case.

createAction

To create a new action via the onDrop/addChild modal, you can add the createAction key to the ACTION_JS option. This will create a new action with an update step and permissions inherited from the page. When there are multiple property options on the same component, these will be added to the action as input variables and the assigned in the update step.

  component(
    'Form',
    {
      ref: { id: '#checkboxQuestionForm' },
      options: {
        ...formOptions,
        actionId: option('ACTION_JS', {
          label: 'Action',
          value: '',
          configuration: {
            createAction: {
              name: 'Name of the action',
              template: 'update',
              permissions: 'inherit',
            },
          },
        }),
      },
    }, []);