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 run time changes to the CustomClass.
You can set isLocalizable to true, but it property does not work with localization tokens.
Was this helpful?