Chip Based Data Filter Widget (Themable)
Introduction
The Chip Based Data Filter widget allows you to query and filter a large data set by using chip-based filters.
Watch the following video on how to use the widget to filter data in a Grid Advanced widget. To view the video in a larger window, click the video title.
The following images show an example of Chip Based Data Filter widget used in a mashup. You can see the widget before applying filters and the output chips after applying filters.
1. Before applying filters:
2. After applying filters: The filters appear as chips.
 | • The Chip Based Data Filter widget is available starting ThingWorx 9.1 and later versions. • This widget is available as a Standard inclusion in the platform and also as a web component if you import from the SDK. |
Data Format
There are two data models in the Chip Based Data Filter widget as follows:
• For Data:
You must create a Data Shape with the Field Definitions that are used as filter categories for the widget. These field definitions need to be mapped and each field represents a category that appears in the filter drop-down.
The following image shows an example of field definitions.
The following image shows an example filter category drop-down list in the widget based on the field definitions.
The field definitions can be configured on the widget using the configuration dialog box.
• For DaysContainingData:
This is an optional data model which is used when you want to show days containing data. You must create a Data Shape with a single Field Definition of base type DATETIME.
The following image shows an example field definition.
When you Filter by date in the widget, a dot indicator is displayed on the calendar for each day that has data. The following image shows an example:
Property Table
The properties of the Chip Based Data Filter widget follow:
Property Name | Description | Base Type | Default Value | Bindable? (Y/N) | Localizable? (Y/N) |
|---|---|---|---|---|---|
CategoryLabel | The text that is displayed above the drop-down list for the filter categories. | STRING | Filter by | Y | Y |
ConditionLabel | The text that is displayed above the drop-down list for the filter condition. | STRING | Condition | Y | Y |
CustomClass | Defines the CSS to the top div of the widget. When entering multiple classes, separate each class with a space. | STRING | n/a | Y | N |
Data | The infotable source data for the chip items that is displayed in the drop down filter. | INFOTABLE | n/a | Y | N |
DateOrder | Sets the format of the date that is displayed. The options are Auto, Day-Month-Year,Month-Day-Year, and Year-Month-Day. | STRING | Auto | Y | N |
DaysContainingData | The infotable source that contains date-time data for days with generated data values. A dot indicator is displayed on the calendar for each day with data. | INFOTABLE | n/a | Y | N |
FormatToken | Localizes the data format using the “DD-MM-YY” pattern. The format is case sensitive and overrides the DateOrder property. This syntax follows the ISO format. | STRING | n/a | N | Y |
LatitudeLabel | The text displayed above the input box for latitude when you filter by location. | STRING | Latitude | Y | Y |
LongitudeLabel | The text displayed above the input box for longitude when you filter by location. | STRING | Longitude | Y | Y |
Query | Allows you to set the JSON query that is used to retrieve the filtered data set. | QUERY | n/a | Y | N |
QueryChanged | Triggers an event when the query for Chip Based Data Filter widget is modified. | n/a | n/a | Y | N |
RangeEndValueLabel | The text displayed above the second input box when filtering a range of values. | STRING | Value 2 | Y | Y |
RangeStartValueLabel | The text displayed above the first input box when filtering a range of values. | STRING | Value 1 | Y | Y |
ShowAndHideFilters | Adds a link that allows you to show and hide filters that are added to the widget. | BOOLEAN | True | Y | N |
ShowAndOrOperator | Shows a drop-down list that allows you to combine multiple filters using “Or” and “And” logical operators between chips. | BOOLEAN | False | Y | N |
ShowCategoryListFilter | Adds a filter box to the drop-down list for the categories. You can type the text to apply a filter, which makes it easier to select items from a long list. | BOOLEAN | False | Y | N |
SortFilters | Sorts the list of data filters in an alphabetical order. To manually sort the data filters, disable this property, and rearrange the filters in the widget configuration dialog box. | BOOLEAN | True | Y | N |
TabSequence | The sequence number of the Chip Based Data Filter widget when you press the TAB. | NUMBER | n/a | Y | N |
UnitsLabel | The text displayed above the drop-down list which is used to set the units when filtering by location or date. | STRING | Units | Y | Y |
ValueLabel | The text that is displayed above the box which contains the value for the condition. | STRING | Value | Y | Y |