Styling the PerformancePoint 2010 Dashboard Output

  • Article

Using Dashboard Designer in SharePoint 2010 allows one to build powerful visualizations for end users.  Unfortunately the ability to style the output is limited in the designer.  With a little CSS it is possible to take the generated dashboard output and apply some styling to the page elements in order to achieve commonality or branding across the published content.  In this example we’ll look at styling the filters that are generated with Dashboard Designer.  By default the filters are rendered as plain SELECT tags with a label.

Once the dashboard is published I used the Developer Tools with IE 8 to look at the rendered output for the filter. The labels for the filters are published with a ‘pps-parameterTitle’style,  Because of this it makes it very easy to overwrite the default style.  If we look at the drop down for the filters themselves they are a little more difficult.  They are rendered with a name of ‘pps_????’, where ??? is a GUID attached to the output.  In this case we want to style anything with a name attribute that begins with ‘pps’.

After a little research I found this reference provide the answer.  CSS allows you to target particular attributes within HTML elements for selection.  This is done by using an expression with the attribute name ^= beginning value.  In our case we want all selects where name begins with ‘pps_’.  Our CSS for doing this is SELECT[name^=”pps_”].  (See complete css below).

    1: <style>
    2: .pps-parameterTitle {
    3:     FONT-FAMILY: Verdana, Arial, sans-serif; COLOR: red; FONT-SIZE: 14pt
    4: }
    5: select[name^="pps_"] {
    6:     FONT-FAMILY: Verdana, Arial, sans-serif; COLOR: green; FONT-SIZE: 10pt
    7: }
    8: </style>

 

In order to apply this to our page we can add this to the master page or use the content editor web part.  The content editor web part can be added to the target dashboard page and the styles above added by putting the editor in source view.  Once the page is published the filters should like like the image below.  Not fancy or pretty, but it gets the job done.

 

pps-filter-style