Components:Component Options - bettyblocks/cli GitHub Wiki

Contents

Component options appear in the sidebar of Page Builder when a component has is on the canvas. Component options are in the prefab configuration of a component.

Component option example

An example of a basic component option configuration is shown below:

{
  type: 'TEXT',
  label: 'Title',
  key: 'title',
  value: 'Type your title here...'
}

Component option fields

Type

The type of option will configure what data type the option will accept and return. It also determines what visual interface will represent the option (text field, checkbox, dropdown, etc.). In some cases, the visual representation of the option is configurable.

The type is one of ACTION, ACTION_INPUT, TEXT, NUMBER, TOGGLE, COLOR, FONT, SIZE, SIZES, ENDPOINT, MODEL, PROPERTY, FILTER, VARIABLE or CUSTOM. Subtypes include MULTILINE, UNIT, DROPDOWN and BUTTONGROUP.

The type is a capitalized string.

Label

The label represents the option name shown in the sidebar of Page Builder once the component is selected.

The label has type string.

Key

The 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.

The key has type string.

Value

The default value of the option.

The value has type any.

Advanced configuration

Advanced configuration can be placed in a configuration object inside the option config:

{
  type: 'TEXT',
  label: 'Content',
  key: 'content',
  value: 'Type your content here...',
  configuration: {
    as: 'MULTILINE',
    placeholder: 'Mobile number or email',
  }
}
{
  type: 'PROPERTY',
  label: 'Property',
  key: 'property',
  value: '',
  configuration: {
    dependsOn: 'model'
  }
}
{
  type: 'CUSTOM',
  label: 'Currency',
  key: 'currency',
  value: '€',
  configuration: {
    as: 'BUTTONGROUP',
    dataType: 'string',
    allowedInput: [
      {
        name: 'Euro',
        value: '€'
      },
      {
        name: 'Pound',
        value: '£'
      },
      {
        name: 'Dollar',
        value: '$'
      }
    ]
  }
}
{
  type: 'ENDPOINT',
  label: 'Page',
  key: 'linkTo',
  value: '',
  configuration: {
    condition: {
      type: 'SHOW',
      option: 'linkType',
      comparator: 'EQ',
      value: 'Internal',
    },
  },
},

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.

DependsOn

Configure this field if the option depends on another option. This option is needed to define a model for the property, properties, filter, and variable options.

The type is string.

DataType

The output type of a custom option.

The type is string.

AllowedInput

The possible values for a custom option.

The type is an array of objects with a name and a value.

Check the reference below for examples of these options.

Placeholder

The Placeholder field will render a placeholder in the text and variable option, as shown in the sidebar. You can use placeholders to specify a short hint that describes the expected value.

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.

allowPropertyName

The allowPropertyName is by default false and can be enabled in order to select a properties label through the variable and property selector.

{
  type: 'PROPERTY',
  label: 'Property',
  key: 'property',
  value: '',
  configuration: {
    dependsOn: 'model',
    allowPropertyName: true,
  }
}

allowFormatting

The allowFormatting is by default true and can be set to false in order to hide the formatting option in the split button. This would be usefull if you don't want the user to format a number for example.

{
  type: 'VARIABLE',
  label: 'Created at',
  key: 'created_at',
  value: [''],
  configuration: {
    allowFormatting: true,
  }
}

image

allowedKinds

When allowedKinds is defined in the configuration of an option, these property kinds will be available for the user to select in the property browser.

If allowedKinds is not defined, all the property kinds will be available. If allowedKinds is an empty array, all the property kinds will disabled.

{
  type: 'VARIABLE',
  label: 'Value',
  key: 'value',
  value: [''],
  configuration: {
    allowedKinds: ['INTEGER', 'DECIMAL'],
  }
}

image

Option reference

Overview of all the options.

Text

Text option

{
  type: 'TEXT',
  label: 'Title',
  key: 'title',
  value: 'Type your title here...'
}

Type: string

Output: 'Type your title here...'

Multiline

Multiline option

{
  type: 'TEXT',
  label: 'Content',
  key: 'content',
  value: 'Type your content here...',
  configuration: {
    as: 'MULTILINE'
  }
}

Type: string

Output: 'Type your content here...'

Number

Number option

{
  type: 'NUMBER',
  label: 'Amount',
  key: 'amount',
  value: 27
}

Type: number.

Output: 27.

Toggle

Toggle option

{
  type: 'TOGGLE',
  label: 'Active',
  key: 'active',
  value: true
}

Type: boolean.

Output: true

Color

Color option

{
  type: 'COLOR',
  label: 'Color',
  key: 'color',
  value: 'Primary'
}

Type: string.

Output: Primary.

Definitions:

enum Style {
  White,
  Light,
  Medium,
  Dark,
  Black,
  Primary,
  Secondary,
  Success,
  Info,
  Warning,
  Danger,
  Accent1,
  Accent2,
  Accent3
}

Helper:

{
  color: ({ options: { color } }) => style.getColor(color)
}

Font

Font option

{
  type: 'FONT',
  label: 'Font',
  key: 'font',
  value: 'Title3'
}

Type: string.

Output: 'Title3'.

Definitions:

enum Font {
  Title1,
  Title2,
  Title3,
  Title4,
  Title5,
  Title6,
  Body1,
  Body2
}

Helpers:

{
  fontFamily: ({ options: { font } }) => style.getFontFamily(font),
  fontSize: ({ options: { font } }) => style.getFontSize(font),
  textTransform: ({ options: { font } }) => style.getTextTransform(font),
  letterSpacing: ({ options: { font } }) => style.getLetterSpacing(font),
  [`@media ${B.mediaMinWidth(480)}`]: {
    fontSize: ({ options: { font } }) =>
      style.getFontSize(font, 'Mobile')
  },
  [`@media ${B.mediaMinWidth(768)}`]: {
    fontSize: ({ options: { font } }) =>
      style.getFontSize(font, 'Portrait')
  },
  [`@media ${B.mediaMinWidth(1024)}`]: {
    fontSize: ({ options: { font } }) =>
      style.getFontSize(font, 'Landscape')
  },
  [`@media ${B.mediaMinWidth(1200)}`]: {
    fontSize: ({ options: { font } }) =>
      style.getFontSize(font, 'Desktop')
  }
}

Icon

The ICON type provides an icon selector in order to easily select one out of the available icons within the platform.

Icon option

{
  label: "Icon",
  key: "icon",
  value: "Check",
  type: "ICON",
}

Type: string

Output: 'Check'

Size

Size option

{
  type: 'SIZE',
  label: 'Size',
  key: 'size',
  value: 'M'
}

Type: string

Output: 'M'

Definitions:

enum Magnitude {
  XS,
  S,
  M,
  L,
  XL
}

Helper:

{
  margin: ({ options: { size } }) => style.getSpacing(size),
  [`@media ${B.mediaMinWidth(480)}`]: {
    fontSize: ({ options: { size } }) =>
      style.getSpacing(size, 'Mobile')
  },
  [`@media ${B.mediaMinWidth(768)}`]: {
    fontSize: ({ options: { size } }) =>
      style.getSpacing(size, 'Portrait')
  },
  [`@media ${B.mediaMinWidth(1024)}`]: {
    fontSize: ({ options: { size } }) =>
      style.getSpacing(size, 'Landscape')
  },
  [`@media ${B.mediaMinWidth(1200)}`]: {
    fontSize: ({ options: { size } }) =>
      style.getSpacing(size, 'Desktop')
  }
}

Sizes

Sizes option

{
  type: 'SIZES',
  label: 'Margin',
  key: 'margin',
  value: ['M', 'M', 'M', 'M']
}

Type: Array<string>

Output: ['M', 'M', 'M', 'M']

Helper:

const convertSizes = sizes =>
  sizes.map(size => style.getSpacing(size)).join(' ');
{
  margin: ({ options: { margin } }) => convertSizes(margin)
}

Unit

Unit option

{
  type: 'SIZE',
  label: 'Width',
  key: 'width',
  value: '100%',
  configuration: {
    as: 'UNIT'
  }
}

Type: string

Output: '100%'

Endpoint

Endpoint option

{
  type: 'ENDPOINT',
  label: 'Endpoint',
  key: 'endpoint',
  value: ''
}

Type: string.

Output: '381489cd23174a5d80dfc620628d68fc'

Definitions: type id = string

Model

Model option

{
  type: 'MODEL',
  label: 'Model',
  key: 'model',
  value: ''
}

Type: string.

Output: '917e332a484249348d2dabadfc1506bf'.

Definitions: type id = string.

Models

Model option

{
  type: 'MODELS',
  label: 'Select Models',
  key: 'models',
  value: [],
}

Type: Array<string>

Output: ['8e952216c538439a96eff262a84c73f5', '2087e23cb9a34ae5878b607fd8f23d85']

Authentication profile

Model option

{
  type: 'AUTHENTICATION_PROFILE',
  label: 'Auth profile',
  key: 'authProfile',
  value: ''
}

Type: string.

Output: '917e332a484249348d2dabadfc1506bf'.

Definitions: type id = string.

Property

Property option

{
  type: 'PROPERTY',
  label: 'Property',
  key: 'property',
  value: '',
  configuration: {
    dependsOn: 'model'
  }
}

Type: string

Output: '76c42fd76fa74227af392bdd6c7906e5'

Definitions: type id = string

Filter

Filter option

{
  type: 'FILTER',
  label: 'Filter',
  key: 'filter',
  value: {},
  configuration: {
    dependsOn: 'model'
  }
}

Type: {[property: string]: {[operator: string] : string | number | {}}

Output: {'097941e0b9894decb9e19f0e336632b9', {eq: 'green'}}

Definitions:

Variable

Variable option

{
  type: 'VARIABLE',
  label: 'Variable',
  key: 'variable',
  value: ['Some text...'],
  configuration: {
    dependsOn: 'model'
  }
}

Type: Array<Variable|string>

Output: ['Prefix text', { type: 'PROPERTY', id: '3b23a74b4fdf47d090ec2fb5d7128c76' }, 'Postfix text']

Definitions:

interface Variable {
  type: string;
  id: string;
}

Action

Action option

{
  label: 'Action',
  key: 'actionId',
  value: '',
  type: 'ACTION',
}

or

{
  label: 'Action',
  key: 'actionId',
  value: '',
  type: 'ACTION',
  configuration: {
    apiVersion: 'v1',
  },
}

Type: string

Output: 381489cd23174a5d80dfc620628d68fc

Action input

Action input option

{
  label: 'Input variable',
  key: 'actionInputId',
  value: '',
  type: 'ACTION_INPUT',
}

Type: string

Output: 381489cd23174a5d80dfc620628d68fc

Action input objects

Model option

{
  type: 'ACTION_INPUT_OBJECTS',
  label: 'Objects to pass to action',
  key: 'actionModels',
  value: []
}

This option is used to pass multiple objects to an action. If you select a model, an object input variable for this model is generated on the action. For this option to work, you will need an ACTION or FORMDATA option in the component as well.

Type: Array<string>

Output: ['917e332a484249348d2dabadfc1506bf', 'ea39e88ba3f74bce91f949ae63b6be70']

Formdata

Formdata option

{
  value: {
    customModelId: null,
    actionId: null,
    modelId: null,
    variableId: null,
  },
  label: 'Action',
  key: 'formData',
  type: 'FORM_DATA',
  configuration: {
    apiVersion: 'v1',
  },
},

This option is used by our form. It generates a custom model, action, and custom model variable, to handle the form data. Model ID is filled when the user chose to base the form on a model.

Type: FormDataOptionValue

Output:

{
  customModelId: "d3adec164baf46ed963bf118aab6ddb0",
  actionId: "d73083735ea74c26bc1322ae7df8159d",
  modelId: "6c719d701ccc4f1d8f71b541ee682a0f",
  variableId: "3f0dc6d53986477796b0162912948a46"
}

CustomModelAttribute

Custom model attribute option

{
  value: { label: ['Label'] },
  label: 'Label',
  key: 'customModelAttribute',
  type: 'CUSTOM_MODEL_ATTRIBUTE',
  configuration: {
    allowedTypes: ['string'],
  },
},

We use this option in our form fields. The label in the value is used to set the default label value for the form field. allowedTypes is used for describing the type of data that can be send with the form field. We support string, decimal, integer, date, date_time, file and boolean here.

After generating the custom model attribute, the value of this option will be extended with the id of this custom model attribute.

Type: CustomModelAttributeOptionValue

Output:

{
  id: "d3adec164baf46ed963bf118aab6ddb0",
  label: ["Label"],
}

Custom Dropdown

Custom dropdown option

{
  type: 'CUSTOM',
  label: 'Align',
  key: 'align',
  value: 'left',
  configuration: {
    as: 'DROPDOWN',
    dataType: 'string',
    allowedInput: [
      {
        name: 'Left',
        value: 'left'
      },
      {
        name: 'Center',
        value: 'center'
      },
      {
        name: 'Right',
        value: 'right'
      }
    ]
  }
}

Type: string

Output: 'left';

Custom Button Group

Custom button group option

{
  type: 'CUSTOM',
  label: 'Currency',
  key: 'currency',
  value: '€',
  configuration: {
    as: 'BUTTONGROUP',
    dataType: 'string',
    allowedInput: [
      {
        name: 'Euro',
        value: '€'
      },
      {
        name: 'Pound',
        value: '£'
      },
      {
        name: 'Dollar',
        value: '$'
      }
    ]
  }
}

Type: string

Output: '€';

Display logic

Display logic option

{
 type: 'DISPLAY_LOGIC',
 label: 'Display logic',
 key: 'displayLogic',
 value: {},
}

Type: { [group: string]: [[property: string]: {[operator: string] : string | number | {}}] }

Output: { [_AND]: [{'097941e0b9894decb9e19f0e336632b9', {eq: 'green'}}] }

Component option helpers

An option styling helper is available to retrieve theme values from option data automagically.

Setup styling helper and examples

Setup of the style object and all possible methods.

(() => ({
  name: 'Custom',
  icon: 'CustomIcon',
  type: 'CUSTOM',
  category: 'CUSTOM',
  orientation: 'HORIZONTAL',
  allowedTypes: [],
  jsx: (() => {
    return <section className={classes.root}>{options.content}</section>;
  })(),
  styles: B => theme => {
    const style = new B.Styling(theme);

    return {
      root: {
        // Examples of all style getter methods
        color: ({ options: { color } }) => style.getColor(color), // Primary -> rgba(63, 81, 181, 1)
        margin: ({ options: { margin } }) => style.getSpacing(margin), // M -> 0.5rem
        margin: ({ options: { margin } }) => style.getSpacing(margin, 'Mobile'), // M -> 0.5rem
        margin: ({ options: { margin } }) => style.getSpacing(margin, 'Portrait'), // M -> 0.5rem
        margin: ({ options: { margin } }) => style.getSpacing(margin, 'Landscape'), // M -> 1rem
        margin: ({ options: { margin } }) => style.getSpacing(margin, 'Desktop'), // M -> 1rem
        fontSize: ({ options: { font } }) => style.getFontSize(font), // Title3 -> 1.6875rem
        fontSize: ({ options: { font } }) => style.getFontSize(font, 'Mobile'), // Title3 -> 1.6875rem
        fontSize: ({ options: { font } }) => style.getFontSize(font, 'Portrait'), // Title3 -> 2.5rem
        fontSize: ({ options: { font } }) => style.getFontSize(font, 'Landscape'), // Title3 -> 2.75rem
        fontSize: ({ options: { font } }) => style.getFontSize(font, 'Desktop'), // Title3 -> 3rem
        fontFamily: ({ options: { font } }) => style.getFontFamily(font), // Title3 -> Roboto, sans-serif
        fontWeight: ({ options: { font } }) => style.getFontWeight(font), // Title3 -> 400
        textTransform: ({ options: { font } }) => style.getTextTransform(font), // Title3 -> inherit
        letterSpacing: ({ options: { font } }) => style.getLetterSpacing(font), // Title3 -> normal
        borderSize: ({ options: { border } }) => style.getBorderSize(border), // M -> 0.125rem
        borderRadius: ({ options: { border } }) => style.getBorderRadius(border), // M -> 0.125rem
        width: ({ options: { icon } }) => style.getIconSize(icon), // M -> 3rem
      }
    };
  }
}))();
⚠️ **GitHub.com Fallback** ⚠️