Dashboard Templates for Project Portfolio Dashboard

As part of Bamboo’s updated Bamboo Project Management Suite, our new SharePoint Project Portfolio Dashboard allows you to create a customizable dashboard that displays the critical info you need to track a project’s progress. Taking a glance at the settings for each of the many included charts and graphs, you will quickly notice that there are plenty of customization options for each chart, but did you also know that you can easily change which charts are displayed and exactly how they’re arranged?

The Web Part comes pre-configured with most of the charts showing, and with sample data in the underlying table. While this default view is intended to show you some things you can do with the Web Part (using multiple columns, column/row spanning for charts, proportional column sizing, etc.), it may not be the ideal view for your implementation. So what if you want something completely different?

You have a couple of options. 

If you relish the thought of playing around with HTML tables, you can edit the Web Part manually to your heart’s content. In the tool pane setting for the dashboard, there’s a selection for manually editing the page layout. This section lets you add new charts and grids, and change the layout of the page. It uses basic HTML table structure to determine the layout of the page. To add a Web Part, you just click in the table section where you want to add a chart, and select the desired element via the drop-down.  You can delete, add, replace, and rearrange all you want to get the desired layout for a project. 

OR….

If you want to save some time (or just don’t want to play with tables), you can cheat a little by using one of the templates I’ve thrown together below to change your page layout. Just replace the default HTML in the tool pane with the code from one of the samples below. Once that’s done, you can replace/delete/rearrange the charts however you see fit.

2/3 page width, 2-column layout, with column-spanning grids on top:

<table width="66%" border="0" style="table-layout:fixed" ID="Table2">
<col width="50%" />
<col width="50%" />

<tr>
                        <td width="100%" colspan='2'> [@Control:DashboardMessage] </td>
</tr>
<tr>
                        <td width="100%" colspan='2'> [@Control:GanttViewOfActiveProjects] </td>
</tr>
<tr>
                        <td width="100%" colspan='2'> [@Control:ActiveProjectsHealth] </td>  
</tr>
<tr>
                        <td width="100%" colspan='2'> [@Control:AtRishkProjects] </td>
</tr>
<tr>
                        <td align="center"> [@Control:ActiveProjectsBudgets] </td>
                        <td align="center"> [@Control:Plannedvs.ActualEffortForActiveProjects] </td>
</tr>
</table>

Single column, nothing but charts:

<table width="28%" border="1" style="table-layout:fixed" ID="Table2">

<col width="100%" />

<tr>

                        <td align="center"> [@Control:OverallHealthOfActiveProjects] </td>

</tr>

<tr>

                        <td align="center"> [@Control:ActiveProjectsBudgets] </td>

</tr>

<tr>

        <td align="center"> [@Control:TypesOfActiveProjects] </td>

</tr>

<tr>       

                        <td align="center"> [@Control:Plannedvs.ActualEffortForActiveProjects] </td>

</tr>

</table>

2-column, Alternating Grids &Charts:

<table width="66%" border="0" style="table-layout:fixed" ID="Table2">

<col width="50%" />

<col width="50%" />

<tr>

                        <td width="100%" colspan='2'> [@Control:DashboardMessage] </td>

</tr>

<tr>

                        <td width="100%" colspan='2'> [@Control:GanttViewOfActiveProjects] </td>

</tr>

<tr>

        <td align="center"> [@Control:ActiveProjectsBudgets] </td>

                        <td align="center"> [@Control:Plannedvs.ActualEffortForActiveProjects] </td>

</tr>

<tr>

                        <td width="100%" colspan='2'> [@Control:ActiveProjectsHealth] </td>  

</tr>

<tr>

        <td> [@Control:OverallHealthOfActiveProjects] </td>

        <td> [@Control:TypesOfActiveProjects] </td>

</tr>

<tr>

                        <td width="100%" colspan='2'> [@Control:AtRishkProjects] </td>
</tr>

</table>

Feel free to use/tweak any of the above layouts however you see fit, but if you come up with one you think is even better (and don’t mind sharing), then by all means, throw it in the comments. Bonus points if you upload a screenshot of it in the media area.

Default PPD View