OptionRef

The OptionRef allows you to inherit values/information from a property option via the addChild/onDrop popup.
This way you can configure your combined components (children) to distribute information of that property to multiple components.

For example:
When you click the addChild button you only want to show a property select and save the property information to multiple components:

• The label to a text component to show which property it is
• The value to another text component to show the value of the property
• And the value again to a conditional component so that it only shows your components if the value is not empty

Component tree:

AddChild:

Component in canvas:

Component in runtime:

Component (with property selector)

Component(
  {
    options: {
      ...componentOptions,
      property: property('Property', {
        value: '',
        showInAddChild: true,
        optionRef: {
          id: '#componentPropertyRef',
        },
      }),
    },
  },
  [],
)

This component has:

• A property option to select and save the property
• A showInAddChild key to show the property selector in the addChild popup
• An optionRef key with the id #componentPropertyRef to identify the information source

Text component (to inherit the property label)

Text(
  {
    options: {
      ...textOptions,
      content: variable('Content', { 
        value: [],
        optionRef: {
          sourceId: '#componentPropertyRef',
          inherit: [{ name: '$name', id: '$id', type: 'PROPERTY_LABEL' }],
        },
      }),
    }
  }, 
  []
)

This component has:

• A content option to store the label text
• An optionRef with:
  • a sourceId with #componentPropertyRef to point to the Component property option
  • an inherit with an array to say that it should inherit the label of the property

Text component (to inherit the property value)

Text(
  {
    options: {
      ...textOptions,
      content: variable('Content', { 
        value: [],
        optionRef: {
          sourceId: '#componentPropertyRef',
          inherit: [{ name: '$name', id: '$id', type: 'PROPERTY' }],
        },
      }),
    }
  }, 
  []
)

This component has:

• A content option to store the value
• An optionRef with:
  • a sourceId with #componentPropertyRef to point to the Component property option
  • an inherit with an array to say that it should inherit the value of the property

Conditional component (to inherit the property value)

Conditional(
  {
    options: {
      ...conditionalOptions,
      left: variable('Conditional property', {
        value: [],
        optionRef: {
          sourceId: '#componentPropertyRef',
          inherit: [{ name: '$name', id: '$id', type: 'PROPERTY' }],
        },
      }),
    }
  }, 
  [],
)

This component has:

• A variable option to store the property value
• An optionRef with:
  • a sourceId with #componentPropertyRef to point to the Component property option
  • an inherit with an array to say that it should inherit the value of the property

Id key

Make sure that for every property you want to distribute, the id key is unique. A good practice is to combine it like this {component}{option}ref and optionally add a unique id

optionRef: {
  id: '#componentPropertyRef',
},

sourceId key

The sourceId key is related to the id key where you want to inherit from. You can have multiple option with the same sourceId key, to inherit information from the same source

optionRef: {
  sourceId: '#componentPropertyRef',
  inherit: 'label'
}

Inherit key

The inherit key can have different values:

• name: this will use the database name of the property. for example: In case of the id property, id will be set
• label: this will use the name of the model property. for example: In case of the id property, Id (with a capital letter) will be set
• [{ name: '$name', id: '$id', type: 'PROPERTY' }]: This can be used for variable options to store the property value as an object instead of a hardcoded text.
• [{ name: '$name', id: '$id', type: 'PROPERTY_LABEL' }]: This can be used for variable options to store the property label as an object instead of a hardcoded text.