Creating a Contained Mashup
When creating applications that are based on responsive mashups, we recommended that you split your entire application into smaller, reusable components. Reusable components are a group of widgets that you can use for different use-cases. You can use the Contained Mashup widget to add a mashup to a container in the layout. Reusable mashups enable you to:
• Create a simpler mashup structure, with fewer bindings in the parent mashup. This makes it easier to resolve issues with your application.
• Split your mashup into sections so that multiple developers can work on the same application.
• Build complex mashups more quickly by reusing simple mashups.
For more information, see
Contained Mashup Widget.
You can configure contained mashups within their parent mashup. For example, consider a mashup application that is used to query audit data within ThingWorx. Instead of creating a single mashup, you can split the application into multiple mashups and build it using reusable components:
• The top section contains the navigation options, buttons, and input widgets for the search.
• The search section contains the returned data from the query service and displays it in a grid.
• The visualization section shows data from the grid on different charts.
Adding a Contained Mashup
1. Open and edit an existing mashup, or create a new mashup.
2. On the Layout panel, add a container to the parent mashup.
3. Drag the Contained Mashup widget from the Widgets panel to the container.
4. Select the mashup to display for the widget in one of the following ways:
◦ On the Properties panel, select a mashup for the Name property.
◦ Drag a mashup from the Mashup panel to the widget on the canvas.
5. Click Save, then click View Mashup. The contained mashup is displayed within the current mashup at run time.
After you add the contained mashup, you can use mashup parameters to bind data and events to and from the contained mashup. For more information, see
Configuring Mashup Parameters.
Configuring Contained Mashup Layouts
When you add a contained mashup to a layout, the mashup is displayed according to the dimensions of the widget container. Scroll bars appear when the dimensions of the contained mashup exceed the available space in the container. This may cause usability issues when you have multiple contained mashups. When one or more contained mashups exceed the available space for their container, multiple scroll bars can appear on the parent mashup. You can expand these containers to fit the content of the contained mashups. Use the ResizeToContent property of the contained mashup widget to expand the container and to display the full content within the contained mashup.
To expand the container in the parent mashup, perform the following steps:
1. Open the parent mashup with the Contained Mashup widget.
2. On the Explorer panel, select the container with the Contained Mashup widget.
3. On the Layout panel, under Advanced, set the Shrink Ratio box to 0.
4. Repeat the previous step for other containers in the layout. This prevents the contained mashup container from taking all of the available space in the layout.
When you enable the property, the container of the contained mashup stretches vertically or horizontally, depending on the layout orientation. The property affects the mashup only when your contained mashup has components with a fixed size. For example, a static container, mashup, or non-responsive widget. The contained mashup must have a defined height in order to expand the content of the parent container. For example, the Grid Advanced widget is a responsive widget that uses the available space in a container. When the widget grows to accommodate more rows, the parent container of the contained mashup remains the same size. To expand the parent container, specify a fixed size for the mashup, a container, or a widget.