Monday
Jun242013

Banner with Quick Access to Search a SP2010 List

This is a quick piece of script and HTML that I threw together to help make it easier for our users to search a list or library in SharePoint when they were on a view page. Once added to your environment you can add this to the top of any view and it will both display the name of the list in the banner and dynamically set itself up to search the list/library that the hosting view lives on.

There is a search control included in SharePoint but this saved a few steps (clicks) we thought might be critical in getting people to use search more often and it makes for a nice custom banner to boot. With a little tweaking you can further change the banner text, the control's watermark and the banner image. With a few small changes this could also have the scope set to the site instead of a list.

All of the code, images and documentation for deployment is in the accompanying .zip file. Let me know in the comments if you have further suggestions.

DOWNLOAD SEARCH BANNER

//Kevin

Wednesday
Apr032013

Metro-Style Easy Tabs for SharePoint 2010

This is an item I flashed a development iteration of to the group in my Richmond SharePoint Saturday presentation and have since cooked up what is called 'V2' of the effort but is really the first version that I've made available. This approach just simplifies the initial version by making the tile's images all the same, though I did add a dynamic element to the colors. I'm not yet sure if that is a good idea, so I have instructions below to turn that off if you'd like. This is all based on the brilliant client-side Easy Tabs script that I just modified and simplified for the new visual style.

You can deploy these as you would 'normal' Easy Tabs for SP, my instructions for using the original script are here though you'll want the new code as it is not in that package:

Want to kill the random tile colors? Yeah, can't say I blame you...

Edit line #108 in the file from this:

var colorNumber = 1 + Math.floor(Math.random() * 9); // random start 1-9

to this (where the '1' can be any number from 1 to 9) :

var colorNumber = 1;


I may make more versions of this, including one allowing for a single color for the tiles.  Let me know if there is a feature that you might like that I should consider.  I'm not sure yet how to reliably incorporate custom images per tab (that make sense to the tab's context) without the end user editing the script and violating the plug and play goal here.

This version looks like the above screenshot with both a hover effect and a visualization for selected items.  Over-n-out.

Saturday
Mar232013

The Cheapskate's Guide: Extending SP 2010 Functionality

This is what I am presenting at SharePoint Saturday in Richmond VA and the accompanying file packages that go with that talk. There are 13 items total, each of them containing any scripts and resources needed (that I can provide) and a PDF breakdown of what it takes to deploy them. 5 of the 13 use Javascript controls I picked up for cheap from Codecanyon.net, you'll need to grab the control mentioned to get these to work, the others contain all that you need to get running. Drop me a line if you do something cool with one of these or modify them.

 


The Slides:

The Controls:

  1. Calendar Viewer (free)
  2. Foobar Alerts - $2 Coffees (foobar 2.1)
  3. Tabs – Original (free)
  4. Tabs – Metro (free) (Edit:Published here!)
  5. News Page Rotator - $4 Coffees (Royal Slider 9.4.8)
  6. FAQ (free)
  7. Tabbed Container - $4 Coffees (Zozo Tabs v2.2)
  8. I Want To (free)
  9. Image Rotator - $3 Coffees (jQuery Banner Rotator)
  10. Google RSS Static (free)
  11. Google RSS Scrolling (free)
  12. Snow - $1 Coffee (JSized Snow Effect)
  13. Google maps traffic widget (free)

Other links of note:

Monday
Mar112013

Outlook-Fu: How to 'Snooze' Email in Your Inbox

If you are like most people today (including me), your inbox doubles as your to-do list and is the roadmap for what you need to take care of each day. We know that it is not ideal, but is what the majority of us use, because it is there and contains our action items already. Below are instructions for setting up a way to 'snooze' email messages so, much like you do with appointments that pop up in the Outlook reminder, you can hide them from view until they need attention. I find that the lack of clutter created by things I don't need to address yet keeps my inbox streamlined and easier to manage.

To do this we'll be creating a new view of our inbox and setting a filter. Instructions and screenshots are shown in Outlook 2013 but the same options discussed are available with Outlook 2010 as well.

Step 1 – Create a new view

  1. Navigate to your inbox
  2. In your 'view' tab, under 'Change View', choose 'Save Current View as New View', give this view a name and allow it to be used on All Mail and Post folders
  3. Now you have a duplicate view and can hop back between this and your original view at will via the 'View' -> 'Change View' option.

Step 2 – Configure a Filter

We want the new view to only show items that both have no Due Date (otherwise we don't see any new items) and those that have a due date of today or before. To do this you:
  1. Open 'View Settings' in your View menu
  2. In the Advanced View Settings dialog, choose 'Filter'
  3. In the 'Advanced' tab, add an item for 'Due Date', you'll find that under 'Frequently-used Items' and set it's condition to 'does not exist'. Then add this rule to the list.
  4. Repeat the previous step, adding another Due Date filter but with the condition of 'on or before' and in the 'Value' field type Today and add the rule to the list. You will have the following 2 rules showing now. Click OK both here and in the Advanced View Settings to return to your new view. You are done.

Using your new View and Powers of Snooze

Now, when you right-click the flag icon beside a message in your inbox you are shown the due date flag options that look like this:

When you open these flag options for a message and set the due date flag to one of the dates in the future, say tomorrow, it will now disappear from the view of your inbox until tomorrow. Out of sight, out of mind. Note that setting an item to 'This Week' will set the reappear/due date to the upcoming Friday and 'Next Week' will set it to the following Monday. You can choose 'Custom' to set any specific date you want to have it reappear as well, even telling Outlook to throw a reminder if you like.

Items that you set to a future date will now hide until you want them to reappear, though you can always shift to your original view (which is why we made a copy of that view to begin with) in order to see all items in case you need to get to a message before it's due date.
Tuesday
Jan152013

A Fresh Visualization for SharePoint Calendars with SPServices

This is a set of scripts that can be dropped into a SharePoint 2010 deployment to allow for an alternate view of calendar lists.

There was also a request to color cancelled items that the user had on the calendar so I've left that code in there. The widget display start and end times as well as alter the behavior for those events that span days. I also added CAML support so you can provide your own query to it if you want or just you the built-in default. There is a separate CSS file to do your own styling and a few images that I use. One is optional and controlled by the arguments to the script.

I chose to set this up to live in our farm's common repository and be called relatively easily from any page so you see 2 files here, one being the LoadCalendarWidget function and the other being the code we drop into a page to create the calendar control. Options/args you pass to the function are:

  1. Site's URL, no end '/' character
  2. List name
  3. Title to appear for the webpart
  4. GUID of your calendar list
  5. # of results to show
  6. Optional CAML query to use
  7. Indicator to show icon or use 'Add to Outlook' text instead

If you want to keep it simple and not place file directly on your farm's servers, the zipped package below has all of the files needed and is just about ready-to-use for a dirt-simple deployment.  There is a PDF included that contains instructions on use that are a little more detailed than in the posting that follows.

Download all code and images used here.

This is the code we call to create the control. I house this in a text file in a library and add to the page in a CEWP as the 'Content Link'.

<!-- jQuery -->
<script type="text/javascript" src="https://myfarm/_layouts/1033/jquery.SPServices-0.7.2.min.js"></script>
<script type="text/javascript" src="https://myfarm/_layouts/1033/jquery.dateFormat.js"></script>
<!-- Calendar Widget -->
<script type="text/javascript" src="https://myfarm/_layouts/1033/jquery.SPS.Calendar_Widget-1.0.js"></script>
<link href="/_layouts/1033/styles/Calendar_Widget.css" type="text/css" rel="stylesheet" />
<script language = "javascript">
	$(document).ready(function() {		
		LoadCalendarWidget("https://myfarm/hr/", "Upcoming HR Events Calendar", "Event Calendar", "{B7FE9372-9724-4504-9699-DEDD445B1BA3}", 8, ,true);	
	});	
</script>
<div id="cw_TopContainer" style="margin-bottom:15px;"><div id="cw_HeaderContainer"><table style="width:100%;"><tr><td><span id="cw_HeaderTitle"></span></td><td style="text-align:right;"><a id="cw_HeaderLink" href="#" >Calendar View</a></td></tr></table></div><div id="cw_ItemsContainer" /></div>

And this is the function. I put it in our 14 hive for access across the farm, you put it where you want, just make sure the script source in the code above points to where you dropped this.

// REQUIRES:
// - jquery-1.8.0.js or higher
// - jquery.SPServices-0.7.2.min.js or higher
// - jquery.dateFormat.js

function LoadCalendarWidget(cw_SiteUrl, cw_ListName, cw_ListNameForHeader, cw_EncodedListGuid, cw_ReturnRowCount, cw_CAML , cw_ShowIcon)
{
	// USAGE: --------------
	// cw_SiteUrl = "https://myfarm/hr/"; // Site's URL, no end '/' character
	// cw_ListName = "HR Events Calendar"; // List name
	// cw_ListNameForHeader = "Upcoming HR Events";  // what will appear in webpart
	// cw_EncodedListGuid = "{B7FE9372-9724-4504-9699-DEDD445B1BA3}";  // GUID of your calendar list
	// cw_ReturnRowCount = 15;  // # of results 
	// cw_CAML = Your optional CAML query
	// cw_ShowIcon = true;  // false will use 'Add to Outlook'

	var cw_ListUrlForHeader = cw_SiteUrl + '/lists/' + cw_ListName;
	var cw_IcsEventPath = cw_SiteUrl + "/_vti_bin/owssvr.dll?CS=109&Cmd=Display&List=" + cw_EncodedListGuid + "&CacheControl=1&Using=event.ics&ID=";
	var cw_ListItemDetailPath = cw_SiteUrl + "/Lists/" + cw_ListName + "/DispForm.aspx?ID=";
	var cw_CamlQuery = "";
	if (cw_CAML.length < 2) {
		cw_CamlQuery = "<Query><Where><Geq><FieldRef Name='EventDate' /><Value IncludeTimeValue='TRUE' Type='DateTime'><Today/></Value></Geq></Where></Query>";}
	else { cw_CamlQuery = cw_CAML; }

	// format header info
	$('#cw_HeaderTitle').html(cw_ListNameForHeader);  // title
	$('#cw_HeaderLink').attr('href',cw_ListUrlForHeader); // link
	
   $().SPServices({
		operation: "GetListItems",
		webURL: cw_SiteUrl, 
		listName: cw_ListName,
		async: false,
		CAMLRowLimit: cw_ReturnRowCount,
		CAMLQuery: cw_CamlQuery,	 
	 
		completefunc: function (xData, Status) {							
		   $(xData.responseXML).SPFilterNode("z:row").each(function() {				
				var cw_id = ($(this).attr("ows_ID"));
				var cw_title = ($(this).attr("ows_Title"));
					if(cw_title.length == 0) {cw_title = 'No event title.';}
					
				// By request, if an item is canceled, make that fact stand out.
				cw_title = cw_title.replace("Deleted:","<span class='cw_canceled'>DELETED:</span> ");
				cw_title = cw_title.replace("DELETED:","<span class='cw_canceled'>DELETED:</span> ");
				cw_title = cw_title.replace("Cancelled:","<span class='cw_canceled'>CANCELLED:</span> ");
				cw_title = cw_title.replace("CANCELLED:","<span class='cw_canceled'>CANCELLED:</span> ");
				
				// Clean up date formats				
				var cw_startdateday = 		$.format.date(($(this).attr("ows_EventDate")), "M/d/yyyy");
				var cw_startdatetime = 		$.format.date(($(this).attr("ows_EventDate")), "h:mm a");
				var cw_startdate = 			cw_startdateday + ' - ' + cw_startdatetime;
				var cw_enddateday = 		$.format.date(($(this).attr("ows_EndDate")), "M/d/yyyy");
				var cw_enddatedaytime = 	$.format.date(($(this).attr("ows_EndDate")), "h:mm a");
				var cw_enddate = 			cw_enddateday + ' - ' + cw_enddatedaytime
				
				var cw_CX = '<div class="cw_item">';
				if(cw_startdateday == cw_enddateday)  // single day event
				{
					cw_CX += '<table width="100%" cellpadding="0">';
					cw_CX += '<tr><td colspan="2"><a href="' + cw_ListItemDetailPath + cw_id + '" target="_new" class="cw_title">' + cw_title + '</a></td></tr>';					
					cw_CX += '<tr><td><span class="cw_time">' + cw_startdateday + ' ' + cw_startdatetime + ' to ' + cw_enddatedaytime +'</span></td>';
					cw_CX += '<td align="right" valign="top"><a href="' + cw_IcsEventPath + cw_id + '" target="_new">';					
					if(cw_ShowIcon) {
						cw_CX += '<img src="FARM/Images/add_item.png" class="cw_addIcon" title="Add to Outlook Calendar" /></a></td></tr>'; 
					}
					else { cw_CX += '[Add to Outlook]</a></td></tr>'; }						
					cw_CX += '</table>';
				}
				else // multi day event
				{
					cw_CX += '<table width="100%" cellpadding="0">';
					cw_CX += '<tr><td colspan="2"><a href="' + cw_ListItemDetailPath + cw_id + '" target="_new" class="cw_title">' + cw_title + '</a></td></tr>';					
					cw_CX += '<tr><td><span class="cw_time">Start:' + cw_startdate + '</span></td><td align="right" rowspan="2" valign="top"><a href="' + cw_IcsEventPath + cw_id + '" target="_new">';
					
					if(cw_ShowIcon) {
						cw_CX += '<img src="https://cbhq.cbh.com/_layouts/images/myelite2/cal/add_item.png" class="cw_addIcon" title="Add to Outlook Calendar" /></a></td></tr>';
					}
					else { cw_CX += '[<a href="' + cw_IcsEventPath + cw_id + '" target="_new">Add to Outlook]</a></td></tr>'; }						
					cw_CX += '<tr><td><span class="cw_time">End:' + cw_enddate + '</span></td></tr>';
					cw_CX += '</table>';				
				}				
				cw_CX += '</div>';
				$("#cw_ItemsContainer").append(cw_CX); // insert into DOM						
		   }); // -- $(xData.responseXML).find   
		} // -- completefunc
   }); // -- $().SPServices({
} // -- LoadCalendarWidget()