This document discusses various methods for building dashboards in SharePoint, including using calculated columns and Content Editor Web Parts to display graphics, and using SharePoint Designer and Data Form Web Parts with conditional formatting. It provides examples of how to build dashboards using these techniques as well as resources for additional information.

1. Building SharePoint Dashboards SharePoint Saturday, New York CityJuly 31, 2010 Susan Lennon MCITP (SharePoint Administrator 2010, DataBase Administration), MCSD.NET susanlennonmct@hotmail.com Twitter: susanlennon Blog: http://wss.LennonTechnologies.com/blog

2. Agenda Discuss dashboards and terminology Resources (Images, fonts, libraries) Methods to build dashboards Using Content Editor Web Parts and Calculated Columns to build a dashboard Using SharePoint Designer to build a dashboard Links and questions

3. Why Build Dashboards? Our bosses LOVE them! Right Information, Right Time, Right Format Provides similar capabilities that more expensive products include; e.g. Performance Point or MOSS Enterprise (KPIs or BDC); i.e. these methods work in both Windows SharePoint Services and MOSS Standard Dashboard is a web page containing Scorecards Scorecards are web parts (for SharePoint) that contain KPIs KPI is a Key Performance Indicator – a single metric or value that is often represented graphically; e.g. red or green stoplight, thumbs up or down, happy or sad face

4. Online Samples

5. Use Images from _Layouts folder

6. Online Color Reference

7. WingDing and Web Ding Fonts with Calculated Columns

8. Online tool for Calculated Columns with embedded HTML

9. Dashboard Methods Can use embedded HTML within calculated columns to display graphics Only works for SharePoint lists Can use SPD and Data Form Web Parts with conditional formatting Also works for XML, web services, databases within network, RSS Use Wingding fonts can provide different looks (e.g. l tnC D ) – see WingDings document

10. Using Calculated Columns to Build Dashboards Add calculated column(s) to SharePoint list – building HTML strings (usually based upon other columns) Can use SharePoint Designer (SPD) to build a workflow that updates column if calculated column does not provide enough capability Need “special” JavaScript (see PowerPoint Notes) to render HTML on a web part page JavaScript must be BELOW the list view web part Store JavaScript in Document Library (reusability, versioning, auditing) and refer to in a Content Editor Web Part (CEWP)

11. Using SharePoint Designer (SPD) to Build Dashboards Start with a simple SharePoint list Optionally, add a calculated SharePoint column, usually based upon another SharePoint column of type choice – this technique puts some of the control back in the hands of the end user Create a webpart page – within an existing document library (best practice – in Sandbox DL) Use SharePoint Designer (SPD) and Data Form Web Part to create dashboard view of list with conditional formatting Optionally, use special fonts to create symbols Can add legends above or below dashboard using out of the box (OOB) Content Editor Web Part (CEWP) Data Form Web Part can be exported and used as a web part elsewhere in the site

12. Data Views: Access to Data Improved OOB support for: Lists, SQL, OLEDB, XML, SOAP Services, Server Scripts, RSS, Business Data Catalog (w/Office SharePoint Server) New Combine data from multiple sources into single views New Fully extensible ASP.NET Data Source control model

13. Methods to Spice-up a DFWP with SharePoint Designer (SPD) Add a Data Form Web Part (DFWP) to a Web Part Page by either: Dragging a data source into a web part zone, or From the data menu select Insert Data View Any rows or columns can be formatted with Conditional Formatting (e.g. Red if negative, Black if positive) Images can be shown or hidden with conditional formatting Bar charts can be built using CSS

14. Create a Document Library to store web part pages

15. Create a Web Part Page in the Document Library

16. Open web part page in SPD

17. Insert Data View into a Web Part Zone

18. Once DVWP is on page, can choose columns (or add columns) to apply conditional formatting

19. Export Data View Web Part as DWP to use elsewhere on site

20. Resources http://office.microsoft.com/en-us/sharepointtechnology/CH100650061033.aspxhttp://applestooranges.com/blog/post/css-for-bar-graphs/?id=55 http://blogs.msdn.com/sharepointdesigner/archive/2008/06/27/css-style-bar-graphs-using-data-views.aspx http://blogs.msdn.com/sharepointdesigner/Default.aspx?p=2 http://blogs.msdn.com/sharepointdesigner/archive/2007/04/24/spdatasource-and-rollups-with-the-data-view.aspx http://blogs.msdn.com/sharepointdesigner/archive/2008/02/25/filtering-and-formatting-with-date-values.aspx http://pathtosharepoint.wordpress.com/2008/12/09/color-coding-more-examples/#comment-1180 http://pathtosharepoint.wordpress.com/2009/03/02/live-demo-jquery-sparklines/

21. Resources (continued) http://www.bitsofsharepoint.com/ExamplePoint/Site/StatusProgressBar.aspx http://www.bitsofsharepoint.com/ExamplePoint/Site/SharePointLayoutImages.aspx http://www.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Color-Coding-Calendar-List.aspx http://pathtosharepoint.wordpress.com/2008/09/01/using-calculated-columns-to-write-html/ http://www.w3schools.com/tags/ref_colornames.asp http://www.endusersharepoint.com/2009/10/29/visualizing-information-in-sharepoint-demo-02-five-solutions/

22. Questions? Coordinator of Hampton Roads SQL Server and SharePoint User Group in Virginia Beach, VA http://www.hrssug.org DOD SharePoint User Grouphttps://www.fleetforces.navy.mil/communities/spug Susan’s blog –http://wss.LennonTechnologies.com/blogemail: SusanLennonMCT@Hotmail.comTwitter ID: SusanLennon