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:
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 Element | Property Type |
---|---|
Checkbox Group | List of strings |
Dropdown | String |
Radio Button Group | String |
RichText | String |
Slider | Number |
Text Input | String |
Thumbnails | String |
Toggle Switch | Boolean |
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:
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.