My 2011 Year in Review

This is my first “year in review” style blog post. I feel that this year was particularly eventful for me in terms of my web designer/developer career and my personal life, and I thought it’d be a good idea to reflect on those events and capture it here for myself and any interested readers. (more…)

Let it snow! Try my jSnow Plugin for WordPress

Update 2016-12-17: I release a new version of this plugin on the official WordPress plugin repository. Head over there or search for “flurry” in your WordPress site’s “Plugins > Add New” admin page.

Update 2013-12-09: jSnow is not compatible with recent versions of jQuery. Download my latest falling snow WordPress plugin at https://github.com/joshmcrty/jam-flurry. All other information below remains accurate.

Update (12/12/2011): I made a couple of small tweaks to optimize the file size after noticing an issue with the WordPress 3.3 update today. If you downloaded version 0.1 of this plugin, I recommend grabbing version 0.2. The link to the plugin above has been updated to point to the new version.

I love using JavaScript to add simple holiday effects to a website. I’ve tried several different “falling snow” WordPress plugins for my blog, but none of them quite fit my personal tastes. Instead I started looking for a good JavaScript or jQuery plugin that I could wrap up myself as a WordPress Plugin. Eventually I came across an updated/modified version of the jSnow plugin for jQuery.

I liked the simplicity of the plugin and the fact that it performs rather well on all of the browsers I tested (as with most of these animated JavaScripts, performance is highly dependent on the browser and computer itself). I also liked the fade out effect and the fact that I could set it to have a short height, essentially keeping the “falling snow” effect within my website header. (more…)

SharePoint, jQuery, and FullCalendar—Now with SPServices

In the first entry to this series, I demonstrated how you can use a data view web part (DVWP) to emit SharePoint® calendar events as JSON that the FullCalendar jQuery plugin can use. Although it works fairly well, there are some limitations to the solution. It doesn’t handle recurring events, it doesn’t retrieve all events, it doesn’t support pagination/bookmarking, and it doesn’t provide a way to connect the calendar to Outlook® or create alerts.

This post will overcome the first two limitations by borrowing most of the code posted in this discussion thread on CodePlex and doing away with the DVWP altogether. Jim Bob Howard provided a lot of great information, but it’s broken up over several replies and is a bit difficult to follow. I also wanted to expand on the functionality of his solution by displaying events in the local time zone instead of the web server’s time zone and optimizing the web service calls by retrieving as few events at a time as possible instead of getting a month’s worth of events at a time.

Screenshot of a Fullcalendar demo page.
Fullcalendar in all it’s jQuery-themed glory!

(more…)

A jQuery UI Theme for SharePoint 2007

I’ve been using jQuery UI in a few recent projects on my department’s SharePoint® site. In order to provide a consistent user experience, I used the excellent ThemeRoller to create a custom theme that matched our branding. We have a custom master page, custom page layouts, and our own color scheme, fonts, etc. so I wasn’t trying to match the OOTB look and feel of SharePoint.

However, it recently occurred to me that although I’ve seen a few articles about people using jQuery UI to enhance SharePoint, they usually go with a pre-built theme that doesn’t quite blend with the rest of SharePoint. With that in mind, I decided to see how closely I could match the default SharePoint look and feel using ThemeRoller. I’m limiting this to just SharePoint 2007 for now, although I may do a follow-up for 2010 if enough people find this useful.

What if I don’t like the default look of SharePoint?

First, let me say that although I don’t think SharePoint looks terrible (although many would disagree with me on that!), it does look pretty dated. However, I would rather have a SharePoint site look consistently dated than have a cool-looking, modern tab widget in the middle of a SharePoint page; it would stick out and break the flow of the page design.

There is an argument to this of course—you might want your widget(s) to stick out so that users are drawn to them and don’t lose track of what they’re doing in a complex web application. I recognize the potential value in that. However, if that were the case for me, I’d still want the theme to blend, but I’d probably do something like reverse the primary and accent colors or find a complementary color scheme to use.

Second, I’m not criticizing anyone’s efforts in using jQuery UI without a custom theme. The functionality is the important thing. In fact, I’d encourage anyone using jQuery UI to get things working first and worry about a custom theme as the last step. The great thing about jQuery UI is that it’s set up to be themed by simply swapping out a CSS file and a few images. You won’t need to make any edits to your HTML or JavaScript/jQuery to use a custom theme at a later date (although if you’ve done some additional customization to jQuery UI, you may need to tweak a few things). (more…)

Redirect in SharePoint Using Meta vs JavaScript

This morning I was working on a custom list item display form for a “Tags” list that I created in SharePoint (DispFormCustom.aspx). I replaced the standard display form web part with a data view web part (DVWP). For various reasons that I won’t bother explaining in this post, I needed to create a redirect on this page that included an additional tags parameter in the query string with the @Title of the current list item. For example, if a list item has an ID of “1” and a title of “jquery,” I want the page to redirect from http://server/lists/tags/dispformcustom.aspx?ID=1 to http://server/lists/tags/dispformcustom.aspx?ID=1&tags=jquery.

I didn’t want to use <meta http-equiv="refresh" content="0;url=/{@FileDirRef}/dispformcustom.aspx?ID={@ID}&tags={@Title}" /> because it creates a history entry in the browser. If the user clicks the Back button from the new page, they’ll go back to the page with the redirect and be immediately redirected to the page they were just on. This is bad for the UX. I could extend the time from 0 seconds to 3 seconds or more to give the user more time to click the Back button again, but I don’t think this is a good UX either. I want the redirect to be as transparent as possible. (more…)

Display Events from a SharePoint Calendar Using jQuery and FullCalendar

As part of a large department site redesign project, I wanted to implement a better calendar solution than what MOSS 2007 gives you OOTB. I remembered coming across the FullCalendar jQuery plugin a while back, so I decided to try using it with the calendar on my department’s site. I haven’t tested this in SharePoint 2010, but it should work just fine regardless of the version (just verify all of the column references in case any of them are named differently).

Prepping the Resources

I downloaded the latest FullCalendar package, unzipped the file, and uploaded the CSS and JavaScript files to a document library on my site. I like to use a library called WebResources and add a choice column with options for “CSS,” “Image,” “JavaScript,” and “jQuery” so I can keep track of all of my various resources in one place, with versioning.

Screenshot of FullCalendar Resources in the WebResources Library
I keep all of my resources in a "WebResources" document library grouped by the type of resource.

Once the files were uploaded, I copied the calendar.aspx page and renamed it CalendarCustom.aspx in SharePoint Designer (SPD). Then I switched back to the web UI, went to the calendar settings, and modified the duplicate “Calendar” view so I could rename it and set it as the default (this is the view that will contain our custom calendar). Next I opened that view and hid the default list view web part for the calendar.

The last step in prepping the page was to open it in SPD and add references to the CSS and JavaScript files that the calendar will need just below the <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"> tag on the page (you could also put them in a Content Editor Web Part):

Screenshot of CSS and Script References for FullCalendar
Load the CSS and JavaScript references on the page. This can be done in a Content Editor Web Part, but I prefer to add them in the PlaceHolderMain section.

Setting Up the Data View Web Part

To make this happen, I used a Data View Web Part (DVWP) to output the necessary JavaScript for the plugin to generate the calendar. I selected the web part zone and inserted a new DVWP. I chose the Calendar list as my data source, selected the Title field and inserted it as a “Multiple Item View.”

Screenshot of Calendar Data Source Displayed as a Multiple Item View
Insert a DVWP with the calendar as the data source, and insert the Title field as a "Multiple Item View."

I didn’t want to bog down the browser by loading hundreds of really old events, so I set a filter on the DVWP so that only events with a start time greater than or equal to today minus 90 days would be displayed (see this post for more information on setting up CAML query offsets). This allows people to view events up to three months in the past, as well as current and future events. I also sorted the events by start time in ascending order.

(more…)

Use TinyMCE as the Rich Text Editor in SharePoint Forms

The default rich text editor (RTE) in SharePoint® 2007 doesn’t quite cut it in my opinion, and here’s why:

  • It’s based on an ActiveX control, so it only works in Internet Explorer. This alone is reason enough to replace it.
  • When creating a multiple line of text column in a custom list, you can only choose between “Plain text,” “Rich text,” or “Enhanced rich text” as the format for the column—not a lot of options. What if you want your users to have access to headings or other HTML elements?
  • It generates horrible, deprecated code:
    <DIV>Look at how <EM>bad </EM>this HTML is! If I start <SPAN style="color: #ff6600;">coloring things </SPAN>it gets really messy. I try to make sure I'm not getting too crazy with the content, but many users will select <SPAN style="font-family: 'Comic Sans MS';">their own fonts</SPAN>, <SPAN style="font-size: small;">sizes</SPAN>, <SPAN style="background-color: #33cccc;">colors</SPAN>, etc. instead of keeping things simple, which makes the markup even worse.</DIV>
    <DIV>&nbsp;</DIV>
    <DIV>Why does it use &lt;div&gt; tags instead of &lt;p&gt; tags? Why are the elements in all caps?</DIV>
    <DIV>&nbsp;</DIV>
    <DIV><SPAN style="color: #ff6600; font-family: 'Times New Roman'; font-size: medium;"><STRONG>Now if I try to make an entire section formatting differently, it gets weird with &lt;font&gt; tags and &lt;span&gt; tags.</STRONG></SPAN></DIV>
    <DIV><SPAN style="color: #000000; font-size: xx-small;">&nbsp;</SPAN></DIV>
    <DIV><SPAN style="font-size: xx-small;">Users probably don't know about the Clear Format button, so when they want to add "normal" text after their crazy colored, centered, bolded text, they try to match the normal text with even MORE direct formatting.</SPAN></DIV>
    <DIV><SPAN style="font-size: xx-small;">&nbsp;</SPAN></DIV>
    <DIV><SPAN style="font-size: xx-small;">Now try using this content in a branded site and see if your CSS holds up. Let a user edit this a few times and you'll have nested &lt;span&gt;s all over the place with all kinds of formatting.</SPAN></DIV>
    
  • Even the Full HTML RTE that you get on Publishing Pages (or if you create your own site column of this type) generates the same kind of markup. You have a few more options, like selecting basic HTML elements (paragraphs, headings, address, etc.), but you still can’t customize what appears.

A decade ago this RTE would have been really cool, but in today’s standards-compliant, feature-rich web, it just doesn’t hold up.

Enter TinyMCE, an open-source RTE with tons of customization OOTB, and even more thanks to numerous plugins (you can even write your own plugins if you need something that it doesn’t have). In this post I’ll show you how I replaced the SharePoint RTE with TinyMCE on my custom list forms using a little jQuery.

Note: This isn’t a tutorial about using TinyMCE for all rich text editing in SharePoint; it shows you how to use it on a per-form basis. (more…)

SharePoint Contextual Search – Updated

In a recent project created a page that features several Data View Web Parts pulling information from multiple lists within the site to create a dashboard-like experience. The stakeholders also wanted to be able to quickly search within each list, so I decided to include a custom search box at the top of each data view web part.

At first I thought I could use my custom search box that I wrote about in a previous post. The problem with that solution is that the JavaScript I created only works for a single search box because the ID is hard-coded into the functions. Therefore I modified the function to accept an ID attribute so it would accommodate multiple search boxes on the same page.

Updated Script and HTML

Here is the updated script:

// Search for the terms when the Search button is clicked

function customSearch(inputId,type,site,scope) {

	var searchUrl = site + "/_layouts/OSSSearchResults.aspx?" // Or "/_layouts/SearchResults.aspx?" if WSS 2003 or SP2010 Foundation
	var searchTerm = "&k=" + document.getElementById(inputId).value;
	var listParams = "&cs=This%20" + type + "&u=" + scope;
	window.location.href = searchUrl + searchTerm + listParams;
}

// Initiate the customSearch function when the Enter key is pressed

function searchKeyPress(buttonId,e) {
	// look for window.event in case event isn't passed in
	if (window.event) {
		e = window.event;
	}
	if (e.keyCode == 13) {
		document.getElementById(buttonId).click();
	}
}

(more…)

Create an Organization Chart in MOSS 2007 Using a Contacts List

Org Chart Chrome

Note: This article was originally posted on NothingButSharePoint.com, but some of the code snippets were unescaped when it was published, so I decided to post it on my own blog with the correct code snippets.

I was recently tasked with finding a way to maintain an org chart for my department. If this were a single-use resource that didn’t need to be updated frequently, I would have chosen to create it in a program such as Visio or Adobe Illustrator (even PowerPoint would work well with its SmartArt capabilities). However, this is something we want to be as maintenance-free as possible so we aren’t rebuilding it as people come and go.

The department’s operations team already maintains a list of everyone in the department by using a SharePoint Contacts list, so we can pull data from that and build the org chart dynamically. This method does not require any custom code or web parts, so there’s no need to deploy anything on the server!

Sample Org Chart
This is the org chart that will be generated.

(more…)

Create a SharePoint Contextual Search Box in a Content Editor Web Part

Update: I’ve posted a newer version of this solution that allows for multiple search boxes on the same page. The code is similar, but I highly recommend using the updated solution for better flexibility. View it here: http://joshmccarty.com/2011/05/sharepoint-contextual-search-updated/.

SharePoint provides a couple of ways to search on a web part page. First, the Master Page can include a search box which can be set to search within a specific context such as the entire site collection, the current site, or (if on a list view page) the current list or library. The other way to add a search box is to use the Search Box web part. This can also be set to search within a specific context by adjusting the web part settings.

However, in some cases this may not be a good option. For example one of my recent projects required adding a contextual search box on the home page of a site that would search a specific list within that site. The stakeholders wanted to have more control over the layout, so the search box could not be in a separate web part; it had to be included within some other content on the page. Fortunately this turns out to be fairly easy to do with a little JavaScript.

(more…)