Example of Creating a Customized ThingWorx Widget
This section describes how to create a customized widget and handle it at runtime.
Mashup Builder Code
The <widgetname>.ide.js file must implement widget functions to work with Mashup Builder. See the section Widget API: Mashup Builder, for more information on the functions available for widgets. Widgets can declare widget properties, services, and events in the functions.
The following sample code shows how to create a widget. The name of the widget is MyWidget, which has a bindable string property called DisplayText.
TW.IDE.Widgets.mywidget = function () {
this.widgetIconUrl = function() {
return "../Common/extensions/MyExtension/ui/" +
"mywidget/mywidget.ide.png";
};

this.widgetProperties = function () {
return {
name : "My Widget",
description : "An example widget.",
category : ["Common"],
properties : {
DisplayText: {
baseType: "STRING",
defaultValue: "Hello, World!",
isBindingTarget: true
}
}
}
};

this.renderHtml = function () {
var mytext = this.getProperty('MyWidget Property');
var config = {
text: mytext
}

var widgetTemplate = _.template(
'<div class="widget-content widget-mywidget">' +
'<span class="DisplayText"><%- text %></span>' +
'</div>'
);
return widgetTemplate(config);
};
this.afterSetProperty = function (name, value) {
return true;
};

};
Runtime Code
To handle the widget at runtime, the widget methods must to do the following:
Render the HTML at runtime
Set up bindings after rendering the HTML
Handle property updates
The following sample code shows a <widgetname>.runtime.js file for the customized widget created in Mashup Builder Code.
TW.Runtime.Widgets.mywidget = function () {
var valueElem;
this.renderHtml = function () {
var mytext = this.getProperty('MyWidget Property');
var config = {
text: mytext
}
var widgetTemplate = _.template(
'<div class="widget-content widget-mywidget">' +
'<span class="DisplayText"><%- text %></span>' +
'</div>'
);
return widgetTemplate(config);
};
this.afterRender = function () {
valueElem = this.jqElement.find(".DisplayText");
valueElem.text(this.getProperty("DisplayText"));
};
this.updateProperty = function (updatePropertyInfo) {
if (updatePropertyInfo.TargetProperty === "DisplayText") {
valueElem.text(updatePropertyInfo.SinglePropertyValue);
this.setProperty("DisplayText",
updatePropertyInfo.SinglePropertyValue);
}
};
};
Additional Features Available in Widgets
You can add the following features in your widgets:
Services can be bound to events. For example:
A button is clicked.
Selected rows have changed.
A service is completed.
Events can be bound to various services. For example, when you invoke a service, it navigates to a mashup.
Widget properties can have:
Data bound to it (inbound). The inbound data is specified as "isBindingTarget": true in the widget definition code.
Data that is sent back to ThingWorx (outbound). The outbound data is specified as "isbindingSource": true in the widget definition code.
For example, user_input_for_name in the following sample code is a user input, which is an outbound data.
this.widgetProperties = function () {
return {
"name": "user_input_for_name",
"description": "Sample widget that returns a user input",
"category": ['Common'],
"properties": {
"DisplayText": {
"baseType": "STRING",
"defaultValue": "My First Widget!",
"isBindingTarget": true,
"isbindingSource": true
}
}
};
};
You can access all the functionality of JavaScript and HTML in your widget code at runtime.
Was this helpful?