When I started coding the “Twitter for SharePoint” application that I wrote about last week, I had two ways I could go about it:
- Use the traditional approach, being the SharePoint Solutions Framework, Visual Studio and C#.
- Build it “Assembly Free” using SharePoint Designer, IE8 and Javascript
I started out trying to build it “Assembly Free”, but hit a couple of roadblocks, and because of timeframes, went back to what I knew. Last Sunday was a rainy day in Amsterdam, so I decided to dig up the “Team Status” application that I had started to write, and see if I couldn’t finish it off.
The good news is, I have, and better news is, I think it works. It’s probably a better example than my original “Assembly Free” solution, a Timesheet, and to my surprise it does nearly everything my traditional “Assembly Based” solution does. Of course, there are a couple of important differences (around scale, and some functionality) which means that both approaches will always have their place, but for people with no other choice it’s perfect!
The key advantage the “Assembly Free” approach offers, is that you can deploy the solution anywhere. All you need is a browser and Site Administrator access to a SharePoint site. This means it will work on sites running in your company, hosted with a application services provider, and, we’re working on it, Microsoft Online Services too.
To be clear, this is simply a Site Template. Nothing more, nothing less.
What does the application do?
Simple, it does pretty much everything I described in my previous post except for supporting the notion of “Followers” and the integration with My Site Colleagues. This application is focused more on the publishing side, and less on the subscription side. Here is what the home page looks like:
On the left hand side you can see a stream of messages from all the members of the team site. On the top right hand side you can see a “Send Message” box, this is where you can type and submit your status messages, up to a maximum of 140 characters.
On the bottom right you can see “My Messages”, these are any messages that mention you. People do this by using the “@<username>” syntax, where "<username>” is equal to your windows account name (without the domain).
Next to each of the status updates you will see a picture, this picture comes from your “My Site” if you have MOSS installed, or it comes from a column you can add to the User Information table (more information below).
The thing to keep in mind, and I know I’m being very repetitive here, is that there’s not a single line of C# code, and nothing has to be installed on the server. Everything, and I mean everything, has been done using a humble .STP file.
So how does it work then?
- I created a new blank SharePoint site, and I added one new list called “Messages”. I renamed the “Title” field to be called “Message”, and I added a new Choice field called “Mentions”.
- I then dropped into SharePoint Designer (I love it), opened the default.aspx page and created a “Message” box. This is just a standard input control, with a character counter, and a button that calls a Javascript function when you click on it.
- The Javascript function does the following:
- It uses a Regex to find all the people mentioned in the message using the @<username> syntax.
- It calls one of the SharePoint Web Services and writes the message into the “Message” field, and the people mentioned in the message, into the “Mentions” choice field, one choice each.
- I then refresh the page using two javascript functions:
- One calls a SharePoint Web Service to retrieve the last 30 messages sorted by created date. It also retrieves a users picture and works out the relative date and time. This is the “Messages” stream on the left.
- The second one calls a SharePoint Web Services to retrieve only those messages where the currently logged on user is listed as one of the “Mentions” choices (using a CAML query). It then sorts this by created date and renders it on the page.
All very simple really. There is of course a lot more going on behind the scenes, but it’s all there in Javascript for you to take a look at (and its a little bit neater than my last attempt, I’m learning!). The key thing to note here is that I couldn’t have done it without the amazing Javascript API for SharePoint created by Darren Johnstone. You can find more information about it here:
Would you Like to try it?
For those that are skeptical I thought I would do two things to convince you this approach can really work.
First, I have a live site you can play with, and some accounts you can log in with:
Demo Site: http://demo.zevenseas.com/sites/AssemblyFreeDemos/TeamStatus/default.aspx
Domain for all accounts:
Usernames: ZSHOSTED\teamstatus, ZSHOSTED\teamstatus2, ZSHOSTED\teamstatus3
Passwords: (passwords are the same as username, eg. teamstatus, teamstatus2, teamstatus3
Try and mix it up a little bit so that it looks nice, and feel free to talk amongst yourselves.
Secondly, you can download it and try it for yourself. This is a beta though, and there are a couple of one-off manual steps that you need to perform in order to get it working for site members. I’m also not sure what sort of issues I might encounter on the various environments out there, so please give feedback.
Before I go into the installation, I’m going to repeat my call to action. If you think you can create nifty little solutions like this and are interested in hearing about how about an innovative new way to put them into the hands of customers, drop me an email daniel@zevenseas.com. We are announcing a new service within the coming weeks which will help you do just that.
Installing it Yourself
These steps just describe how to take a Site Template (.stp) file, upload it to a site collection, and then create a new site based on that template.
- Download it
- Create a new site collection, log on as Site Collection Administrator, and upload this .STP file to the “Site Templates” gallery.
- Under “Site Actions”, select “Create”, then chose “Sites and Workspaces”.
- Give your site a Title, URL and a Description and then click on the “Custom” tab, select “TeamStatus” and click “Create”. Note: This version currently does not support unique permissions, so you must use parent permissions.
- After a few moment you will be taken to the new site, and, as Site Administrator, you should be able to create a send messages.
It’s that easy.
Adding Contributors
In a pevious version of this blog post I described some manual steps that you needed to perform due to an issue I had hit during development, the latest build (available via the download link on this post) now overcomes that issue. Adding members is as simple as, well, adding members!
Before you can add additional members, and let them contribute to the site, there is one small modification that needs to be made. Site members need to have “Read” access to the User Information table via the web service. Even though they have this via the UI, for some reason, this is restricted via the Web Services, but there is a simple solution. etc. etc.
Adding a picture to your messages
If you have only WSS, and want to let users add their own picture, you need to make the following adjustment. Note: If you are on MOSS, then you don’t have to do anything, it will just work.
1. Follow steps 1, 2, and 3 above, but then when presented with the “List Settings” page, click on “Create Column” instead:
2. Create the column exactly as it is shown below:
Now, all a site member needs to do, is logon to the site, and go to their “My Settings” page:
When presented with their profile, edit the item, and then enter the URL to a picture, in the new column. In fact, they could attach the picture directly onto their profile list item and reference it from there:
Finally, it seems I’m not the only one thinking about short messaging and SharePoint. Nick Boumans also published to Codeplex a nice solution. It takes the traditional Assembly Based approach, but works very nicely. Check it out: http://www.codeplex.com/SPMessaging