Listview Buttons
Modero X Series G5 touch panels and TPDesign5 (v1.2.0, build 47 or greater) support a new button type called Listview buttons. Listview buttons provide the ability to display a listing of items from a dynamic data source on a G5 touch panel. Dynamic data can be created either using an XPort server, NetLinx code or a generic CSV file. The creator of the data can specify how many fields comprise a record and the format of those fields. As many records as necessary can be specified.
NOTE: Dynamic data defines data f iles/feeds URL where the data can be loaded by the touch panel at runtime via HTTP (GET) or HTTPS (GET) transport protocols.
This data can be used to populate a Listview button displayed on a G5 touch panel, where the end user can scroll or search through the list and make a selection. Once a selection has been made, a CUSTOM_EVENT is raised in the NetLinx Master to retrieve the data fields comprising the selected record.
NOTE: Listview buttons will not work with NetLinx Masters that are in DoD Security Mode. Refer to the NX-Series Controllers, Enova DGX, Enova DVX, Massio WebConsole & Programming Guide for information on security mode settings on Central Controllers.
Refer to the
Listview Buttons & Dynamic Data section on page 104
for working demos of creating Listview buttons using three types of data source files:
Creating Listview Buttons
To create a new Listview button:
- Open the Page, Popup Page or Sub-Page that the button will be added to (double-click on the page in the Workspace window (Pages tab) to open the page and bring it into edit focus).
- In the Design View, select the Page, Popup Page or Sub-Page to which you want to add the button.
Use the Button Draw tool to create a new button. See
Creating New Buttons on page 66
for details.
- In the General tab of the Properties window, set the Type property to Listview.
This selection updates the Properties window to represent properties specific to this button type.
- Set the button properties as desired by editing the General, Programming, States and Events properties in the Properties window.
- Select File > Save to save your changes.
Listview Buttons - General Properties
Once you have created a Listview button, you can use the General tab of the Properties window to set/edit general (non-state oriented) button properties. To edit any of the properties in the table, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both. The following General button properties are supported for Listview buttons:
| Listview Buttons - General Properties |
|---|
Type
| see
page 247
| | |
Name
| see
page 242
| | |
Description
| see
page 236
| | |
Left
| see
page 238
| | |
Top
| see
page 246
| | |
Width
| see
page 247
| | |
Height
| see
page 237
| | |
Disabled
| see
page 236
| | |
Hidden
| see
page 237
| | |
Listview Components
| see
page 239
| | |
Item Height
| see
page 238
| | |
Listview Columns
| see
page 239
| | |
Listview Item Layout
| see
page 241
| | |
Primary Partition (%)
| see
page 242
| | |
Secondary Partition (%)
| see
page 245
| | |
Filter Enabled
| see
page 236
| | |
Filter Height
| see
page 237
| | |
Alphabet Scrollbar
| see
page 235
| | |
Dynamic Data Source
| see
page 236
|
Listview Buttons - Programming Properties
Once you have created a Listview button, you can use the Programming tab of the Properties window to set/edit programming- oriented button properties. To edit any of the properties, click in the right-hand table cell to activate the field. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both.
The following Programming properties are supported for Listview buttons:
| Listview Buttons - Programming Properties |
|---|
Address Port
| see
page 247
| | |
Address Code
| see
page 249
|
NOTE: Maximum command, string and text length = 4096 characters.
Listview Buttons - States Properties
Once you have created a Listview button, you can use the States tab of the Properties window to set/edit state-oriented button properties. To edit any of the listed button properties, click on an item in the right-hand column to activate the field. Depending on the item selected, you can either set the item manually, select from a drop-down menu, or both.
The State tab of the Properties window works in conjunction with the State Manager window. Note that if the State Manager is not displayed, or if no state(s) are selected in the State Manager, the States tab shows a list of all states associated with the selected button.
Each state represented in the States tab is a collapsed folder containing the state properties for that particular state. Click the + symbol to expand each folder. If you select a state (or multiple states) in the State Manager, then the States tab only represents the selected state(s).
Listview buttons use three states:
- All States - Use the All States option to apply any changes you make to all states on the selected button. Note that if you have multiple buttons selected (Shift+click to select multiple buttons a page), the All States option only affects states for the button that has Edit Focus. The button with edit focus would be the last one selected, and is indicated by having red- colored square handles (as opposed to the black squares that indicate that a button is selected, but does not currently have edit focus).
- Default - This represents the non-selected state of the list items in the Listview button.
- Selected - This represents the selected state of the list items in the Listview button. The following State properties are supported for Listview buttons (for each state).
| Listview Buttons - States Properties |
|---|
Border Color
| see
page 251
| | |
Fill Type
| see
page 252
| | |
Fill Color
| see
page 252
| | |
Fill Gradient Colors
| see
page 252
| | |
Gradient Radius
| see
page 253
| | |
Gradient Center X%
| see
page 253
| | |
Gradient Center Y%
| see
page 253
| | |
Text Color
| see
page 254
| | |
Text Effect Color
| see
page 254
| | |
Overall Opacity
| see
page 253
| | |
Font
| see
page 252
| | |
Font Size
| see
page 253
| | |
Text Effect
| see
page 254
| | |
Secondary Font
| see
page 253
| | |
Secondary Font Size
| see
page 253
|
Listview Buttons - Events Properties
Modero X Series panels support Gestures for on-screen navigation. Gestures can be used for navigating the panel UI. For example, a "Swipe" gesture can invoke a page flip when the user swipes a finger across the screen. Gestures are presented in TPDesign5 under the Events tab of the Properties window.
To choose a particular property for a button, highlight the row and click the Browse button (...) to open the Edit Event Actions dialog. Use this dialog to add actions instigated by the gesture selected. Click the Add Action button to select between a Send Command or a command string, and enter the command or string in the field. When finished, click OK.
The following Events are supported for Listview buttons:
| Listview Buttons - Events Properties |
|---|
Item Selected
| see
page 258
| | |
Scrollbar Begin
| see
page 258
| | |
Scrollbar End
| see
page 258
|