web consultant + designer
Download and unzip the package
Create a document library (if it doesn’t already exist) called “Shared Documents” and upload some dummy documents
Create a new document library called “Mobile”
Open the document library in windows explorer, and drag all files into the library
Click on “documents.aspx”, and enjoy!
In an effort to explain what I’ve been working on I’ve created a little info-tutorial-graphic (is that a thing?). It’s more of a teaser than anything super helpful, but it helps me wrap my head around the approach. Anyone ever developed something like this? I’m calling Getlistitems every 5 seconds to pull any new list items.
Download the full-size image here. Feel free to pass it on!
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)
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();
})
});
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!
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!
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.
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.
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.
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.
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.
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):
In an effort to spell out what the jQuery SPServices library is and does for those just getting started, I’ve put together a “hand-drawn intro” to it. Enjoy!
Here’s a fairly basic tutorial on how to populate a drop-down menu (select menu) using the jQuery library for SharePoint Web Services (SPServices) .
First, let’s setup our body with one simple, empty, html “select” tag:
<select class="list-selector"></select>
Next, up in the head of our document, we need to call 2 scripts. First, jQuery itself, and then the SPServices library:
<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>
And now for the good part. We’re going to call a function that pulls every list title in our site and creates a new option for each one in our drop-down menu.
<script type="text/javascript">
$(document).ready(function(){
//begin getLists function
function getList(){
$().SPServices({
operation:"GetListCollection",
webURL: $(this).attr("WebFullUrl"),
async:false,
completefunc: function(xData, Status) {
$(xData.responseXML).find("List").each(function(){
listTitle = $(this).attr("Title");
listItem = "<option>" + listTitle + "</option>"
$("select.list-selector").append(listItem);
})
}
})
} // end function
getList();
}); // end document ready
</script>
You can see, after the “GetListCollection” operation is complete, we create a new variable called “listTitle” and give it the “Title” attribute of the list. Then we create another variabled called “listItem” that includes the surrounding “option” tags as well as the first “listTitle” variable we created. This entire variable is then appended to the select list.
Voila!
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!
