CTools includes Bootstrap’s responsive library, so you can develop dashboards which
work across a range of different devices, such as laptops, tablets, and smart phones. In this walk-through tutorial, you will convert the demoDashboard you created in the
Create a dashboard using RequireJS or Exporting charts tutorials to a responsive
dashboard.
These instructions assume that you are familiar with the main features in CDE and the basic steps of creating a dashboard in CDE. In addition, these instructions assume that you have activated the CDE plugin.
-
In the Layout
perspective, locate and expand the chartTableRow row.
- Select the tableObj column and in the Properties pane, set the Medium Devices property to 6 spans. Additionally, set the Extra Small Devices property to 12 spans.
- Select the chartObj column and in the Properties pane, set the Medium Devices property to 6 spans. Additionally, set the Extra Small Devices property to 12 spans.
Note: The Small Devices property will inherit its value from the Extra Small Devices property, and the Large Devices property will inherit its value from the Medium Devices property. For more information about how Bootstrap works in CDE, see the CDE Dashboard Overview. -
In Pentaho User Console, navigate to the Browse Files perspective and
double-click the demoDashboard file. When rendered, the dashboard
will look similar to the following:
- To test the responsiveness of your dashboard, reduce the size of your browser window. The dashboard layout will respond accordingly:
