Mashups

Mashup Builder > Mashups

Mashups

In ThingWorx, a mashup is a web page that you can build to visualize data and to interact with your Thing model through a graphical interface. The following table lists the available mashup types:

Type

Description

Responsive

A responsive mashup with advanced layout containers. The layout rules and options are available on the Layout panel. You can save mashups of this type as a mashup template.

Static (Legacy)

This type of mashup is statically sized according to the pixel dimensions that you define.

This mashup type will be deprecated in a future release. To use static positioning, create a responsive mashup, and then set the positioning to Static on the Layout panel.

Responsive (Legacy)

This type of mashup expands to fill the available resolution of the display, never leaving any unused space around the mashup.

This mashup type will be deprecated in a future release. Use a responsive mashup with containers instead.

You can create a standard mashup or a Master mashup. You can use Master mashups as frames for your standard mashups. For example, you may want a common header, common footer, and a navigation tree on the left side that is used in a number of mashups. You create a master to frame these elements in your page. You can create different masters for different projects, or one for all your mashups, depending on your needs.

The following table lists the available mashup types in ThingWorx 8.5 and later and the corresponding types in ThingWorx 8.4 and ThingWorx 8.3.

8.5	8.4	8.3
Responsive	Responsive (Advanced)	—
Static (Legacy)	Static	Static
Responsive (Legacy)	Responsive	Responsive

The following mashup types are available in ThingWorx 8.3 and earlier:

Type	Description
Thing Shape	A Thing Shape is used when you want to create a reusable mashup that will be embedded in another mashup for common components. For example, you may have a thing shape definition for an Air Handler, which includes whether the fan is on or off, and the inlet and outlet temperature, and a picture of the Air Handler. You can get a list of all your Air Handlers in a tree structure from a defined thing network (or other queries against the Model, such as a list of all things that implement the Air Handler Shape). When you click on a specific Air Handler, you want to show the correct picture, the on/off status, and the inlet and outlet temperatures. Since this is a common view across all Air Handlers, you can define a Thing Shape mashup. You can then place the Thing Shape mashup as an embedded mashup next to the tree widget. Within the Thing Shape mashup, you use the Thing Shape definition to select appropriate services to return the corresponding data. You then link the Thing in the Thing Shape mashup to the selected Air Handler in the tree. When the user selects a specific Air Handler, that units ID is passed to the Thing Shape mashup, and the Data Services are executed against the specific Thing. This is a great tool for re-usability and to design your mashups using object oriented techniques to minimize maintenance.
Thing Template	A Thing Template mashup is essentially the same as a Thing Shape mashup, except that you use a Thing Template as the abstract entity to design the mashup around, rather than a Thing Shape.

Type

Description

Thing Shape

A Thing Shape is used when you want to create a reusable mashup that will be embedded in another mashup for common components. For example, you may have a thing shape definition for an Air Handler, which includes whether the fan is on or off, and the inlet and outlet temperature, and a picture of the Air Handler. You can get a list of all your Air Handlers in a tree structure from a defined thing network (or other queries against the Model, such as a list of all things that implement the Air Handler Shape). When you click on a specific Air Handler, you want to show the correct picture, the on/off status, and the inlet and outlet temperatures. Since this is a common view across all Air Handlers, you can define a Thing Shape mashup. You can then place the Thing Shape mashup as an embedded mashup next to the tree widget. Within the Thing Shape mashup, you use the Thing Shape definition to select appropriate services to return the corresponding data. You then link the Thing in the Thing Shape mashup to the selected Air Handler in the tree. When the user selects a specific Air Handler, that units ID is passed to the Thing Shape mashup, and the Data Services are executed against the specific Thing. This is a great tool for re-usability and to design your mashups using object oriented techniques to minimize maintenance.

Thing Template

A Thing Template mashup is essentially the same as a Thing Shape mashup, except that you use a Thing Template as the abstract entity to design the mashup around, rather than a Thing Shape.