Building SharePoint Dashboards <br />SharePoint Saturday, New York CityJuly 31, 2010<br />Susan Lennon MCITP (SharePoint A...
Agenda<br />Discuss dashboards and terminology<br />Resources (Images, fonts, libraries)<br />Methods to build dashboards<...
Why Build Dashboards?<br />Our bosses LOVE them!<br />Right Information, Right Time, Right Format<br />Provides similar ca...
Online Samples <br />
Use Images from _Layouts folder<br />
Online Color Reference<br />
WingDing and Web Ding Fonts with Calculated Columns<br />
Online tool for Calculated Columns with embedded HTML<br />
Dashboard Methods<br />Can use embedded HTML within calculated columns to display graphics<br />Only works for SharePoint ...
Using Calculated Columns to Build Dashboards<br />Add calculated column(s) to SharePoint list – building HTML strings (usu...
Using SharePoint Designer (SPD) to Build Dashboards<br />Start with a simple SharePoint list<br />Optionally,  add a calcu...
Data Views: Access to Data<br />Improved <br />OOB support for: Lists, SQL, OLEDB, XML, SOAP Services, Server Scripts, RSS...
Methods to Spice-up a DFWP with SharePoint Designer (SPD)<br />Add a Data Form Web Part (DFWP) to a Web Part Page by eithe...
Create a Document Library to store web part pages<br />
Create a Web Part Page in the Document Library<br />
Open web part page in SPD<br />
Insert Data View into a Web Part Zone <br />
Once DVWP is on page, can choose columns (or add columns) to apply conditional formatting<br />
Export Data View Web Part as DWP to use elsewhere on site<br />
Resources	<br />http://office.microsoft.com/en-us/sharepointtechnology/CH100650061033.aspxhttp://applestooranges.com/blog/...
Resources (continued)<br />http://www.bitsofsharepoint.com/ExamplePoint/Site/StatusProgressBar.aspx<br />http://www.bitsof...
Questions?<br />Coordinator of <br />Hampton Roads SQL Server  and SharePoint User Group in Virginia Beach, VA http://www....
Upcoming SlideShare
Loading in …5
×

Susan Lennon: Building SharePoint Dashboards

8,540 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,540
On SlideShare
0
From Embeds
0
Number of Embeds
77
Actions
Shares
0
Downloads
123
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • For creating a column comparing a date (e.g. DueDate) to today’s date, make a new column named Today (doesn’t matter what type – can be a single line of text). Then create a calculated column using new (temporary) column, Today, with other Date column (e.g. DueDate) i.e. =If([DueDate]&gt;=[Today],”C”,”D”) Then after calculated column is built, go back and delete (temporary) column named Today.
  • Be SURE to have focus set in Web Part Zone BEFORE trying to insert data view web part ( or data form web part)
  • &lt;script type=&quot;text/javascript&quot;&gt;/*Text to HTML - version 2.1Questions and comments: Christophe@PathToSharePoint.com*/function TextToHTML(NodeSet, HTMLregexp) {varCellContent = &quot;&quot;;vari=0;while (i &lt; NodeSet.length){try {CellContent = NodeSet[i].innerText || NodeSet[i].textContent;if (HTMLregexp.test(CellContent)) {NodeSet[i].innerHTML = CellContent;}} catch(err){}i=i+1;}}// Calendar viewsvarregexpA = new RegExp(&quot;\s*&lt;([a-zA-Z]*)(.|\s)*/\1?&gt;\s*$&quot;);TextToHTML(document.getElementsByTagName(&quot;a&quot;),regexpA);// List viewsvarregexpTD = new RegExp(&quot;^\s*&lt;([a-zA-Z]*)(.|\s)*/\1?&gt;\s*$&quot;);TextToHTML(document.getElementsByTagName(&quot;TD&quot;),regexpTD);// Grouped list viewsExpGroupRenderData = (function (old) { return function (htmlToRender, groupName, isLoaded) {var result = old(htmlToRender, groupName, isLoaded);varregexpTD = new RegExp(&quot;^\s*&lt;([a-zA-Z]*)(.|\s)*/\1?&gt;\s*$&quot;);TextToHTML(document.getElementsByTagName(&quot;TD&quot;),regexpTD); };})(ExpGroupRenderData);// Preview pane viewsshowpreview1 = (function (old) { return function (o) {var result = old(o);varregexpTD = new RegExp(&quot;^\s*&lt;([a-zA-Z]*)(.|\s)*/\1?&gt;\s*$&quot;);TextToHTML(document.getElementsByTagName(&quot;TD&quot;),regexpTD); };})(showpreview1);&lt;/script&gt;
  • Susan Lennon: Building SharePoint Dashboards

    1. 1. Building SharePoint Dashboards <br />SharePoint Saturday, New York CityJuly 31, 2010<br />Susan Lennon MCITP (SharePoint Administrator 2010, DataBase Administration), MCSD.NET<br />susanlennonmct@hotmail.com<br />Twitter: susanlennon<br />Blog: http://wss.LennonTechnologies.com/blog<br />
    2. 2. Agenda<br />Discuss dashboards and terminology<br />Resources (Images, fonts, libraries)<br />Methods to build dashboards<br />Using Content Editor Web Parts and Calculated Columns to build a dashboard<br />Using SharePoint Designer to build a dashboard<br />Links and questions<br />
    3. 3. Why Build Dashboards?<br />Our bosses LOVE them!<br />Right Information, Right Time, Right Format<br />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<br />Dashboard is a web page containing Scorecards<br />Scorecards are web parts (for SharePoint) that contain KPIs<br />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<br />
    4. 4. Online Samples <br />
    5. 5. Use Images from _Layouts folder<br />
    6. 6. Online Color Reference<br />
    7. 7. WingDing and Web Ding Fonts with Calculated Columns<br />
    8. 8. Online tool for Calculated Columns with embedded HTML<br />
    9. 9. Dashboard Methods<br />Can use embedded HTML within calculated columns to display graphics<br />Only works for SharePoint lists<br />Can use SPD and Data Form Web Parts with conditional formatting<br />Also works for XML, web services, databases within network, RSS<br />Use Wingding fonts can provide different looks (e.g. l tnC D ) – see WingDings document<br />
    10. 10. Using Calculated Columns to Build Dashboards<br />Add calculated column(s) to SharePoint list – building HTML strings (usually based upon other columns)<br />Can use SharePoint Designer (SPD) to build a workflow that updates column if calculated column does not provide enough capability<br />Need “special” JavaScript (see PowerPoint Notes) to render HTML on a web part page<br />JavaScript must be BELOW the list view web part <br />Store JavaScript in Document Library (reusability, versioning, auditing) and refer to in a Content Editor Web Part (CEWP)<br />
    11. 11. Using SharePoint Designer (SPD) to Build Dashboards<br />Start with a simple SharePoint list<br />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<br />Create a webpart page – within an existing document library (best practice – in Sandbox DL)<br />Use SharePoint Designer (SPD) and Data Form Web Part to create dashboard view of list with conditional formatting<br />Optionally, use special fonts to create symbols <br />Can add legends above or below dashboard using out of the box (OOB) Content Editor Web Part (CEWP)<br />Data Form Web Part can be exported and used as a web part elsewhere in the site<br />
    12. 12. Data Views: Access to Data<br />Improved <br />OOB support for: Lists, SQL, OLEDB, XML, SOAP Services, Server Scripts, RSS, Business Data Catalog (w/Office SharePoint Server)<br />New<br />Combine data from multiple sources into single views<br />New<br />Fully extensible ASP.NET Data Source control model<br />
    13. 13. Methods to Spice-up a DFWP with SharePoint Designer (SPD)<br />Add a Data Form Web Part (DFWP) to a Web Part Page by either:<br />Dragging a data source into a web part zone, or<br />From the data menu select Insert Data View<br />Any rows or columns can be formatted with Conditional Formatting (e.g. Red if negative, Black if positive)<br />Images can be shown or hidden with conditional formatting<br />Bar charts can be built using CSS<br />
    14. 14. Create a Document Library to store web part pages<br />
    15. 15. Create a Web Part Page in the Document Library<br />
    16. 16. Open web part page in SPD<br />
    17. 17. Insert Data View into a Web Part Zone <br />
    18. 18. Once DVWP is on page, can choose columns (or add columns) to apply conditional formatting<br />
    19. 19. Export Data View Web Part as DWP to use elsewhere on site<br />
    20. 20. Resources <br />http://office.microsoft.com/en-us/sharepointtechnology/CH100650061033.aspxhttp://applestooranges.com/blog/post/css-for-bar-graphs/?id=55<br />http://blogs.msdn.com/sharepointdesigner/archive/2008/06/27/css-style-bar-graphs-using-data-views.aspx<br />http://blogs.msdn.com/sharepointdesigner/Default.aspx?p=2<br />http://blogs.msdn.com/sharepointdesigner/archive/2007/04/24/spdatasource-and-rollups-with-the-data-view.aspx<br />http://blogs.msdn.com/sharepointdesigner/archive/2008/02/25/filtering-and-formatting-with-date-values.aspx<br />http://pathtosharepoint.wordpress.com/2008/12/09/color-coding-more-examples/#comment-1180<br />http://pathtosharepoint.wordpress.com/2009/03/02/live-demo-jquery-sparklines/<br />
    21. 21. Resources (continued)<br />http://www.bitsofsharepoint.com/ExamplePoint/Site/StatusProgressBar.aspx<br />http://www.bitsofsharepoint.com/ExamplePoint/Site/SharePointLayoutImages.aspx<br />http://www.pathtosharepoint.com/sharepoint-user-toolkit/Pages/Color-Coding-Calendar-List.aspx<br />http://pathtosharepoint.wordpress.com/2008/09/01/using-calculated-columns-to-write-html/ <br />http://www.w3schools.com/tags/ref_colornames.asp<br />http://www.endusersharepoint.com/2009/10/29/visualizing-information-in-sharepoint-demo-02-five-solutions/<br />
    22. 22. Questions?<br />Coordinator of <br />Hampton Roads SQL Server and SharePoint User Group in Virginia Beach, VA http://www.hrssug.org<br />DOD SharePoint User Grouphttps://www.fleetforces.navy.mil/communities/spug<br />Susan’s blog –http://wss.LennonTechnologies.com/blogemail: SusanLennonMCT@Hotmail.comTwitter ID: SusanLennon<br />

    ×