CustomClass Property
Mashups and many other widgets provide a CustomClass property in the properties panel. The value is space delimited to pass in multiple CSS classes.
The CustomClass property is available to all widgets that support Custom CSS and the value is applied to the bounding box div. Some widgets that offer the CustomClass property are as follows:
• Button
• Checkbox
• Label
• Radio Button
• Textbox
• Text Area
• List
• Image
• Web frame
• Navigation
• Link
• Data filter
• Grid
• Slider
• Contained mashup
• Repeater
• Panel
• Mashup
• Layout
• Bubble Chart
• Event Chart
• Label Chart
• Pie Chart
• Proportional Chart
• Range Chart
• Time Series Chart
• Dashboard
• Data Export
• Date Time Picker
• Divider
• Entity Picker
• Fieldset
• File Upload
• Folding Panel
• Gauge
• LED Display
• Logout Button
• Masked Textbox
• Menu
• Numeric Entity
• Property Display
• Remote Access
• Shape
• Tabs
• Tabs- Responsive
• Tag Cloud
• Time Selector
• Tree
The CustomClass property is also bindable. The value is updated dynamically by services, mashup parameters, and other widgets.
CSS Extensions
The CSS files can be added to the ThingWorx through extensions. If CSS is included in the metadata.xml file, the CSS is merged into the combined run time CSS.
The CustomClass can be added to the extension widgets as well. You can add the property to the widget's IDE JavaScript as follows:
this.widgetProperties = function () {
return {
'name': 'My Extension Widget',
'description': 'Extension widget that was imported.',
'category': ['Navigation'],
'defaultBindingTargetProperty': 'Data',
'supportsAutoResize': true,
'properties': {
'CustomClass': {
'description': 'Custom Class',
'baseType': 'STRING',
'isLocalizable': false,
'isBindingSource': true,
'isBindingTarget': true
},
• Set isBindSource and isBindingTarget to true to allow dynamic runtime changes to the CustomClass.
• You can set isLocalizable to true, but it property does not work with localization tokens.