Connect Panel Elements to Widget Properties With No Code

Custom panels are often used to get input from users and set the widget API properties accordingly. For example, in a shopping widget, users could turn a "special sale" property on and off, through a toggle element in the widget's panel. Note that you could also do this with code.

To connect a panel element to a widget property:

1. Click the panel element you want to connect to a property. In our example, we use a slider.
2. Click Connect Slider to in the Inspector panel (the name of the element changes according to what you selected).
3. Select the property you want to connect to this element. Note that you'll only see properties that match that element's type (see element and property types).
4. At this point, you can also create a new property if you need to.

Element and property types

You can only connect panel elements to properties whose type matches matches the element's input behavior. For example, a toggle element can connect to a boolean property, because they both represent a choice between two options.

Here is a list of panel elements and the property types they can connect to:

Syncing property and element settings

When you connect a panel element to a property, the property's settings, which you have set in the New Property panel, will automatically apply to the matching element settings. For example, when connecting this TextProp property to a text input element, the title, tooltip and default text were automatically taken from what we defined for the property. After you complete the connection process, you can go ahead and change these settings through the element's settings panel, if you need to.

Property Settings:

Element settings automatically taken from prop settings: