Mashup Builder > Mashups > Responsive Mashups > Expanding and Collapsing Containers
Expanding and Collapsing Containers
You can set the EnableExpandCollapse property to control the visibility of a container within your mashup. When a container is collapsed, its content is not visible to the users. When expanded, the container and its content are visible. You can use a button or the Expand and Collapse services to control the container visibility. For example, you can use the property to show or hide a container with configuration options that should not be always visible.
Expanding or Collapsing a Container Using a Service
1. In Mashup Builder, select a container on the canvas.
In ThingWorx 9.1 and earlier, you can only select a container on the edge of the layout.
2. On the Properties panel, select the EnableExpandCollapse property.
3. Bind events to the Collapse and Expand services of the container.
When the events are triggered, the services are executed and the container is expanded or collapsed. You can bind events from a widget, a function, or a service to control the visibility of the container.
Expanding and Collapsing a Container Using a Button
1. In Mashup Builder, select a container that is placed on the edge of the canvas.
2. On the Properties panel:
a. Enable the EnableExpandCollapse property.
b. Enable the ShowExpandCollapseTab property.
An arrow button Expand Collpase Button appears on the container. You can click the button to expand or collapse the container at run time.
Overlaying a Container
The size of containers within a mashup changes when you expand or collapse a container. This can break the layout of your mashup. The Overlay property enables you to show a container on top of the layout. You can only enable the property for containers with a fixed or a specified size range, and are on the edge of a mashup.
Was this helpful?