Dave Cavins - Page 4 of 6 - web design, SharePoint customization & random stuff

Displaying document titles as links.

On a recent project I had to migrate a large number of documents from a legacy system into SharePoint. In the old system users to choose what text would be displayed as the link. In most cases users chose not to use the actual file name as the link text.

The Problem

In SharePoint users don’t have as much control of what gets displayed. There is a ‘Title’ field but it can’t be used in a calculated column and on the standard document library it is not a required field.

Technically the file name could be used but this could lead to very long file names with spaces and special characters that could cause problems by forcing the page to scroll as well as creating some REALLY long URLs.

Depending on the type of document the actual file name may be irrelevant to the use while the title would be more helpful. For instance a in document library of meeting minutes the file names could just be the date of the meeting for example (12_03_2009.docx). The document title could be used to contain not only the date but other relevant information about the meeting like who attended or important issues that were discussed. Additionally the title field can support special characters and spaces that could be a problem in file names.

CSS-Tricks AnythingSlider in SharePoint

Chris Coyier from CSS-Tricks built this really cool jQuery plugin that creates a content slider that will support any regular HTML in the slides. This is cool because many sliders I have used had limitations on what could be on the slides and did not offer many of the featuers the AnythingSlider does.

AnythingSlider in SharePoint

Setup

To get this working in SharePoint you will need to make sure you have a reference to jQuery in the page somewhere as well as a list for the slider to read from. For my example I am using an out of the box annoucements list. You will also need the files for the plugin download the anythingSlider plugin from css-tricks.com.

In SharePoint Designer add a dataview webpart to the page with any field from your annoucements list.
Switch to code view and find the first <xsl> tag. It should be right after the closing <DatasSources> tag.
Right click on the tag and choose “Select Tag”. Press delete, don’t worry we will be adding in our own xsl.

Paste the following xsl into the page where you deleted the code.

Updating the #SharePoint People Picker

So I was working with a friend on a custom SharePoint list. When users create a new item certain fields needed to automatically populate with information from their profile. We ran into issues when trying to populate the people picker.

Scripts like SPFF can be used to accomplish this but we needed something else because we wanted to read in the current user’s information from the SharePoint web service. Additionally we wanted to avoid passing information using the query string because users would be able to access the form through multiple links.

People Picker

SharePoint Vertical News Ticker

On a recent project I needed to create a simple vertical news ticker to display announcements from a SharePoint list. It was easy to do because I just used some of the code from the announcements slider I built a while back so I did not bother to write a post about it. Yesterday I saw a post on EndUserSharePoint.com about how to setup something similar so I figured I would share my (cheaper) solution.

A few features of the ticker:

The ticker pulls its contents from the default SharePoint Announcements list using jQuery.
The title of the announcement links to the display form for the item
Ticker pauses on mouseover
For each Announcement the first 500 characters are shown as an intro.

Here is the code it can just be pasted in a content editor web part. The only dependency is jQuery. The code for the ticker came from this post on Net Tuts Plus. I removed the comments but you can see the commented code and an explanation here.

Image Slideshow with captions

This is a very simple image slide show script that uses jQuery, SharePoint webservices and the default images library to show images with captions. All the content is pulled from default fields in the images library but feel free to add more fields and customize the code to fit your needs.

Slide show with captions

Resizable textareas in SharePoint edit forms

So one of the things that I have had end users complain to me about is the size of the text boxes on the new and edit forms of lists like the contacts list and announcement list. On a recent non-SharePoint project I used a jQuery plugin to create a resizable text area so I tried to implement it in SharePoint. Here is what happened.

I downloaded the Textarea Resize JavaScript jQuery plugin, saved in a SharePoint library along with the latest version of jQuery.

Selecting the Element

In order for the jQuery code to work it has to know which elements on the page you want to work with.

Here is the code SharePoint renders for a text box:

<textarea name="ctl00$m$g_3fa2cde8_0ea8_4421_814f_6a6d292fbe54$ctl00
$ctl04$ctl0ctl00$TextField"
rows="15"
cols="20" id="ctl00_m_g_3fa2cde8_0ea8_4421_ctl00_TextField" title="Body"
class="ms-long" dir="none"></textarea>

There are two problems:

ASP.NET creates very long and hard to use IDs
The class ms-long culd apply to other elements on the page that I dont want to use the effect on.

Adding Suggestions to the Sharepoint search box : Part 2

In Part 1 of this post we used a simple javascript to display suggestions on a custom search box. After I wrote that post I was thinking it would make more sense to read the suggestions from a list instead of a JavaScript file. This post will explain how to setup the list and edit the JavaScript to read the suggestions from a list. The idea is that an administrator could manage the list and help guide users toward specific information instead of getting numerous un-related results like in those commercials for bing.

Assuming you already have the search box setup as described in Part one of this post all you will need to do is change the javascript and add some code to the page.

I saw this coming (SharePoint 2010)

I was reading this article last week and it reminded me of a conversation I had with a developer friend of mine back when SharePoint 2007 came out. I was telling him that because of the ability to integrate so closely with Office SharePoint would end up dominating the market for collaboration tools.

SharePoint is not the only collaboration tool available and some would say it is not the best tool either. Google Wave, BaseCamp, Salesforce.com and others offer similar capabilities in some areas. As Chip Dizard of Absolute Presence points out Wave does not work well with IE but does integrate nicely with Google’s other online tools (Docs, Calendar, etc.). For open source fans and Microsoft haters there are several good options but it is hard to deny the convenience of SharePoint.

Most large organizations are already using Microsoft Office products for email and word processing so the fact that SharePoint works seamlessly with these applications makes it an obvious choice when it comes time to collaborate and share information. Even SharePoint 2003 had some integration with the Office products but Microsoft has taken things even further in SharePoint 2010. With such a fully integrated solution that most users will have to use as part of their work competitors like Google will have a tough time selling to businesses and large organizations.

For smaller organizations that don’t have the resources or the need for all of SharePoint’s features may Google Wave and other tools very useful. Larger organizations who require information security, full control and data backups will find SharePoint quite capable. This article has more information on how the SharePoint team has worked to build SharePoint into its own platform

Styling SharePoint Blog Comments: Part 2

As promised I went ahead and styled the comment form on a standard SharePoint blog. I wanted to make it look better than this but there are some limitations because of the way the page is coded with so many nested tables.

Better looking comment form

I kept the styles pretty simple but this should be a good starting point for someone wanting to do something more complex.

Styling SharePoint Blog Comments

Out of the box the comments on SharePoint blogs dont look that good.

Standard SharePoint blog comments

Here is a way to fix that problem. Just add this CSS to the page and things should start looking alot better.