OptionRef

The OptionRef allows you to inherit information from a property option via the addChild popup.
This way you can configure your components to distribute information of a property to multiple components.

Source & Receiver

When using the OptionRef, you need at least two components:

1. A component with a property option (the source):

   Component(
     {
       options: {
         ...componentOptions,
         property: property("Property", {
           value: "",
           showInAddChild: true,
   
           // property optionRef with the id #componentPropertyRef
           optionRef: {
             id: "#componentPropertyRef",
           },
         }),
       },
     },
     []
   );

2. A component which receives property info (the receiver):

   Text(
     {
       options: {
         ...textOptions,
         contentOption: variable("Content", {
           value: [],
   
           // inherit 'name' from the option with optionRef id #componentPropertyRef
           optionRef: {
             sourceId: "#componentPropertyRef",
             inherit: "name",
           },
         }),
       },
     },
     []
   );

Keys

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.
These are the current available inherit values you can use:

1. 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:
   

2. 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:
   

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

   • type: 'PROPERTY':

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

     This will create a nugget which inherits the property value:
     

   • type 'PROPERTY_LABEL':

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

     This will create a nugget which inherits the property label:
     

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