Author Archives: bentedder

Screencast: Create a jQuery instant filter with SharePoint lists

I’ve just recorded a screencast version of my post about how to create a jQuery instant filter for SharePoint 2010 lists. Enjoy! (The code featured in the video is pasted below)

http://youtu.be/ewoiJFJH9ig

jQuery.expr[':'].Contains = function(a,i,m){return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;};

$(document).ready(function(){

	var webPartID = $("#WebPartWPQ2");

	$(webPartID).prepend('<div style="padding: 2px; border: 1px solid rgb(204, 204, 204); margin: 5px auto 0pt; background: #ccc; display: block;"><h3 style="text-align: center;margin:2px;">Instant search: <input type="text" class="search" style="padding: 5px;"/></h3></div>');

		$("input.search").change(function() {
			var txt = $("input.search").val();
			if (txt) {
				$(webPartID).find("td:not(:Contains("+txt+"))").parent("tr.ms-itmhover").hide();
				$(webPartID).find("td:Contains("+txt+")").parent("tr.ms-itmhover").show();
			} else {
				$(webPartID).find("td").parent("tr.ms-itmhover").show();
			}
		}).keyup(function(){$(this).change();
	})
});

jQuery function for formatting dates in SharePoint with SPServices

I’ve been searching all over the web for this, and I can’t find anything that works for me. So here’s a small jQuery function I wrote that takes the default SharePoint date format (which looks like this: yyyy-mm-dd hh:mm:ss) and splits it all up and makes it useable.

The reason behind this issue is I’m using SPServices and jQuery Mobile to pull in date fields and display them in the browser in a much nicer way (like this).

How to use it:
In your SPServices call, you’ll be calling a variable something like this:

startDate = $(this).attr("ows_Start_x0020_Date");

Then, we’re going to send our new variable into the convertDate() function:

// to only get the date
convertDate(startDate, "date");
//to only get the time
convertDate(startDate, "time");

I split the date and time up because I’m always using start and end times, where the date is only secondary. So this way when you call the function you can specify which one you want. You could also get a full date this way:

convertDate(startDate, "date") + " " + convertDate(startDate, "time");

And here’s the actual function:

function convertDate (x, formatter) {

	var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
	var shortMonths = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

	// split up date and time
	xDate = x.split(" ")[0];
	xTime = x.split(" ")[1];

	// split off the hour from the minute/second
	xMinSec = xTime.split(":")[1];
	xHour = xTime.split(":")[0];

	// set the am or pm suffix
	if (xHour > 12) {
		ampm = "pm";
		xHour -= 12;
	}  else if (xHour < 12){
		ampm = "am";
	} else {
		ampm = "pm";
	}
	//extract the minute from the minute/second
	xMin = xMinSec.split(":")[0];

	// split up the date into day, month (-1), and year
	xDay = xDate.split("-")[2];
	xMonth = shortMonths[xMonth = xDate.split("-")[1]-1];
	xYear = xDate.split("-")[0];

	// format your date as you like
	xFullDate = xMonth + " " + xDay + ", " + xYear;

	// format the time as you like
	xFullTime = xHour + ":" + xMin + ampm;

	// check the parameter to see which one to return
	if (formatter === "date") {
		return xFullDate;
	} else if (formatter === "time") {
		return xFullTime;
	}
}

Hope it works for you!


TinyMCE image uploader button “not showing”

I’ve had this happen several times during a Drupal project. The TinyMCE image uploader button (pictured below) doesn’t show up on accounts that aren’t the “site maintenance account”. Even if the account is an administrator account, the button won’t show up.

But there’s a fix! It’s really simple, but for some reason it eludes me for about 30 minutes each time. So this post is really for my own sake to reference later. If it helps you too, great!

Fix: Go to Configuration > Media > IMCE

Then make sure you add the correct profile to the correct role. If you’ll notice, the “Site maintenance account” already has a profile by default. That’s why when you’re editing it seems as if the uploader button is present, but when you sign on as a different user (even an admin) it disappears.


Freebie: SharePoint Document Navigator 1.0 (built w/jQuery Mobile and SPServices)

Over the past few weeks I’ve developed a small package called SharePoint Document Navigator. It uses SPServices, jQuery Mobile, and OOTB SharePoint 2010 features to provide a much nicer way to view a SharePoint Document Library on your mobile device. And best of all, I’m providing version 1.0 free!

SharePoint Document Navigator 1.0 – download (1.3MB)

There is a README included to show you how to install the files. The goal was to make the most basic drag-and-drop package you can find for this kind of thing.

Enjoy!


Guest Article on Microsoft’s “Get the Point” SharePoint blog

* 1 Comment

I just published part 2 in a series about blogging in SharePoint for Microsoft’s “Get the Point” blog. You can read the full article here.

Summary: Create a picture library in SharePoint, and then reference its slide show in a blog post for a more interactive SharePoint blog!


Customize the style of SharePoint modal dialog boxes

Let’s use a bit of CSS3 to style a SharePoint modal dialog box. We’ll take advantage of rounded corners and a drop-shadow to get our point across. Pretty basic stuff, but SharePoint has some curve balls they throw at us. Here’s what we’ll be making:

Layout of a Modal Dialog window

<div class="ms-dlgContent">
	<div class="ms-dlgBorder">
		<div class="ms-dlgTitle"></div>
		<div class="ms-dlgFrameContainer"></div>
	</div>
</div>

Borders and widths

SharePoint, when the modal dialog is created, seems to make the ms-dlgBorder div and its children a handful (4 or so?) px less wide than the modal. So if you try to give your modal window NO border, you’ll have a gap on the right side. I’ve found no other (simple) way to fix this, so I’ve resorted to having borders.

Also, note that the rounded corners need to be set on all 3 of the containing divs. It’s annoying, but easily done in the CSS.

Finally, we are going to change the color of the dark blue overlay to white, in order to contrast our dark-bordered modal window. Plus, it’ll make the drop shadow that much more droppy!

The CSS

/* set color of overlay */
.ms-dlgOverlay {background:#fff;}

/* set rounded corners */
.ms-dlgContent, .ms-dlgBorder, .ms-dlgTitle {
  -webkit-border-top-right-radius: 12px;
  -webkit-border-top-left-radius: 12px;
          border-top-right-radius: 12px;
          border-top-left-radius: 12px;
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
 	background:#333;

}
/* give both divs a 1px border to erase strange padding */
.ms-dlgBorder, .ms-dlgContent {border:1px solid #333;}

/* add a drop shadow to the outermost div */
.ms-dlgBorder {
  -webkit-box-shadow: 3px 3px 10px -3px #333;
          box-shadow: 3px 3px 10px -3px #333;
}

/* take away borders and then
add back in a bottom border to separate title from ribbon */
.ms-dlgTitle {
	border:none;
	border-bottom:1px solid #fff;
}
/* color text of title of modal */
.ms-dlgTitleText {color:#fff;}

Also, a great, quick resource for CSS3 stuff that I use: CSS3please.com. It’s constantly tweaked and updated to reflect the latest CSS styling for a lot of common design elements (drop shadows, rounded corners, etc.)


Intro to branding SharePoint 2010 for designers

I’ve been in the SharePoint world for a couple of years now, and feel like I’m finally able to start seeing clearly what branding in SharePoint really entails. For those of you just getting started, prepare for a long journey. But no need to worry, branding in SharePoint isn’t too scary once you get into it.

I started out (and still do) hand-coding websites. I then progressed to CMS’s like Drupal and WordPress. I have since taken the plunge into SharePoint 2010 as well. If designing a website is like putting together a Lego castle, then designing a website in SharePoint is kind of like putting together a Lego castle where all the pieces are individually wrapped in little plastic bags, and are strangely shaped. It takes a long time to strip away all the “SharePoint-y” stuff to get down to your real design. But once you get there, it’s not so bad.

Not being a developer, SharePoint was a bit daunting at first. A lot of .aspx pages, as well as strange new programs like SharePoint Designer, InfoPath, and Visual Studio (although I don’t use this one). As you begin designing in SharePoint, you’ll want to consider your approach, and it will be slightly different than your typical approach to web design.

Bite-sized pieces

Don’t jump in and start opening every file in SharePoint Designer that you find…you’ll go crazy. Here is my three-step basic process to get started with branding in SharePoint. Move through each step slowly and see how it goes. Once you’re done, you’ll want to repeat the process (probably backwards) to create your own solution.

  1. Apply your own custom CSS
  2. Create new content types & page layouts
  3. Customize/create a new Master Page

Apply your own custom CSS

You’re a designer, so this is something you can be comfortable with as a first step. First, register your CSS file in the master page (all we will touch in the master page for now), and then create a new CSS file in “/Style Library/”. Using the web developer toolbar in Firefox, or Chrome’s built in developer tools, you should have what you need to get started customizing right away. You could do just this step, and be totally fine. However, if you keep digging the grave gets deeper.

Create new content types & page layouts

To keep things clean, I would suggest creating your own content type(s), and from there create unique page layouts for your content. With a page layout you can add your own html wrappers to your content (titles, body text, custom fields, etc.), which gives you that much more control of layout within a page. Also, you can add header styles in these documents to call CSS files and .js scripts without editing a Master Page (not best practice…but it’s possible).

[note] Don’t forget to enable any new page layouts in “Site Settings > Page Layouts and Site Templates” so your pages can use them.

Customize/create a new Master Page

This is the trickiest feat. I would suggest starting with something like Kyle Schaeffer’s HTML5 Master Page, or the Starter Master Pages on CodePlex (I believe by Randy Drisgill and others). My method? I printed out v4.master on giant A3 sheets, along with a couple of other master pages, and sat down at a table, analyzing line by line what I needed to pay attention to, what I was confused about, and what I could edit. So grab a couple of highlighters, print out a sample master page, and get familiar with your blueprint. You’ll learn soon enough what you can and can’t get rid of. A great tip I learned from Heather Waterman at a branding session in Las Vegas one year is to give yourself a bunch of blank space at the beginning of the document, put in your (working) html, and then slowly add in little pieces of the master page as needed. This way you don’t delete stuff you need, and you keep your html intact.

Explore

There is so much more you can do with SharePoint than just CSS and master pages. It gets really fun when you start working with jQuery and interacting with SharePoint services, for example. But that’s for another time. If you want to explore some more about branding in SharePoint, here are a few resources (some articles of mine, as well as other things you might find useful):