OptionRef

The OptionRef allows you to inherit values/information from a property option via the addChild/onDrop popup.

This way you can configure your components to distribute information of a property to multiple (children) components.

Id

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

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

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

Inherit

The inherit key allows you to choose what to inherit from the selected property.

---

Name

This will use the database name of the property.
In case of the id property, id (snake_case) will be set

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

Screenshot id property:

---

Label

This will use the label of the model property.
In case of the id property, Id (with a capital letter) will be set

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

Screenshot id property:

---

Array with object

In case of a variable option, you want to set the value to an array with object, so it contains a nugget of the selected property.

type: 'PROPERTY':

optionRef: {
  sourceId: '#componentPropertyRef',
  inherit: [{ name: '$name', id: '$id', type: 'PROPERTY' }]
}

Variable option:

type 'PROPERTY_LABEL':

optionRef: {
  sourceId: '#componentPropertyRef',
  inherit: [{ name: '$name', id: '$id', type: 'PROPERTY_LABEL' }]
}

Variable option:

Use case

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

• The property label to a text component to show which property it is
• The property value to another text component to show the value of the property
• And the property 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