web consultant + designer
Looking for master pages & themes for your SharePoint 2010 installation? While still in its infancy, check out nothing but branding. A collaboration between Mark Miller of EUSP and GSoft Group, this site covers branding of SharePoint in their blog, while selling premium (and a free one) themes for SharePoint. It seems like a promising project, and I’m looking forward to seeing where it goes.
A more basic post, but hopefully helpful to someone out there. Also, a more in-depth response to my article on Microsoft’s “Get the Point” blog.
To install Google Analytics in your SharePoint 2010 environment, my approach is to use the Master Page. There are two basic steps here, so it shouldn’t take you more than a few minutes.
It’s important when you are copying your tracking code from Google Analytics that you have set up your account correctly. Because SharePoint is often run on https, you’ll want to make sure it doesn’t make a non-secure call to Google Analytics. If you’ve set up your site in Google Analytics to use the correct protocol (http vs https), then the tracking code should reflect it. In general though, your code should look like this:
<script type="text/javascript">// <![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// ]]></script>
Done!
I work in the education sector, so SharePoint in the classroom is something I’m really interested in. Here’s a little showcase of a sample classroom site that uses OOTB features of SharePoint 2010 to do a few normal tasks. It’s not conclusive or super polished, but it covers the basic needs of a teacher. Click on each picture to see the full-size version. They’re probably a bit small in this format.
1. Home/the site
The site is built on a wiki page library to take advantage of out of the box features like page rating and quick editing. On the home page I’ve also embedded a YouTube video using a Content Editor Webpart. With wiki page libraries you have to use the CEWP otherwise your embed code will be stripped out. Bummer! Also, this site has a total custom master page and branding, so the teacher can take ownership of the site. It’s not a huge transformation, but it takes away that SharePoint feel at least a little.
2. Homework
This page is another wiki page that has an embedded “Homework” list. It has 3 custom columns, Due Date, Unit, and Description. The teacher can add a homework assignment, attach some files (pdfs, powerpoints, etc), and add a description and due date. The description of the assignment is available when you click on the title of a homework assignment.
3. Resources
Teachers often need a place to share useful links with students. Because of the amount of technology in classrooms these days (1:1 laptop programs, smart boards, etc.), having an online resource for students to access is invaluable. It saves a lot of printing, emailing, and writing down. In the spirit of going out of the box on all this, I’ve used a standard “links” list to capture these resources.
4. Blog
No classroom would be complete without a teacher blog. It seems to be all the craze these days. Now whether anyone reads it or not…that’s another story! But nevertheless, a blog we shall have. Again, this is an OOTB blog. Nothing special here. Check out how to set permissions for a blog like this in my other article.
5. Dropbox
With everything else being online for this imaginary classroom, it seems only fitting that students should be able to submit work online. So I’ve created a document library called “Dropbox”. With the right permissions, you can allow students to add documents and edit just the ones they add.
Hope you enjoyed it, leave a comment if you have questions or suggestions. I hear there is some really interesting stuff coming out for SharePoint 15 for education. Can’t wait to see what it is!
I’ve been using Kyle Schaeffer’s V5 Master Page as a pretty good starter template for a lot of my stuff recently. But I kept running across an issue. My modal dialog boxes weren’t being sized correctly. So upon further investigation, I realized it was just a bit of CSS that was being applied to dialogs where it shouldn’t be. I’m not sure if it was my fault, or something in the original file. So at the end of my CSS file I put the following code and everything works great!
/* fix the modal to resize correctly
********************************************************** */
.ms-dialog body #s4-workspace {padding:0px;overflow:auto !important;}
.ms-dialog body #s4-ribbonrow {position:relative;}
.ms-dialog #isb-wrapper {margin:0px;}
I’ve been inspired lately to create a Master Page for a SharePoint blog. It’s based on Kyle Schaeffer’s V5 Master Page, and I’m giving it away free in return for feedback and critique. I’d love to develop this further and take it to team sites, my sites, and publishing pages, but before I go through the whole process I’d like to gauge interest.
Features:
So download, enjoy, and tell me what you think!
Download: Bittersweet Master Page (SharePoint 2010) (11.7KB, ZIP)
Ben
Here we will setup a SharePoint 2010 page that utilizes both jQuery Mobile as well as the jQuery SPServices library. Note: This post was updated Feb 21 to reflect an issue I’ve documented here with IE8.
Create a new blank .aspx page in the “Site Pages” library (using SharePoint Designer 2010). I like to use a new .aspx page like this because I can create a document from scratch, I don’t have to deal with page layouts, master pages, etc. The same principals can be applied elsewhere, but this gives me a clean page to start from (which is way easier to debug).
Note: I’ve created my document using html5 standards (as does jQuery Mobile).
<!DOCTYPE html>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<title>SharePoint, SPServices, and jQuery Mobile!</title>
<link rel="apple-touch-icon" href="/Style Library/Images/apple-touch-icon.png"/>
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
<link rel="stylesheet" href="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/Style Library/scripts/jquery-1.6.4.min.js"></script>
<script src="/Style Library/scripts/jquery.SPServices-0.7.0.min.js"></script>
<script type="text/javascript">
//we'll put the SPServices functions here
//note the placement of this script tag BEFORE the jQuery Mobile javascript link
</script>
<script src="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!--[if lt IE 9]>
<script src="/Style Library/scripts/html5.js"></script>
<![endif]-->
</head>
<body>
<!--- we'll put the jQuery Mobile and HTML here --->
</body>
</html>Now let’s setup our html within the body tag. We’ll use the standard setup you can find in the jQuery Mobile documentation.
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>First Page</h1>
</header>
<div data-role="content">
Here's your first name: <span class="first-name" style="font-weight:bold;"></span><br/>
<a href="#page2">Click here</a> to see your last name
</div>
</section>Here’s our first pagelet. It has an ID of “page1″, and a title of “First page”. If you have everything setup right so far, you should see an image like this:
Now let’s setup page 2. You’ll notice above that we’ve used a link tag with a href=”#page2″. jQuery Mobile takes this and navigates us to “page” 2, even though it is simply another section on the same aspx page. Here’s what you’ll have, and the image follows:
<section id="page2" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Second Page</h1>
</header>
<div data-role="content">
Here's your last name: <span class="last-name" style="font-weight:bold;"></span><br/>
<a href="#page1">Go back</a> to see your first name
</div>
</section>
Now that we’ve created our pages, it’s time to create the functions. We’re going to create two functions. One will call the first name of the user, and one will call the last name. Once it gets the first/last name, it appends the value of that variable to the empty ‘span’ tags we created in the step above. This is a basic example, but you’ll get the point at least.
So the first thing we need to do is create the functions on document ready. But note that we won’t CALL the functions just yet.
First function (to get first name of the logged in user):
function getFirstName() {
firstname = $().SPServices.SPGetCurrentUser({fieldName: "FirstName"})
$(".first-name").append(firstname);
} Second function (to get last name of the logged in user):
function getLastName() {
lastname = $().SPServices.SPGetCurrentUser({fieldName: "LastName"})
$(".last-name").append(lastname);
}Right now these two functions are just sitting in the script tag, but we want to call them. You can do one of two things:
Because of the functions I am calling in one of my other projects, I’ve decided to call the function each time each pagelet loads. That means that even though jQuery Mobile loads the new pagelet without reloading the url, my data will still load in asynchronously. So when we click on “click here to see your last name”, it will then call the function when that pagelet comes into view.
The other way is fine as well, it just means that while you are using your new web app, the data only loads when the document is ready. This means if data changes while you are navigating, you won’t see the change until you refresh the page.
Note: If you call the functions each time the page is loaded, your script must remain above the jquery mobile js reference (see step 2). This because you need to tweak the DOM before jQuery Mobile applies its classes and functionality to the page.
So onto the code! We’re going to use the jQuery function “on” and pass the event “pagecreate”. Like I mentioned above, this means the function will only run when the page is created (every time).
$("section#page1").live("pagecreate", function(event){
getFirstName();
});
$("section#page2").live("pagecreate", function(event){
getLastName();
});Now you should see the following when you load each page:
And for your copying and pasting pleasure, here’s the full code!
<!DOCTYPE html>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<title>SharePoint, SPServices, and jQuery Mobile!</title>
<link rel="apple-touch-icon" href="/Style Library/Images/apple-touch-icon.jpg"/>
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
<link rel="stylesheet" href="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/Style Library/scripts/jquery-1.6.4.min.js"></script>
<script src="/Style Library/scripts/jquery.SPServices-0.7.0.min.js"></script>
<!--[if lt IE 9]>
<script src="/Style Library/scripts/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function(){
function getFirstName() {
firstname = $().SPServices.SPGetCurrentUser({fieldName: "FirstName"})
$(".first-name").append(firstname);
}
function getLastName() {
lastname = $().SPServices.SPGetCurrentUser({fieldName: "LastName"})
$(".last-name").append(lastname);
}
$("section#page1").live("pagecreate", function(event){
getFirstName();
});
$("section#page2").live("pagecreate", function(event){
getLastName();
}); })
</script>
<script src="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>First Page</h1>
</header>
<div data-role="content">
Here's your first name: <span class="first-name" style="font-weight:bold;"></span><br/>
<a href="#page2">Click here</a> to see your last name
</div>
</section>
<section id="page2" data-role="page">
<header data-role="header" data-position="fixed">
<h1>Second Page</h1>
</header>
<div data-role="content">
Here's your last name: <span class="last-name" style="font-weight:bold;"></span><br/>
<a href="#page1">Go back</a> to see your first name
</div>
</section>
</body>
</html>
Enjoy!
Ben
SharePoint out-of-the-box is functional, but fairly lacking when it comes to really wanting to extract and beautify your data. This is where jQuery comes in. It’s light, easy to implement, and actually hooks up with a bunch of SharePoint services when you have the right plugins. Consider this a basic intro to what you can do in jQuery and SharePoint. It’s really the tip of the iceberg, so keep exploring!
First things first, let’s make sure we’re properly setup. If you are using SharePoint behind a secure server (as part of an intranet possibly), then you’ll probably want to load up a local copy of the jQuery script instead of grabbing it from jquery.com each time the page loads. So grab the latest build from jquery.com and dump it in “Style Library/scripts/jquery.js”.
Next, go to your master page and put the following script (depending on where your file is) anywhere within the HEAD section:
<script type="text/javascript" src="/Style Library/scripts/jquery.js"></script>And that’s it! Now every time a page loads, you’re pulling in all of jQuery’s power. Minified, the file is only about 31kb, so (considering everything else SharePoint is loading) this isn’t that much of a burden. But you can also just load the jQuery script in page layouts, or even within individual pages.
Now that you’ve got jQuery loaded, it might be in your best interest to create another .js file that holds all of your custom scripts. You can choose to do scripts on a per page or page layout basis as well, but this keeps things more organized. So create a “myscripts.js” file in “Style Library/scripts” (the same folder we put jQuery.js in). And don’t forget to reference it in your master page, right under the jquery code. So now the above code is amended to read: <script type="text/javascript" src="/Style Library/scripts/jquery.js"></script>
<script type="text/javascript" src="/Style Library/scripts/myscripts.js"></script>Now that we’ve got everything loaded, what can we do?
Here are just a few things:
I use this for something like an FAQ section. We’ll put every question in an H4 tag with a class of “question” and every answer in a span with a class of “answer” directly after the h4. That’s all we have to do to our HTML source in the page. Then in our custom scripts file (above) we add the following jQuery code:
$(document).ready(function(){
$("span.answer").slideUp(); // hides all of the answers
$("h4.question").click(function(){ // when you click an h4
$(this).next("span.answer").slideToggle('fast') //the answer slides down
})
});Keep in mind you may want to add some CSS that make the h4 seem more like a link (cursor:pointer, etc.) so people know they should click.
Check out this post about how to create this. You can create a filter, and then append it to any list across your site.
I’ve written a separate post with precise instructions about how to do this, but here’s the general idea:
Check out this post on creating tabs using jQuery, but without using the jQuery UI. It’s a bit easier with the UI plugin, but again, the idea is:
I’ve started writing what is turning into a small series on using jQuery with SPServices. Some of the things you can do:
Rollup items from multiple lists
Rollup from multiple lists and put the results in a new list
Rollup articles across a site collection
me: designer, coder, front-end web developer. I specialize in WordPress and SharePoint, with a special place in my heart for jQuery and CSS.
life: wife + daughter + me.
work: I design and consult for a lot of great clients, and would love to talk about your next project!
