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.

Warning: Deleting the property you connected to an element will cause the element to lose its funcitonality.

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:

Panel ElementProperty Type
Checkbox GroupList of strings
DropdownString
Radio Button GroupString
RichTextString
SliderNumber
Text InputString
ThumbnailsString
Toggle SwitchBoolean

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 process of connecting the element to the property, you will be able to change the Display Name and Tooltip from the element's settings.

Property Settings:

Element settings automatically taken from prop settings:

Note:

Any values that you might have set in the element's settings panel prior to connecting it to a property, will be overridden by the property's settings.

Was this helpful?
Yes
No