Example of Creating a Customized ThingWorx Widget

Best Practices for Developing Solutions > Designing the User Experience for Your ThingWorx Solution > Widgets in ThingWorx Solutions > Creating Customized ThingWorx Widgets > 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?