This section describes binding a widget component to a widget to make it interactive when used in an app.
When you have added a UI component to a widget in the properties panel builder, to make the component usable and interactive when the widget is used in an app, you have to bind the component to the widget. To do this, you must insert a reference to the component in the HTML for that widget.
The code for the reference is generated by the properties panel builder when you configure the component. Then, in the HTML editor, you use the insert tool to place the reference code to each property of the components you added in the properties panel builder.
Do the following:
Close the properties panel builder if necessary, and if you have not already done so, open the widget you want to bind components to.
In the HTML editor, place the cursor at the point where you want to insert the reference, and click Insert.
The insert tool dialog opens.
Click the Property references tab.
In the drop-down list, there is an item for every UI component in the properties panel builder. The names in the drop-down list match the labels they were given when configured in the properties panel builder. The General component refers to the properties: title, subtitle, and footnote under the Appearance section.
From the drop-down list, select a component name.
The number of available references to insert is shown in parentheses at the top of the dialog.
You will see the references and their corresponding default values, if any were set.
Click on a reference, then click Insert with curly braces. You can use Insert if the curly braces are already in the HTML.
The reference code for the property you selected is added to the HTML for the widget.Note: You need to insert the reference for each of the properties listed for the component you selected. If the reference code for a property is not inserted, that property will not be usable in the app.
Click Save in the toolbar.
The widget is saved with the customizations you made. The component in the widget will now be bound to the component in properties panel in the app in which it is used.
Binding data to widgets for a description of binding data to widgets.