One request we frequently receive is to allow to colour events in a Calendar list for easier finding and viewing. Path to SharePoint offers a script that you may want to check. And that's basically what I did; didn't feel like reinventing the wheel. So go here and follow the instructions. If you have any questions about the original site, contact [email protected]

But before you start, make sure you have the following:

- Calendar list ready to be used
- A choice column of your preference, which will be use to categorize the events on your Calendar list
- A displayed column already designated (for example, Title)
- A separate Colour column (calculated value)
- Another calculated value column (for example, ColouredEvent)

Follow the instructions on that site and you should be all set. If you have any doubts, I can assure you we were able to successfully implement this solution on SharePoint 2010.

It might get a little bit tricky when you have to create the view that will display the colour-coded events. If you don't pick the right columns, it won't work. Find below a sample image of how the Calendar view should be set up.



The final thing you will need is to reference the script from the page where you are displaying the coloured view of the Calendar list. To do so, upload the script to a document library, go back to the page where your calendar view displays, edit it to insert a Content Editor Web Part (CEWP), and reference the script file from the CEWP). Save and publish the page. It should work.
 
It is not unusual that customers will ask for list filters to be created. While many users who are used to SharePoint would probably use the column headers to filter, not all users are SharePoint savvy and that's how I get those requests.

This solution will show how to create an alternative for those cases when customers want something looking more like a regular Web page and not like a SharePoint list.

The elements I usually use for this solution are:
    - Filters (Blank Web Part) page
    - Custom list with the information to be filtered
    - HTML Form Web Parts, one per needed filter
    - HTML custom code
    - Data Connections

Step 1 - Create Custom List

For the sake of time, I'm going to assume you have your custom list already created, including views and everything else. In my example, I'm going to be using a very simple list that tracks people on duty for three available shifts (morning, afternoon, and evening).

Step 2 - Create Filters Blank Web Part Page

In SharePoint, go to the Pages library and create a Blank Web Part Page and name it Filters or anything else that might better suit your needs.

Step 3 - Add HTML Form and List Web Parts to the Filters Page

Edit the Filters page and add one HTML Form web part for each filter you are going to be needing plust the Clear All Filters button within the web part zone or zones of your choice. Add the custom list view web part somewhere on the page, as well. And don't forget to edit the list web part to apply the list view of your choice.

I don't like the web part chromes, or their titles. So I usually remove all those settings and I add Content Editor Web Parts right above or next to the HTML Form Web Parts to include meaningful text for my users and I format the text to my needs. So feel free to do so, as well.

Step 4.a - Provide Appropriate HTML Code - Clear All Filters

Edit the HTML Form Web Part that will be acting as the Clear All Filters button.

Select [Source Editor...] at the Form Content Editor section of the web part tool pane. This is how the code usually looks:

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_"><input name="T1"/><input value="Go" onclick="javascript:_SFSUBMIT_"/></div>

 
One comment about this code. I don't know in your experience, but in mine, many users do not really understand what 'Go' means. So for this reason, I always prefer to change that to either Clear All Filters, or Apply Filter depending on my situation. So in this case, it is going to be renamed to Clear All Filters. And I also modified the rest of the code to look like this:

<div style="text-align: left">
<input onclick="location.href=&#39;https://SiteURL/Pages/Filters.aspx&#39;" value="Clear All Filters"/>
</div>

(Note: If the code above gives you trouble, see the note added on August 2012 at the bottom of this post)


If you would prefer a different alignment, replace left with either right, or center. Replace SiteURL in the code above to the full path to your Filters page. Save the web part. This code will simply "refresh" the page to make it look like the list has been cleared of all filters when selected (clicked).

Step 4.b - Provide Appropriate HTML Code - By Person

Edit the HTML Form Web Part that will be acting as the first of your filters; in our example, the first filter will be used to filter the list based on person name. Select [Source Editor...] at the Form Content Editor section of the web part tool pane and replace the code with the following,

<left>
<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<select name="Title">
<option value=""></option>
<option value="Anne">Anne</option>
<option value="Jane">Jane</option>
<option value="Mary">Mary</option>
<option value="Susan">Susan</option>
<option value="Tim">Tim</option>
</select>
<input type="button" value="Apply Filter" onclick="javascript:_SFSUBMIT_"/></div>
</left>

If you would prefer a different alignment, replace left with either right, or center.

Since I used the Title column to save the names on my list, this is the value I input where it reads select name, even when I renamed that column to Name. It is important to point out that the code will only work with the internal name of the column.

The first option value remains with no option for when nothing has been selected, yet. Replace the rest of the values and add or remove lines to matching your needs.

Save the web part.

Step 4.c - Provide Appropriate HTML Code - By Shift

Repeat all the steps in section 4.b and replace the code with the following,

<left>
<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
<select name="Title">
<option value=""></option>
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
<option value="Evening">Evening</option>
</select>
<input value="Apply Filter" onclick="javascript:_SFSUBMIT_"/></div>
</left>

Make changes as appropriate to match your needs and save the web part.

Step 5 - Establish the Data Connections

This is where people may differ on how to proceed. Some people use SharePoint Designer to establish the data connections. However, for simple data connections like the ones in this example, you may establish them within SharePoint itself. And that's what I'm going to explain in the next lines.

Edit the first HTML Form Web Part (By Person). Select Connections > Provide Form Values To > Daily Schedule (or the name of your list).


SharePoint displays the Choose Connection web page dialog. In the 1. Choose Connection tab, select Get Filter Values From at the Connection Type drop-down list and then select [Configure].

SharePoint switches to the 2. Configure Connection tab. Select the Provider Field Name (for our example, that would be Title) and the Consumer Field Name (For our example, Name) from the respective drop-down lists and then select [Finish].


Edit the second HTML Form Web Part (By Shift). Select Connections > Provide Form Values To > Daily Schedule (or the name of your list).

SharePoint displays the Choose Connection web page dialog. In the 1. Choose Connection tab, select Get Filter Values From at the Connection Type drop-down list and then select [Configure].

SharePoint switches to the 2. Configure Connection tab. Select the Provider Field Name (for our example, that would be Title) and the Consumer Field Name (For our example, On Duty) from the respective drop-down lists and then select [Finish]

Save the page. Test the filter buttons. If everything looks satisfactory, check the page in (and publish it if publishing is turned on for your site).

This is how my page looks like now:



If I apply the By Person filter for 'Anne,' this is how it looks:



And this is how it looks if I apply both By Person = Anne and By Shift = Morning.


Note: When teaching your site users how to apply these filters, you will need to point out that they will need to select [Apply Filter] for all the filters they would like to apply, one at a time.


UPDATED January 2013: I had some problems reusing the code for the Clear All Filters button at a different customer. I had to swap some things around and this is the resulting code, which you can try if you are experiencing problems, as well:

<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_"><input type="button" value="Clear All Filters" onclick="location.href=&#39;https://SiteURL/Pages/Filters.aspx&#39;"/></div>


Bonus: Code for ABC Filter

    <div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
    <select name="IndexChar">
    <option value=""></option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
    <option value="H">H</option>
    <option value="I">I</option>
    <option value="J">J</option>
    <option value="K">K</option>
    <option value="L">L</option>
    <option value="M">M</option>
    <option value="N">N</option>
    <option value="O">O</option>
    <option value="P">P</option>
    <option value="Q">Q</option>
    <option value="R">R</option>
    <option value="S">S</option>
    <option value="T">T</option>
    <option value="U">U</option>
    <option value="V">V</option>
    <option value="W">W</option>
    <option value="X">X</option>
    <option value="Y">Y</option>
    <option value="Z">Z</option>
    </select>
    <input value="Apply Filter" onclick="javascript:_SFSUBMIT_"/></div>
    </left>


 
The solution presented here is an alternative to the Rollover Buttons Using CSS (Two Images Per Button) solution.

For this solution I use:
    - One image per button needed
    - CSS
    - Content Editor Web Part

I also like to refer to this solution as the "stacked image" solution.

Step 1 - Create The Necessary Rollover Button Images

Use the imaging tool of your preference, such as Photoshop or Fireworks, to create an image for every button you will be needing for your particular case. You cann also get the buttons from a reliable, trusted source. Make sure that all of your buttons are of the same exact size and shape so it looks better. Once you have created or acquired the
Picture
images, upload them to the SharePoint library of your choice.

For our example, we're going to pretend that our image is contactus.png.


Step 2 - Create The Necessary CSS Styles

Within your copy of Microsoft's original css file, create the following classes,

#contactUs
{
  display: block;
  width: 210px;
  height: 106px;
  background: url('https://PathToImageLocation/contactus.png') no-repeat 0 0;
}


#contactUs:hover
{
  background-position: 0 -106px;
}


#contactUs span
{
  display: none;
}

 
Change width and height to match your image width and height, as well as the location to the file itself.

Step 3 - Display The Button On The Appropriate Page

Add a Content Editor Web Part to the page where you would like to display the button. Make all applicable changes to the web part, such as giving it a meaningful name, removing the chrome, etc.

Select the Content Editor Web Part Click here to add new content link.

Locate the HTML icon within the Markup section of the ribbon, select it, and then select Edit HTML Source.

Type in or copy and paste the code below in the HTML Source web page dialog that displays:

<DIV align=center><A id=contactUs title="Contact Us" href=DestinationURLhere target=""></A></DIV>

Replace the id value above with the name of your own CSS, as well as the title applicable to your own situation. Don't forget to also replace the URL to point to the file, site, Web site, library, etc., applicable to your needs.

 
This solution is for when you need to publish a button on a page, not on the Top Nav or Quick Launch.

I prefer using one single image per button and make the image "shift up and down" depending on whether is just active or being hovered. But there are going to be situations where two images are necessary. This is one solution I use for those cases.

For this solution I use:
    - Two images (one for each button status)
    - CSS
    - Content Editor Web Part

Step 1 - Create The Necessary Images Using a Graphics Tool

Create your own button using an application such as Photoshop or Fireworks, or use one from a trusted source.

The trick is to make the images look exactly the same size so when they swap they do so seamingless. You should also make sure that the label you will be using is of the exact same font type and size for both images. Feel free to change the font colour if the background of oneof the images merges too much with it. However, make sure to keep it the same size and font family, as well as position within the image, so they swap smoothly.

Once you have created or acquired the necessary images, upload them to the SharePoint library of your choice.

For our example we're going to pretend that our images are catalog.jpg and cataloghov.jpg.

Step 2 - Create The Necessary CSS Styles

Within your copy of Microsoft's original css file, create two classes. One will be used for one button status, while the other one will be used for the other button status.

Button Normal Status:

#catalog
{
    display: block;
    width: 155px;
    height: 60px;
    background: url("https://PathToImageLocation/catalog.jpg") no-repeat 0 0;
}


Change width and height to match your image width and height, as well as the location to the file itself.

Button Rollover Status:

#catalog:hover

    background: url("https://PathToImageLocation/cataloghov.jpg") no-repeat 0 0;
}
 
Step 3 - Create The Content Editor Web Part to Display the Button

Insert a Content Editor Web Part on the page where you want to display the button. Make all applicable changes to the web part, such as giving it a meaningful name, removing the chrome, etc.

Select the Content Editor Web Part Click here to add new content link.

Locate the HTML icon within the Markup section of the ribbon, select it, and then select Edit HTML Source.

Type in or copy and paste the code below in the HTML Source web page dialog that displays:

<DIV align=center><A id=catalog title="Catalog" href=DestinationURLhere target=""></A></DIV>

Replace the id value above with the name of your own CSS, as well as the title applicable to your own situation. Don't forget to also replace the URL to point to the file, site, Web site, library, etc., applicable to your needs.
 
Another frequent request I receive is the ability to post a message that the site is under construction or an important announcement needs to be displayed. For the announcements, many of my customers do not want to use the actual SharePoint Announcement list. They just want something that stands out on their home page.

So I usually provide one of two solutions:
    - Scrolling Marquee with no styles
    - Scrolling Marquee with styles

Scrolling Marquee (No Styles)

Well, what I actually mean by 'no styles' is simple HTML code with no need to create XSL templates. Usually this is the easiest way to go. But for some other assignments with more complex needs, I had to recourse to well, a little bit more complex of a solution.

And for the simple, easy to implement solution, this is what I do:
 
1. Add a Content Editor Web Part to the page where you would like to display a marquee

2. Edit and modify the Content Editor web part properties, remove the chrome, make any other changes as desired, give the web part a meaningful name (for example, Marquee), and then select [Apply] followed by [OK]

3. Select Click here to add new content at the Content Editor Web Part

4. Locate the HTML icon within the Markup section of the ribbon, select it, and then select Edit HTML Source

5. Type in or copy and paste the code below in the HTML Source web page dialog

<FONT face="Verdana" color=#ff0000 size=2>
<P align=center>
<MARQUEE scrollDelay=95 width=500 height=16>
<DIV align=left>Note: Replace this sample text with any message applicable to your particular situation.</DIV></MARQUEE></P></FONT>


6. Select [OK] and save the page (and publish if publishing is turned on for your site)

You can change anything that is highlighted in red above, as well as the sample text in blue to suit your own needs.

Note: If SharePoint modifies the code above after you saved and it doesn't render as desired, create a TXT file containing the code above, upload the file to a document library, and reference the file via the Content Editor Web Part.

Scrolling Marquee (With Styles)

In a handful of situations I had to create something a little bit more complex than the simple HTML marquee above. For those cases, I used the following elements:
    - Site Column (Optional)
    - Custom List
    - Styles (CSS)
    - XSL Template
    - Customized Content Query Web Part

Step 1 - Site Column (Optional)

Since I don't like doing things more times than absolutely necessary, for most part I end up creating site columns for columns I know I'm going to be using at more than one list or library. For this particular scenario, I created a site column named DisplayYN (Yes/No checkbox or Choice (Yes/No) column). For this example, we are going to say the DisplayYN column is Boolean (Yes/No checkbox).

Step 2 - Create Alerts Custom List

The next step was to create a custom list to manage the Alerts. The list would contain only a couple of columns:
    - Title (the text for the alert)
    - DisplayYN site column

You may be asking yourself why the custom list and why the DisplayYN flag. In many projects I have to work on there's a business approval process behind the scenes where usually the person who creates the text and items on the list is not necessarily the one who gives the green light to display the alerts on the sites. So these people go through review processes until everybody is happy and then the person responsible for the site or alerts edits the item and selects DisplayYN to 'Yes.'

Step 3 - Create The Necessary Styles (CSS)

I create a custom style definition in my CSS file (the copy I created from the corev4.css file). If you have been following my posts, then you know how I advocate towards making copies of Microsoft's files and leaving their original files alone. So back to that point, the following is an example class I may create:
.myAlert
{
     font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 10pt;
    padding: 3px 3px 3px 3px;
    color: #ffffff;
    font-weight: bold;
    text-align: left;
    background-color: red;
    border: 1px gray solid;
}

Don't forget to check in and publish (if needed) your CSS file for the changes to become visible to those users who have been granted the lowest access levels to the site, as well as registering and referencing your external CSS file on your custom master page, as needed.

Step 4 - Create The Necessary Item Style Templates

In your XSL Style Sheet (the one that I hope you copied from Microsoft's original) I create a template, as follows,

<xsl:template name="Alert" match="Row[@'Alert']" mode="itemstyle">
        <div id="alert" class="myAlert">
         <marquee scrollamount="2" scrolldelay="1"><xsl:value-of select="@Title"/></marquee>
        </div>
</xsl:template>


Some designers also like to include an entry on their Content Query Main to declare the above template. Not everybody follows this rule. Depending on the styles, SharePoint will still render the items on the page, whether you modify the Content Query Main file or not.

Step 5 - Create The Custom Content Query Web Part (CQWP)

I add a CQWP to the home page or page where the alert should display at. I then modify the CQWP to use the custom list as source and I set the filter on DisplayYN equals Yes. That way only those items on the custom alerts list that have been selected to be displayed will display.

For most part, my customers never select more than one item at a time. But they usually want to know which other alerts they had published before. That's when this second solution turns out to be better than the simple HTML shared further above.

Then I export the CQWP to my computer and I open it using a tool like Notepad. I then make the following changes:

<property name="ItemXslLink" >/sites/SiteName/Style Library/XSL Style Sheets/CUSTOMItemStyle.xsl</property>

<property name="MainXslLink" >/sites/SiteName/Style Library/XSL Style Sheets/CUSTOMContentQueryMain.xsl</property>

<property name="Xsl" >&lt;xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:cmswrt="http://schemas.microsoft.com/WebPart/v3/Publishing/runtime" exclude-result-prefixes="xsl cmswrt x" &gt; &lt;xsl:import href="/Style Library/XSL Style Sheets/Header.xsl" /&gt; &lt;xsl:import href="/Style Library/XSL Style Sheets/CUSTOMItemStyle.xsl" /&gt; &lt;xsl:import href="/Style Library/XSL Style Sheets/CUSTOMContentQueryMain.xsl" /&gt; &lt;/xsl:stylesheet&gt;</property>

I save and then I import the updated CQWP to the page. The last thing is to select my style within the drop-down Presentation list within the CQWP tool pane. And finally, I delete the original CQWP from the page once I make sure the customized one is working as expected.
 
Visit this page to view a list of the Locale IDs (LCID) applied in XSL format statements to select the appropriate one for your particular needs if date, time, currency, or all of the above are not displaying in the desired or needed format on a Data View Web Part. (This also applies to Content Query Web Parts.).
 
The steps below allow you to add a "Welcome to the site, Jane Doe!" welcome message to a page. We did this to insert it to an Announcement list.
1. Using SharePoint Designer, insert a Data View Web Part based on the Announcement list;

2. Select Data > Conditional Formatting;

3. Select any data value and select Create;

4. Select Show Content;

5. Create a condition that reads Title EQUALS [Current User] and select [OK];
 
6. Go back to the Design view;

7. Type "Welcome to the site, " inside one of the Table cells;

8. Switch to Code view;

9. Find the following code:

<ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>

10. Change this code to:
<ParameterBinding Name="UserID" Location="CAMLVariable;ServerVariable(LOGON_USER)" DefaultValue="CurrentUserName"/>

11. Scroll up in the code and find "Welcome to the site, "

12. Change this code to: "Welcome to the site, <xsl:value-of select="$UserID"/>"

13. Save the page.

 
As part of one of my assignments I needed to insert four Content Query Web Parts at the bottom of my custom master page for the site. This was a somewhat easy thing to do in MOSS 2007 and you would do it only once on the master page itself. Well, that’s not the case in SharePoint 2010 anymore. You cannot insert Web Parts on a SharePoint 2010 Master Page at all. However, I found a way around it.

Microsoft might have taken that functionality away from us in what concerns Master Pages. But… they have not taken it away when it comes to page layouts. You can insert web parts in a custom page layout.

The main con about this approach is that if you need those web parts available to all pages being created on your site, then you have to create a copy of each page layout available out there and insert the web parts to all of them. So when your customers create new pages, the web parts are going to be there. (By inserting them once in the MOSS 2007 master page you were done; now you have to replicate the job for all page layouts for which you want those web parts to display.)

Note: As I always emphasize, make sure you are working on a copy of Microsoft’s originals and leave the originals from Microsoft alone.

This is what you need to do:
1. Create some “test” or “hidden” page somewhere on the site where you can create your web parts and edit the page;

2. Insert the web part at any web part zone on the page (it doesn’t really matter where since this is more of a placeholder until you are done creating the web part completely). In the case of custom Content Query Web Parts, do all of the necessary customizations to the web parts, style sheets, CSS rule sets, etc.

3. Download the web part or web parts to your hard drive;

4. Upload the web part or web parts to the site’s Web Part Gallery;

5. Using SharePoint Designer, open your custom page layout
 
6. Go to the location of the page where you would like to insert the web part (it could be a row or cell in a table or a <div>); I usually work in split mode. You may want to use the Code or Design view; it’s up to you and whatever it is easier for you.

7. Select the Insert tab on the ribbon and then select Web Part within the Web Parts group;

8. SharePoint Designer will display a Web Part drop-down menu; locate the web part uploaded in step 4 above and insert it in your page;

9. Save, check in, and publish the page;

10. Go back to your site using Internet Explorer this time (not Designer) and create a page using the modified page layout. Or if you have already created a page using this particular page layout, open it. Make sure the web part is now displaying at the desired location on the page.
 
We once had a situation where users would forget to check in files after checking them out from a document library. So someone came with the idea of creating an "annoying" pop-up to remind the users to check the files back in once they were done using them. This is the result of that idea.

1. Edit the page

2. Add a Content Editor Web Part

3. Edit the Contend Editor web part properties, remove the chrome, and make any other changes as desired, rename the web part to something more meaningful than 'Content Editor,' (for example, 'Pop Up'), and then [Apply] and [OK]

4. Select Click here to add new comment at the Content Editor Web Part

5. Locate the HTML icon within the Markup section of the ribbon, select it, and then select Edit HTML Source

6. Type in or copy and paste the code below in the HTML Source web page dialog

    <script type='"text/javascript"'>
        <alert("Alert Message Here")
    </script>

7. Select [OK] and save the page (and publish if publishing is turned on for your site)

Note: Replace the Alert Message Here text with the appropriate message that you wish to  convey.
 
Once in a while we get a customer who wants us to remove the checkboxes that display at the top on a list view web part.

This can be accomplished within SharePoint 2010 itself and by modifying the applicable list view.

Modify the list and locate the Tabular View section near the bottom. Expand this section and clear the Allow individual item checkboxes option.


Note: After modifying the view, you may need to reapply the view at the web part level on the page where it displays. Sometimes this type of changes are not immediately reflected on the pages, if never. So you have to force the change to go through, in which case you need to edit the page, edit the web part, and select the view at the Select View drop-down list within the List View section of the web part editing tool pane.