The foundation of every dashboard is its layout. These can range from simple layouts with a single chart to much more complex layouts with many nested rows and columns and many different-sized charts, or even other components such as filters. When we create a dashboard, we usually define the layout before we define data sources or chart components. Without a layout, where would we place our charts? This recipe teaches you to create a simple layout using a responsive web framework called bootstrap.
To get ready for this recipe, you first need to start the MongoDB server with the same database as that of the last chapter. You will also have to start the Pentaho BA Server using the server control scripts. Once it is started, you can log in to the BI Server.
In this recipe, we are going to create a new dashboard and design a simple 2x2 layout. This layout will allow us to add a total of four components to the dashboard, be it charts, filters, or whatever:
- In the PUC, go to File | New | CDE Dashboard.
- Save your dashboard in Public | Pentaho MongoDB Cookbook | Dashboards with the name 2x2 Layout, like this:
- Click on Settings on the CDE Main Menu.
- Set Dashboard Type to
bootstrap, as shown here: - Click on the Layout tab.
- Then click on the Add Row button.
- Select the row.
- Click on the Add Column button.
- Make sure that the row is still selected.
- Click on the Add Column button again.
- Select the first nested column.
- Set the Medium Devices property to 6.
- Then set the Height property to 300.
- Next, set the Background Color property to #CCCCCC.
- Select the second column.
- Set the Medium Devices property to 6.
- Then set the Height property to 300.
- Set the Background Color property to #BBBBBB.
- Click on Save.
Now that we have saved our dashboard, we are going to open it in render mode to see what it looks like:
- Click on the Opened menu on the Pentaho User Console and select Browse Files.
- Navigate to Public | Pentaho MongoDB Cookbook | Dashboards.
- Select the 2x2 Layout dashboard file, as shown in the next screenshot.
- Click on Open on the right-hand side menu.
You can see that we have created a simple two-column layout. We could technically start adding dashboard components such as charts and filters to these two areas. But, let's go back to the original dashboard we were editing and add some more layout.
- Select the original row with the two nested columns.
- Click on the Add Row button to add a new row to the layout. This new row will appear below the original row in the root of the dashboard structure.
- Select the new row.
- Click on the Add Column button.
- Make sure that the row is still selected.
- Click on the Add Column button again.
- Select the first nested column.
- Set the Medium Devices property to 6.
- Then set the Height property to 300.
- Set the Background Color property to #CCCCCC.
- Select the second column.
- Set the Medium Devices property to 6.
- Next, set the Height property to 300.
- Set the Background Color property to #BBBBBB.
- Select the first row.
- Click on the Add Spacer button. This will add a small space between the two rows.
- Set the Height property of the spacer to 10.
- Click on Save.
Now it's time to refresh the dashboard in render mode to see our latest changes.
- Select the 2x2 Layout tab in the Pentaho User Console.
- Right-click on the tab and select Reload Tab, as follows:
You will now see a simple 2x2 layout with four main panels, like this:
To finish off, we will add a simple HTML component to the top-left layout column.
- Select the first column in the first row of the dashboard is layout structure.
- Click on the Add HTML button.
- Open the HTML Editor property.
- Copy and paste the following HTML:
<h2 style="margin-top:0px">My Dashboard</h2>
- Click on OK. The following screenshot shows the
Layout Structurewindow: - Then click on Save.
Let's refresh our latest changes on the dashboard:
- Select the 2x2 Layout tab in the Pentaho User Console.
- Right-click on the tab and select Reload Tab.
You can see that we have added some basic HTML to our dashboard, as follows:
In this recipe, we showed you how to create a new dashboard and define a layout of rows and nested columns. It's possible to nest further rows into columns and more columns into those rows. It is even possible to set the size of columns that add up to a total value of 12 based on the bootstrap framework. To create a 50 on 50 layout, we set each column to a width of 6. We could have also created a layout with four columns, each having a width of 3.
Plus, we were able to add some basic HTML to our layout. The ability to add HTML to our layout opens the door to all sorts of possibilities in dashboard layout design.
Basically, by using the bootstrap framework, CDE, and some imagination, it is possible create bespoke responsive dashboards that will fit in different screens types, such as desktops, tablets, or mobile phones.