SharePoint Workflow Documentation

 

Here’s a list of the out of the box workflows and links to Microsoft’s documentation… (just some more after class documentation!)

SharePoint 2007 Workflows

• Three-state workflow
  http://office.microsoft.com/en-us/sharepoint-server-help/use-a-three-state-workflow-HA010154431.aspx
   
• Approval workflow
  http://office.microsoft.com/en-us/sharepoint-server-help/use-an-approval-workflow-HA010154425.aspx
   
• Disposition Approval workflow
  http://office.microsoft.com/en-us/sharepoint-server-help/use-a-disposition-approval-workflow-HA010154429.aspx
   
• Collection Signatures workflow
  http://office.microsoft.com/en-us/sharepoint-server-help/use-a-collect-signatures-workflow-HA010154428.aspx
   
• Collect Feedback workflow
  http://office.microsoft.com/en-us/sharepoint-server-help/use-a-collect-feedback-workflow-HA010154426.aspx
  
• Translation Management workflow
  http://office.microsoft.com/en-us/sharepoint-server-help/use-a-translation-management-workflow-HA010154430.aspx
   

More workflow documentation, examples and videos

http://office.microsoft.com/en-us/sharepoint-server-help/CH010176053.aspx?CTT=97

 

SharePoint 2010 Workflows

• Summary of 2010 Approval workflows
  http://office.microsoft.com/en-us/sharepoint-designer-help/understand-approval-workflows-in-sharepoint-2010-HA101857172.aspx?CTT=1
  

(looks like they have not gotten around to doing the same level of documentation for 2010 in the Office web site as they had done for 2007 – or I just can’t find it)

 

.

Worst license dialog box?

 

Below is the license screen for the .NET Framework 4 Setup. Big, almost empty dialog box, and they only display three and a half lines of the license agreement at a time…  Maybe they added the print and save buttons so you could actually read it.

 

 

.

SharePoint: Add Instructions and Color to Surveys

 

Only tested in SharePoint 2007 so far…

 

Survey Instructions

Surveys often need instructions or opening text. Here is a trick that converts a “Single line of text” question into just a page of text. There is one side effect; your “instructions question” will show up in the results as a query that everyone answered as “HIDDEN”. (But you could change the word if you like.)

 

Steps:

1. For each "Instructional Text" needed in the survey add a question to the survey of type “Single line of text”, add your text as the question, and set a default value of "HIDDEN"
    
2. If you want the instructions on their own page, then add a Page Separator after the instructions item
    
3. Go to your survey and click “Respond to this Survey” to display the Newform.aspx page
    
4. Edit the URL to allow access to the web parts:
     append this to the end of the URL for the NewForm.aspx URL:  
               &ToolPaneView=2 
   and press Enter  
   
   http://yourserver/sites/yoursite/Lists/SurveyTest/NewForm.aspx?Source=.......overview.aspx&ToolPaneView=2
   
5. Click “Add a Web Part” and add a Content Editor Web Part
    
6. Move the Content Editor Web Part below the list web part
    
7. Edit the web part, click the Source Editor button and add the JavaScript from below
    
8. Save your changes and go test the survey!

<script>
 // hide the input textbox for the "description" text
 var x = document.getElementsByTagName("INPUT");
 var i=0;
 for (i=0; i<x.length; i++)
 { 
  if (x[i].value=="HIDDEN")
  {
    x[i].style.display="none";
  }
 } 
</script>

Note: If you have a multipage form (you added page separators or branching logic) then you will need to add a web part with the same code as above in the EditForm.aspx page. To get to this page just respond to the survey and click Next. Then to add the web part add &ToolPaneView=2 to the end of the URL.

 

 

Add color to your surveys!

 

Just follow the steps above, but use the following JavaScript instead. Then manually embed your HTML in the text of the question: "This is a survey about <b><i>Important Stuff</i></b>. Please take your time."

<script>
 // Fix tags to allow HTML
 var t = document.getElementsByTagName('table');
 for (var i=0; i<t.length; i++)
 {
   if (t[i].className=='ms-formtable')
   {
     var td = t[i].getElementsByTagName('td');
     for (var j=0;j<td.length;j++)
     {
       if (td[j].innerHTML.indexOf('&lt;') > -1)
       {
         td[j].innerHTML = td[j].innerHTML.replace(/&lt;/g,'<').replace(/&gt;/g,'>'); 
       }
     }
   }
 }
</script>

 

 

Or add instructions and color!

Use both JavaScript routines together:

<script>
 // hide the input textbox for the "description" text
 var x = document.getElementsByTagName("INPUT");
 var i=0;
 for (i=0; i<x.length; i++)
 { 
  if (x[i].value=="HIDDEN")
  {
    x[i].style.display="none";
  }
 } 

 // Fix tags to allow HTML
 var t = document.getElementsByTagName('table');
 for (var i=0; i<t.length; i++)
 {
   if (t[i].className=='ms-formtable')
   {
     var td = t[i].getElementsByTagName('td');
     for (var j=0;j<td.length;j++)
     {
       if (td[j].innerHTML.indexOf('&lt;') > -1)
       {
         td[j].innerHTML = td[j].innerHTML.replace(/&lt;/g,'<').replace(/&gt;/g,'>'); 
       }
     }
   }
 }
</script>

 

.

CSS Resources

 

Just a few CSS resources for my classes:

• W3Schools.com CSS Reference
  http://www.w3schools.com/css/default.asp
   
• Microsoft's CSS Reference, Tutorials and How to’s
  http://msdn.microsoft.com/en-us/library/ms531205(VS.85).aspx
   
• W3Schools.com tutorial
  http://www.w3schools.com/css/css_intro.asp
   
• CSS Zen Garder – a cool demo of CSS and DIV based layouts
  http://www.csszengarden.com
   
• The Official Standards for CSS
  http://www.w3.org/Style/CSS
   
• How to Develop with CSS
  http://phrogz.net/css/HowToDevelopWithCSS.html
   
• CSS Cheat Sheet:
  http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
   
• The W3C CSS Validation Service
  http://jigsaw.w3.org/css-validator/
   

SharePoint: Font Sizes!

 

Simple question… I want to update core.css to change the font sizes displayed in the page… how many do I need to update?

Would believe 19 different font sizes in 155 different styles in MOSS? 

And in SharePoint Server 2010 there are 36 different font sizes in 222 different styles!

 

Out of the table below, there are a few that really make you go “huh?”

• font-size:1pt;    (I need better glasses)
• font-size:72pt;  (I can see that one! Ok, not fair, this one is not used in a page, but is an optional size in the rich text editor…)
• font-size:0px;  and 1px and 2px???

After seeing all of those fixed font sizes you now understand why your browser’s “View, Text Size” feature does nothing to SharePoint pages.  Good thing IE 7 and FireFox added a Zoom option! 

 

To explore your core.css file just modify your SharePoint site’s URL to look like this:

     http://yourservername/sites/yoursitename/_layouts/1033/styles/core.css

 

Or if you have access to the server open up Windows Explorer and go here:

2007: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES

2010: C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\1033\STYLES

(The 1033 is for English)

 

 

Font sizes found in CORE.css:

 

MOSS 2007	Count		SharePoint Server 2010	Count
font-size:1pt;	3		font-size:1pt;	3
font-size:7pt;	2		font-size:7pt;	2
font-size:8pt;	115		font-size:8pt;	127
font-size:9pt;	4		font-size:9pt;	4
font-size:10pt;	4		font-size:10pt;	6
font-size:11pt;	1		font-size:11pt;	3
font-size:12pt;	2		font-size:12pt;	4
			font-size:14pt;	1
font-size:16pt;	3		font-size:16pt;	6
			font-size:18pt;	1
			font-size:24pt;	1
			font-size:36pt;	1
			font-size:48pt;	1
			font-size:72pt;	1
			font-size:0px;	2
font-size:1px;	1
font-size:2px;	6		font-size:2px;	7
font-size:10px;	1		font-size:10px;	1
			font-size:14px;	1
			font-size:.6em;	1
			font-size:.68em;	4
			font-size:0.7em;	3
			font-size:.7em;	5
			font-size:.85em;	1
font-size:1em;	4		font-size:1em;	11
			font-size:1.0em;	7
			font-size:1.1em;	1
font-size:1.2em;	2		font-size:1.2em;	3
			font-size:1.3em;	4
			font-size:2em;	2
			font-size:2.2em;	1
font-size:65%;	1		font-size:65%;	1
font-size:80%	1		font-size:80%	1
font-size:100%;	2		font-size:100%;	2
font-size:120%;	1		font-size:120%;	1
font-size:150%;	1		font-size:150%;	1
font-size:200%;	1		font-size:200%;	1
Count of sizes	19		Count of sizes	36
Total occurrences	155		Total occurrences	222

 

 

.

Live Chats to Learn more about SharePoint - with the MVP Experts

 

Do you have questions about SharePoint? Want to learn more about the recently launched SharePoint 2010?  By popular request, SharePoint MVPs from around the world are participating in a live chat event about SharePoint. These Q&A events are a great opportunity to tap into the vast knowledge of these industry professionals who are regarded as the best in their field.

Please join us on Wednesday July 21st at 9am PDT (12 Noon “Cincinnati time”) to chat with MVPs from around the world.

Learn more and add these chats to your calendar by visiting the MSDN event page http://msdn.microsoft.com/en-us/chats/default.aspx

 

.

SharePoint 2010: Replacing the Crumb Trail and Changing the Title

 

I like SharePoint 2010, I really do… but I just can’t get the hang of the Site Title / Crumb Trail thing, and the Navigate Up button is just not right. Below is a series of screens to show how the 2010 navigation works, and the issues I have with the interface. There’s no point in just complaining, so I also have one possible “fix” at the end of this article.

Please leave some comments:

• Am I not understanding how the crumb trail should work?
• Do you have a better solution?

I know that I’m not done with this… so check back…  (See here for more about the CSS to change the site title area.)

 

 

My Issues with the Site Title / Crumb Trail

 

The Home Page of the site

Issues:

• The Site Title is small and not resizable. We had that issue in 2007 also, but we could fix it will a simple CSS addition. Here the title is part of the crumb trail.
  
• Can you even tell if this site is a subsite of another site? (other than I named it #2)  You can click the Navigate Up button to find out:
  
  
• The “Home” text is almost ok, but I can’t edit this. (easily anyway)

 

In a document library:

 

Issues:

• No room for long titles, especially with lists with long names
  
  
• The View dropdown menu is now in the crumb trail! Any redesign/branding we do may lose the view menu!
  
  
• When you dig into the CSS for this area, there is no clean way to set a new font, color or size. I’ll show how in another article (here), but it’s not as easy as it was in 2007.

 

In the library’s Security Documents folder:

 

Issues:

• If I was happy with the issues already listed, then this screen is OK, but drill down another folder…

 

In a sub folder of Security Documents:

 

Issues:

• When you get down to a sub-folder the crumb trail fails. There is no one-click way up to the parent folder. Your only option is to use Navigate Up (two clicks), or go to the top of the library and drill back down.
   
  The Navigate Up dropdown:
  

 

 

A Possible Solution

 

Below is the result I want… a big title, and a working crumb trail with all of the folders.

 

Home page:

 

In a library with nested folders:

 

How to get there?

• Hide the existing crumb trail, but leave the Site Title
• Restyle the Site Title (color, font, size, etc)
• Add the SharePoint 2007 crumb trail control
• Copy the part of the hidden crumb trail’s HTML that displays the View dropdown to just after the 2007 crumb trail
• Restyle the View dropdown to match the 2007 crumb trail

Steps:

1. Open SharePoint Designer 2010, open your site and open the v4.master master page for editing
    
2. Hide the existing crumb trial:
   1. Search for “PlaceHolderPageTitleInTitleArea” and add a DIV block around the two lines before and one line after this text: 
      
      
      This will hide the existing crumb trail, but also hides the View dropdown which we will need later.
       
   2. Restyle the Site Title
      At the end of the page, just before the </BODY> tag add a <STYLE> block something like this: (new code in bold)
       

      <style type="text/css">
        .s4-titletext h1 a
        {
          color:Blue;
          font-size:24pt;
        }
      </style>

      </body>

   3. Add the SharePoint 2007 crumb trail control and a DIV for the View dropdown – I put it just before “PlaceHolderMain” to be near where it was in 2007:  (new code in bold)
       
      <a name="mainContent"></a>
       
        <div>
           <br/>               
           &nbsp;<asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap2" SkipLinkText="" NodeStyle-CssClass="ms-sitemapdirectional" runat="server"/>&nbsp;
          <span id="myViewDiv"></span>
           <br/>
      </div>
       

      <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server">
      </asp:ContentPlaceHolder>
       

   4. We hid the old crumb trail, but we need the HTML that displays the View dropdown menu. The code here moves that HTML to our crumb trail:
       

      <script type="text/javascript">
        var OldCrumbTrail = document.getElementById("ctl00_PlaceHolderPageTitleInTitleArea_ctl01_ctl00");
        var NewCrumbTrail = document.getElementById("myViewDiv");
        OldCrumbTrail.childNodes[0].innerHTML=">";
        NewCrumbTrail.outerHTML = OldCrumbTrail.outerHTML;
        OldCrumbTrail.innerHTML = "";
        OldCrumbTrail.id="NOT_ctl00_PlaceHolderPageTitleInTitleArea_ctl01_ctl00";
      </script>

   5. Restyle the View dropdown to match the 2007 crumb trail – just add the following to the style block we created before:
       
      <style type="text/css">
        .s4-titletext h1 a
        {
          color:Blue;
          font-size:24pt;
        } 

        #zz17_ListTitleViewSelectorMenu
        {
            font-size:8pt;
        }
      </style>
       

 

.

 

 

 

SharePoint 2010: Where are the Icons?

 

This article might be titled… Fun with SharePoint 2010 branding. I was trying to find the icon used as the divider in the SharePoint 2010 Site Title / Crumb Trail. It’s the little triangle below:

 

SharePoint 2010 Icons

So I was browsing the source HTML looking for the icon and ran across this image tag:

<img src="/_layouts/images/fgimg.png" alt=":" style="border-width:0px;position:absolute;left:-0px !important;top:-585px !important;" />

So my image must be fgimg.png, but it was not just he “” symbol I was looking for. Scroll down to the end of this page to see the image and you will find that it’s not a single image, but collection of images in a single file. The image I was looking for was 585 pixels down in the file!

Actually, this is a kind of  cool trick. On the first reference the single file is downloaded and cached. When the next icon is needed, it’s already in the browser’s cache.

So how you get a single icon from the file? Based on how SharePoint does it, there are two parts:

1. In the IMG tag set a negative number for the “top” style to skip the first set of icons:
      “top:-585px !important;”
   
2. Wrap the image in a SPAN and crop out just the part you want by setting a height and width:
      “<span style="height:11px;width:11px;”

<span style="height:11px;width:11px;position:relative;display:inline-block;overflow:hidden;"><img src="/_layouts/images/fgimg.png" alt=":" style="border-width:0px;position:absolute;left:-0px !important;top:-585px !important;" /></span>

So, they build a box 11px by 11px and displayed fgimg.png in it, but offset by 585 pixels.

 

Sprites?

The correct term for these kinds of files are CSS Sprites.

Here’s two nice articles on CSS Sprites, and the second one has a huge number of examples:

http://www.thewebsqueeze.com/web-design-articles/an-introduction-to-css-sprites.html

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

 

SharePoint Sprites

Here’s a few of the sprite files I’ve found:

These can all be found in:

    C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\IMAGES

Or from you browser:

    http://yourserver/sites/yoursite/_layouts/images/filename.png

 

How do you build your own sprite files?

By hand of course! (why not?)  Or, do a little web searching and you can find tools to build them for you.

 

fgimg.png

Sample SharePoint sprite: (the black background is the “transparent color” that is ignored when image is displayed.

 

.

SharePoint: A Better People and Groups View

 

Customize the SharePoint People Views

SharePoint All People and Group views are a bit light weight. If you want to know someone’s phone number you have to click their name and wait for another page to load, or to see if they are a Site Collection Administrator you have to visit another screen. Normally we would just click the View dropdown and click Modify View or Create View, but the View menu here only has:

  

Won’t it be nice if you could add more columns, or even group, sort or filter the list of users???

 

Fields Available

Turns out you can create your own views of People and you have 35 fields to choose from including both SharePoint and user profile data: (Items in the default views are in bold)

 

About me Account Attachment Content Type Content Type Create Created By Deleted Department Edit (Edit) Edit (link to edit item) First name

ID Is Site Admin Last name Modified Modified By Name Name (linked to item with edit menu) Name (linked to item) Name (with picture and details) Name (with picture) Name (with presence) Office

Picture Responsibilities Selection Checkbox (checkboxes)  SIP Address Title Type (icon linked to document) User name Version Web site Work e-mail Work phone

 

SharePoint 2010 adds: Mobile Phone

 

 

This is the default “Details” view:

 

 

To customize people views:

• Go to the top level site in the site collection (important!)
• Go to People and Groups (or Site Actions, Site Permissions in 2010) and click on any group, including All People (they all share the same views)
• Go to Settings, List Settings and scroll down to the Views section.

• Click Create View (Rather than changing the exiting views you probably should create a new view)
• Select your view options like any other view
• Optional: set sort, group, filter and other View options
• Save the changes
• Note: This will leave you in the new view, but the View dropdown will not be displayed, return to People and Groups (or Site Actions, Site Permissions in 2010)  and the view will be displayed correctly

 

 

Here is a customized view:

 

 

And the View dropdown now has your new view:

 

Here’s a SharePoint 2010 example with grouping by department:

 

Enjoy!

 

.