Tips for Creating Customized ThingWorx Widgets
This section provides tips for creating customized widgets.
• Use this.jqElement to limit your element selections. This reduces the chance of introducing unpredictable behavior in the solution if there are duplicate IDs and classes in the DOM.
Use this.jqElement, as shown in the sample code to limit your element selections:
this.jqElement.find('.add-btn').click(function(e){
...do something...});
• Logging—You can create logging events for debugging mashups. It is recommended that you use the following methods to create log messages in the runtime environment:
◦ TW.log.trace(message[, message2, ... ][, exception])
◦ TW.log.debug(message[, message2, ... ][, exception])
◦ TW.log.info(message[, message2, ... ][, exception])
◦ TW.log.warn(message[, message2, ... ][, exception])
◦ TW.log.error(message[, message2, ... ][, exception])
◦ TW.log.fatal(message[, message2, ... ][, exception])
Logs are available under the Monitoring menu. Select a log to open the log window to view the log messages. If the browser you use supports console.log(), then the messages also appear in the debugger console.
• Formatting—If you have a property with base type set as STYLEDEFINITION, you can get the style information using the following code:
var formatResult = TW.getStyleFromStyleDefinition(
widgetProperties['PropertyName']);
If you have a property of base type set as STATEFORMATTING, use the following code:
var formatResult = TW.getStyleFromStateFormatting({
DataRow: row,
StateFormatting: thisWidget.properties['PropertyName']
});
In both cases formatResult is an object with the following defaults:
{
image: '',
backgroundColor: '',
foregroundColor: '',
fontEmphasisBold: false,
fontEmphasisItalic: false,
fontEmphasisUnderline: false,
displayString: '',
lineThickness: 1,
lineStyle: 'solid',
lineColor: '',
secondaryBackgroundColor: '',
textSize: 'normal'
};