Mashup Builder > Widgets
ThingWorx widgets are the visual components of ThingWorx mashup pages. A widget can be an advanced data renderer, such as a chart, or more of a utility component, such as a button or a navigation link. Data rendering widgets have incoming data bindings, meaning that when a data service is executed, the data result set is bound to the widget for rendering. Other widgets, such as a button, may not have incoming data bindings, but may have an outgoing event binding. For the button, that would mean a user Clicked event may be outward bound to a data service, so when the button is clicked, the data service is executed on the server.
Widget Category
The widget categories are available for ThingWorx 8.4.X and higher versions.
The 78 widgets are classified into three major categories in the platform. They are as follows:
Standard: There are 64 widgets that are listed as Standard in the Mashup Builder. These are the existing widgets in the Platform.
Beta: There are 13 new widgets that are listed as Beta. These are also available as web components that can be imported from an SDK.
Legacy: Only the Repeater widget is listed as Legacy. This widget will be deprecated in a future release.
There are other widgets that are available as extensions. Some of these extensions are listed in Extensions. There are some extensions available in the PTC Marketplace that you can import to ThingWorx and use. These imported extensions are listed in the Imported category in the Mashup Builder.
Widget Placement
Widgets are placed onto a mashup by selecting a widget and dragging it to a location on the mashup. It can be dropped on the mashup root, or placed in a container object, such as a Panel or Fieldset.
Widget Properties
All widgets have properties for configuring the specific widget instance on a page. Properties are edited in the widget properties pane of the Mashup Builder. Properties can be manually set or be bound to other data services or events in the mashup. If a property is bindable, next to the property name there will be an input facing arrow (the property value may be set from another source), and output facing arrow (the property value can be the source for another property or parameter's value), or both. There are a set of common properties that are shared by every widget. They are as follows:
Id—a unique identifier used internally by ThingWorx.
Type—the widget type.
DisplayName—a user defined friendly name to identify the widget.
Description—user defined description.
Top—top Y-Coordinate for the widget location.
Left—left X-Coordinate for the widget location.
Width—width in pixels.
Height—height in pixels.
Z-index—ordering for layered widgets. Typically, a lower Z-index will move the widget behind another widget with a higher Z-index.
ShowDataLoading—Displays the data while it loads.
Visible—the widget is visible when viewing the mashup.
When a property value has been set manually, the property row background is highlighted. If the property has a binding, the relevant input arrow will be filled in.
Widget Configuration
Each widget has a click menu configuration point, available via a visual click point on the widget when it is selected. When clicked, a floating menu appears. You can select the Configure option to open a configuration dialog. From the dialog, you manage inbound and outbound data bindings (an alternative to drag and drop) as well as custom configuration options that are widget dependent, such as formatting the columns within a grid.
Localization for Applications
When you click the globe icon next to a text property, the text is no longer set to static but will now be based on localization tokens. Click the magic picker, so you can select an existing localization token or create a new one. When you are adding a new localization token, you add a namespaced token name, which will prevent conflicts with tokens from other sources and allow developers and translators to work with application-specific tokens only. In the String Value field, you enter the default text value. After you define all tokens needed for the application, you can review them on the Localization Tokens screen by filtering on the token name. You should add usage and context information for each token.
For translations into other languages, confirm that the localization tables for those languages already exist. You can use the Import/Export menu to export the entities to an XML file. You enter your name spaced localization token as the token prefix. In the XML output file, the translations for other languages should be added to the empty <Rows/> element. After the translations are ready and you confirmed that the localization table attributes name, description, languageCommon, and languageNative are correct, you can import them into ThingWorx and they will be merged with the existing localization tables for the language.
If a new language is being introduced, many widgets use tokens from the System localization table. These tokens need to be translated as well; however, there is no easy way to restrict the set of tokens to those used. Therefore, this is a manual filtering step. For existing languages, check if the System tokens have already been translated.
When exporting and editing XML files, ensure that UTF-8 encoding is maintained. Encoding problems can appear as errors when a file is reimported or as localized strings with question marks or other unexpected characters in place of accented letters. ThingWorx should be set to use UTF-8 as the default file encoding. Specify the Java option -Dfile.encoding=UTF-8 on launch.
Widget Events
Many widgets have events in addition to properties. Events can be used to fire data services. If a widget has one or more events, they will be available as in the Widget Properties pane (with an lightning bolt icon) and via the click menu. From the click menu, you can drag a widget event to a data service.
Widget Styling
Style definitions are system-defined entities for controlling the look and rendering of a widget. Some widgets support state definitions, as well, which allow you to dynamically apply styles based on data values. Please see the individual widget sections for more details.