Components:Component Wrapper Options - bettyblocks/cli GitHub Wiki

Contents

• Wrapper option example
• Wrapper option fields
• Advanced configuration

Wrapper options appear in the sidebar of the Page Builder when a wrapper component is selected on the canvas. Wrapper options are defined in the prefab structure of a component of type WRAPPER.

Wrapper option example

An example of a linked option configuration is shown below:

{
  key: '0',
  type: 'LINKED_OPTION',
  configuration: {
    condition: {
      type: 'HIDE',
      option: '1',
      comparator: 'EQ',
      value: false,
    },
  },
  value: {
    ref: {
      componentId: '#componentId1',
      optionId: '#componentId1OptionId1',
    },
  },
},

{
  key: '0',
  type: 'LINKED_PARTIAL',

  value: {
    ref: {
      componentId: '#componentId1',
    },
  },
},

Wrapper option fields

type

type field only accepts LINKED_OPTION or LINKED_PARTIAL as a valid type. This type will search the referenced option from your Prefab structure and displays this in the Page Builder sidebar.

label (optional)

label represents the text shown above the option input in the sidebar of Page Builder once the component is selected.

When label is not set it will fallback to the label of the referenced option.

label is of type string.

Key

key will refer to the option value inside a component. For example, the value of the option with key "title" will be available in a component as options.title.

key is of type string.

Value

The default value of the option for a linked option this is set through the ref key which is resolved in the PageBuilder to the Id its being referenced to.

Read more about References.

The value has type LinkedOptionRef for LINKED_OPTION or LinkedPartialRef for LINKED_PARTIAL

interface LinkedOptionRef {
  componentId: string;
  optionId: string;
  ref?: {
    componentId: string;
    optionId: string;
  };
}

interface LinkedPartialRef {
  componentId: string;
  ref?: {
    componentId: string;
  };
}

configuration

As

The As field will render an alternative visual representation of the option. Text and variable can be rendered multiline, size as a unit, and custom options as a dropdown or button group.

The type is string.

Condition

The condition object allows you to conditionally show/hide a component option based on another component option's value. The condition object consists of the following parts:

• type, which can either be 'SHOW' or 'HIDE.'
• option, string referring to the key of the option that you want to relate.
• comparator, which at this moment can only be 'EQ.'
• value, the value you want to compare.