Dave Cavins » SharePoint

#SharePoint Featured Content Slider Digitally Remastered for #SP2010

davecavins — Wed, 28 Mar 2012 17:01:01 +0000

So I rewrote this web part to work a little better in SharePoint 2010. I made a few minor changes and improvements. If you can think of other improvements put them in the comments.

Whats new

Added an order field to the List template to allow more control of the display order. In the list template this field is setup to require unique values.
Re-wrote the CSS to include some new CSS3 enhancements. If you are using a newer browser the slider will look better.
Tested across muliple browsers. See screenshots below.

The Code

Here is the XSL needed to add the web part to the page.



	
	
	'
	
	1
	
	0

	
		
			
				
					
						
							
						
						
							
						
					
				
			
			
				
			
		
	

	
		Table
		
		
		
		
		
		
		

		
			
				
			
			
			
			
				
				
					
						
						
						
					
				
				
				
				
			
		
		
			
			
			
			
			
		
	
	
		
		
		
		
			
			
			
				
					
				
			
		

	
	
		
			
				
				
				
				
		
	
	
		There are no items to show in this view.
		
			
				
					
				
			
		
	
	
		
		
		
		
		
		
					
						
						
						
						
						
					
				
			
				
			
		
	
	
		
		
		
		
		
		
			
				1
				
					
				
			
		
		
			
				
					
				
				
					
				
			
		
		
			
		
		
			
				
				javascript: ;
				Start
				&nbsp;
				
				javascript: history.back();
				
				
				&nbsp;
			
			
			 - 
			&nbsp;

			
				
				javascript: ;

CSS (contentslider.css) – This file will need to be referenced in the page for it to work properly
Javascript (contentslider.js) - This file will need to be referenced in the page for it to work properly
List Template – Change the file extension to stp once you download this file.

For instructions on how to set everything up please see my previous post. Questions or suggestions? Leave them in the comments.

Here is what you get

IE7

Internet Explorer 7

Google Chrome

FireFox

Mozilla Firefox

Some thoughts on #SharePoint Adoption

davecavins — Tue, 08 Nov 2011 18:00:50 +0000

SharePoint is a powerful tool for collaboration and information sharing. Working on documents, tracking issues, tasks and projects can all be made easier using the tool. In many demos I have seen SharePoint can be used as a complete solution for managing the complete life-cycle of a business process. It all seems so great.

In the real world of actual organizations (at least in my experience) not everyone is willing or interested in using SharePoint. There are ways to integrate external applications with SharePoint that can create very powerful solutions but in some cases the issues is more than just connecting to other data sources. There are cases where you just need to pull information out of SharePoint for a report to management or for a meeting where you will not have access to your SharePoint site.

This is one place where things could be made easier. SharePoint does allow users to export content to excel or access for manipulation but in 2007 there was not a very good print view. For instance, if I was to run a search and needed to print the results or manipulate them to generate a report there is not an easy way of doing so. There are some add-ons you can install to make the process easier such as this one from ZenPo Software Innovations.

I think this issue can in some cases help hinder adoption. Users are comfortable with Excel, Word and Outlook and expect to easily transfer information between them. When users are new to SharePoint it’s can be daunting when they hear they are supposed to do all their work in this new tool.

There are several simple ways to help ease the transition.

Don’t just focus on SharePoint features in training, also show the user how they can easily transition information from SharePoint into tools they are more comfortable
Exporting to Excel, using the data sheet view to copy/paste from Excel and connecting lists to outlook are all very useful features that can make using SharePoint far more palatable for a novice user.

Simple Search Box with Radio Buttons

davecavins — Mon, 22 Aug 2011 14:26:43 +0000

So lets say you want users to be able to selectively search content from 3 (or more) different lists (The lists may or may not be on the same site). Out of the Box there is not an easy way to do this.

Having the user browse to each list or library and search it specifically
Use the site wide search which will return results from the whole site.

You could setup search scopes for each list but if you manage a large number of sites this could become a lot of work to maintain.

So the plan is to build one search box with radio buttons that will let you choose what list or scope you want to query. Here is how I did it.

The HTML

Here is the basci HTML I used. I have a container div I use for styling, the input box, 3 radio buttons, and a search link. Things to notice:

On the container div I have included javascript to call a function named ‘submitSearch’ if the user presses the enter key. See line 1.
Instead of a submit button I am using a regular link that calls the same function as above.

All Tasks Discussions

Search

JavaScript

Because we cannot include an actual form in the page and I did not want to use a page viewer web part for this solution we will use JavaScript to submit the values from the search box. I am using jQuery as usual. To keep it simple the function checks the value of the selected radio button, if it is the url of the current site the search is run using the ‘This Site’ scope. Otherwise the search uses the scope that is defined by the value of the radio button and the ‘This List’ scope.

See the comments in the code for more information.

// include jquery

Using the query string

Like most search engines SharePoint uses the query string to pass the information you want to search for. A quick look at the search results page tells us what we need to send in order to get the results we need. The rest is just simple JavaScript. In the code above you can see how I built the query string using the various elements.

Disceting the Query String

All together now

All Tasks Discussions

Search Results

In the code above you will notice I am passing the search term to a page called search.aspx. This is a page I created by adding the search web parts. I used my own search results page because I wanted to have control of the look and feel. You could also send the results to a search center site or the out of the box search page (_layouts/OSSSearchResults.aspx), this might be different in 2010.

Useful Resouces

Zoomable Photo Grid

davecavins — Tue, 23 Nov 2010 16:05:54 +0000

I started on this post back in July and I am just getting around to publishing it.

The out of the box SharePoint image library is nice and offers lots of options for viewing the images. However as more and more sites begin to use jQuery plugins and other methods for presentation the SharePoint views seem limited at best.

A few weeks ago while doing some random browsing I found this photo grid plugin and decided to try to implement it in SharePoint, here is how I did it.

Add links and scripts to the page



/* Setup.js is where you can change settings for the plugin*/

XSL Code

This is the easy part. Each image is wrapped in an

tag. The unordered list has an id of “pg” that is used to call the script. The caption for each item is wraped in a

tag. The rest is handled by javascript.



http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">


'
0
http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">



BulTitl















{@Title}" />
{@Title}

I had some issues with the caption not displaying propely in IE7 but I did not have the time to find a fix. Its always best to resize your images before you load them into SharePoint but if for some reason you don’t the plugin forces them to be the right size so vertical images may be stretched. Overall this solution would only work well in specific situations that require this type of functionality. If you have questions feel free to comment.

Resources

Zoomable Photo Grid http://www.gethifi.com/demos/jphotogrid
jQuery

#BCP2010 Part 1

davecavins — Tue, 31 Aug 2010 18:00:59 +0000

I meant to post this last week during the conference but I was too busy or too tired to do so.

So the conference started off with an hour long keynote presentation that began with short a welcome from Bill English from Mindsharp. The welcome was follow by an hour long advertisement for Microsoft’s SharePoint MCM program. Various MCM’s came up and talked about how great the program is and how much smarter they are as a result of attending it.

Overall this session was somewhat interesting but for the most part I don’t feel that it really applied to most of the audience of the conference. There are only 24 slots available for the MCM course each quarter and the training is rather expensive ($30k). Needless to say I would not have felt bad if I had come late.

The rest of the day I attended sessions by various presenters mainly focused on the new features in SharePoint 2010. I wish there had been more sessions focused on MOSS 2007 or just general best practices because although the presentations were interesting I know it will be quite some time before I will get to use SP2010 at work.
This was my first conference and it felt good to be able to learn so much from others and talk to people who are working with the same tools. I was glad to see such a diverse group of people including developers, administrators, project managers and other users.

I’ll write more later but right now it’s time to get back to work.

My first #SharePoint Conference #BPC2010

davecavins — Tue, 24 Aug 2010 15:16:45 +0000

So I am at the Best Practices Conference here in Reston VA. I am going to try to post about what I learn and some of my opinions on the conference as a whole. This is my first time attending a SharePoint Conference so it should be interesting. I hope to learn a lot about both 2007 and 2010.

Most best practices information I have read before has been pretty good but because of the many uses ad types of SharePoint deployments it seems to be very difficult to establish many best practices that will always be true no matter the size or type of your deployment.

A Better Annoucements Ticker

davecavins — Wed, 04 Aug 2010 21:08:14 +0000

A while back I did a post about how to make a vertical news ticker, in the comments several people pointed out problems with the code so I decided to write a better version of the code. Here it is.

New Ticker

For this ticker I started out with a default Annoucements list. Because I wanted to display a thumbnail for each annoucement I added a signle line of text column called Subtitle and a Picture column called Picture. Here are the columns I used.

Here is the basic structure of the ticker.


« Back	More pictures »

    
      
           
           Title
          
              Subtitle Text
          
        First 200 Characters of the body
       Read more

Below is the xsl code I used to build the ticker.




	
	
				'
				
				
	CurrentDate
				0
				
					
	
				
					Table
					
						 
	« Back
	More pictures »

		
		
			
				
			
			
			
	
				
					
					
						
		
	
		
		
		
		

				
		
		

				
				Read more

If you try to run the page with just this XSL it will give an error. You will also need to add these two lines to the parameter bindings section of your dataview web part. I used these 2 parameters to get the URL of the current page in order to built the ‘read more’ link. This is what I would call a best practice because other wise you would have to hard code the URL to your site which makes it harder for others to use your code.

In addition to this code you will also need to add links to these two files.


/* css file to style the ticker */

Here is the css I used to style my ticker.

/* root element for scrollable */
.vertical {
	/* required settings */
	position:relative;
	overflow:hidden;
	/* vertical scrollers have typically larger height than width */
	height: 665px;
	width: 700px;
	border-top:1px solid #ddd;
}

/* root element for scrollable items */
.items {
	position:absolute;
	/* this time we have very large space for height */
	height:20000em;	margin: 0px;
}

/* single scrollable item */
.item {
	border-bottom:1px solid #85b1ee;
	border-top:1px solid #85b1ee;
	margin:10px 0; padding:15px; font-size:12px;
	height:180px; background:#d6e8ff;
}

/* elements inside single item */
.item img {
	float:left;
	margin-right:20px;
	height:180px;
	width:240px;
	border:5px solid #fff;
}

.item h3 {
	margin:0 0 5px 0;
	font-size:16px;
	color:#4a6499;
	font-weight:normal;
}

.item p a{padding:3px;}

.item p a:hover{ background:#fff; text-decoration:none;}

.item p { padding:3px; margin:5px;}

/* the action buttons above the scrollable */
#actions { width:700px; margin:30px 0 10px 0;}

#actions a {font-size:11px;	cursor:pointer; color:#666;}

#actions a:hover {text-decoration:underline; color:#000;}

.disabled {visibility:hidden;}

.next {float:right;}

Notes

The XSL is setup so that if no thumbnail is provided it will automatically adjust. The same is true if no subtitle is entered. This is done using conditional formating.
Only the first 200 characters of the body are shown. To change this amount you can just change this line of code xsl:value-of select=”substring(@Body,0,200)”.
You do not need the whole jQuery library in order for this to run.

Resources

jQuery Scrollable Plugin
http://plugins.jquery.com/project/scrollable
How to get the Current URL in XSL
http://www.jwc3.net/2008/05/how-to-get-url-in-xsl.html

Switch Themes Without a Page Refresh: Part 2

davecavins — Mon, 14 Jun 2010 14:50:09 +0000

So in part one of this post we got all the CSS and other theme file we needed to stuck them in a document library.

With JavaScript you can change the CSS file a page uses without requiring a page refresh. I have used this technique many times on non-SharePoint sites but there are some special challenges implementing this in SharePoint. Most of the scripts I have used in the past use the alternate style sheet method as describred by A List Apart here. That method works fine but I had to find another way because I was already using that script to allow users to change the font size. After some research I found this script from CSS Newbie that worked pretty well without using alternate style sheets.

The problem

While the script works just fine on regular HTML pages it cause problems in SharePoint here is why :

 $("link").attr("href",$(this).attr('rel'));

This line of code basically finds all the linked CSS files in the page and changes thier value to point to the new style sheet you select. This is fine on a site that just uses one CSS file but in SharePoint bad things happen. In most cases we dont want to completely remove the reference to core.css. For most themes many elements don’t need to be changed so we only have to write the CSS to change them and let core.css do the rest. If you remove core.css its like using a global reset (discussed in more detail here) which means you will have to restyle everything. So them point is we want to leave core.css in the page and just add our theme.

To do this I had to make some changes to the master page to create to interface users will use to swap themes.

Edit the Masterpage

Here is the code I added to the masterpage. This can be styled to look however you want and can be added anywhere in the page that makes sense.


	Reset CSS
	Verdant
	Belltown
	Petal

In addition to this we also need to add a link to our css file to the master page. I put it at the end of the head section.

I added a class to the link so that we can use jQuery to target only that css link and change it to match the theme the user selects. Initially I left the href value blank but if you want to apply some default styles you would just add the link to the css file there.

Use jQuery to Swap the CSS

So here is the code I used to swap the stylesheet. The main thing I changed is on lines 7 and 12. I changed the selector so it will only target tags with a class of ‘altStyle’. This allows us to swap themes without breaking the link to core.css.

Resources

You will need jQuery either locally or linked from Google. Just update the link on line 1 as needed.
In the code above you will notice a link to cookie.js, this is the jQjuery cookie plugin that you will need in order to save users’ theme selections. In the code above on line 13 you will see where I create a cookie named css. For testing purposes you can uncomment line 10 to see what the cookie value is on page load. You can download the plugin from here. jQuery Cookie Plugin
You can see the original code I started from in this script from CSS Newbie

Conclusion

While this is a very simple solution it is a quick way to add in some fuctionality that many users want without alot of custom code or requiring the user to navigate to multiple pages. Users like to feel that they have some control over the site (even if its just changing the color). Feel free to post any questions or comments.

Switch Themes Without a Page Refresh: Part 1

davecavins — Mon, 07 Jun 2010 19:03:26 +0000

Many sites offer the ability for users to change the color and style of the site to fit their preference. SharePoint has this feature to some extend through themes but changing themes is not a very simple process and requires browsing to several pages.

Users need to be able to switch themes and have the setting saved
No page refresh
Should be able to use both out of the box themes and custom themes

So first I needed to get the CSS files and images for the themes I wanted to use. When you assign a theme to a site all the files for the theme are copied to a folder named _themes in the root of the site.

_themes folder

So what I did was assign each theme I wanted to use to the site one at a time. With SharePoint designer I copied the files folders for each theme into a document library called Site Styles. Each folder contains all the resources needed or the theme to work.

Here is what I ended up with

Site Styles Library

If I wanted to create a custom theme I could just add another folder with my custom CSS and images.

This same technique can be used when developing your own custom theme, just copy one that is similar to what you want and use the alternate CSS link on the master page settings page to add it to the site. Inside of the folder for each theme is a file named theme.css. Link to that file and SharePoint will apply the theme to the site.

Alternate CSS URL

Now everything we have done so far is pretty basic and easy to do but we will pull all this together with some simple edits to the master page to complete the solution. In part 2 I’ll explain how we use JavaScript to switch styles and set a cookie to remember the users theme choice.

Improving #SharePoint Forms – Watermarks

davecavins — Mon, 03 May 2010 18:58:59 +0000

So I found this cool jQuery plugin that does watermarks for form inputs. Using watermarks is a good way to help make SharePoint forms easier to use. To test the plugin I started with the new item form from same test list I used in my previous posts.

Watermarks

Prerequisites

jQuery Library referenced in the page
CEWP on the page

Setup

First make sure you reference a copy of the plugin script. I added the link to the section of the page using the method explained in this post.

We also need some css to style the watermarks

The plugin works by finding all the inputs with a class of “watermarked” and using this title attribute as the watermark. So I used jQuery to select the inputs I wanted to watermark and add the “watermarked” class to them.

Here is the code I used.

$("input[title='Author']").addClass('watermarked');
$("input[title='Title']").addClass('watermarked');
$("textarea[title='Body']").addClass('watermarked');

After the inputs have the right class all we need to do is call the plugin script like so

$('.watermarked').each(function() {
  $(this).watermark('watermark', $(this).attr('title'));
});

Thats all. Enjoy.

Switch List Displays with JQuery and CSS

davecavins — Wed, 21 Apr 2010 20:58:05 +0000

Sometimes it is useful to allow users to quickly change how data is displayed. Changing the display can make is easier to see patterns or find a specific item you are looking for. With CSS and jQuery we can easily change the way content is displayed and arranged on the page. I got the idea for this post from here

Switch views using CSS and jQuery

Basically by changing the class assigned to a div wrapping the content we are able to change the way things are laid out and hide what we don’t need. Here how I set it up in SharePoint.

I started with a standard Image library and added some images of one of my bikes. I filled in the title and description for each item. You can use this same technique on other types of lists.
Next I created a page and displayed the list in a dataview web part
I edited the XSL to show the items in an unordered list with a class of ‘display’. Inside of each
I used various tags and classes to style the images and descriptions.
```
	
	
	
	
		
	
	
```

Before the opening




Switch Display /* link to trigger the switch */

Then I wrote some css to style the list differently based on the class of the

Below is the xsl and the CSS I used.

XSL (includes the code above)



	
	
		'
		
		
		0
		
		
	
				
					BulTitl
					
					
  Switch Display

CSS

/* normal view styles */
ul.display li a {
    text-decoration: none;
}
ul.display li{
	background:#E3EFFF;
	margin:3px;
	border:1px solid #9FC2F1;
	height:130px;
	list-style:none;
}

ul.display li .content_block {
    padding: 5px;
	clear:both;
    margin:4px;
}
ul.display li .content_block h2 {
    margin: 0;
    padding: 2px;
    font-weight: normal;
    font-size: 1.4em;
}
ul.display li .content_block p {
    margin: 0;
    padding: 5px 5px 5px 145px;
    font-size: 1.2em;
}
ul.display li .content_block img{
    padding: 5px;
    border: 4px solid #336699;
    background: #fff;
    margin: 2 9px 2 2;
float: left;
}
/* thumbnail view styles */
ul.thumb_view li{ width: 200px; float:left; background:transparent; }
ul.thumb_view li h2 { display: inline; text-align:center; margin:2px; padding:2px }
ul.thumb_view li p{ display: none; }
ul.thumb_view li .content_block a img { margin: 5 0 10px; }
/* styles for the style switcher buttin */
a.switch_thumb {

	padding:5 5 5 25px;
	margin:10px;
	background:#D6E8FF url('/_layouts/images/itcat.gif') no-repeat 5px 7px;
	outline: none;
	border:1px solid #9FC2F1;
	font-size:.8em;
}
a:hover.switch_thumb {
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background:url('/_layouts/images/itcontct.gif') no-repeat 5px 7px; }

If you want to use this same solution for a different type of list just create a dataview Web Part to display the items in the format you want and wrap everything in a container (div, ul, table) with a class. Also use tags (h2, p, span, div, etc.) to wrap the pieces of data you are displaying (this will make it easier to control with CSS). Change the CSS and JavaScript to work with you new container and XSL.

Got questions? Post a comment.

Improving #SharePoint Forms – Hints

davecavins — Mon, 22 Feb 2010 17:22:39 +0000

When users are asked to enter information in a form sometimes it helps to give them a hint regarding what types of information should be entered. Out of the box you can enter a description of each field that will be displayed. If you want something more dynamic here is how to do it.

Add jQuery to the page using the method described in this post
Download the jQuery Hint Box plugin and link it to the page.
Call the script and set the options for the position and html content of the hint. Here is an example:

The above script simply selects the field using its title attribute then sets the css class for the element, its contents and position.

Here is the CSS I used for my example.

.simple_box{
	border:1px solid gray; background:url('/_layouts/images/toolgrad.gif');
	font-size:xx-small; color:#444; padding:7px;
}

Here it is in action.

hints

Improving #SharePoint Forms – Character Count

davecavins — Tue, 02 Feb 2010 16:21:10 +0000

For the sake of demonstration I made a list called quotes. Each quote has a title, body and author field, as a requirement the body field should not have more than 200 characters. So to let users know when they are getting close to the character limit we will setup a character count script.

For this solution I will use this jQuery script from CSS Globe.

The default form

Setup

So first off we need to add a link to the jQuery script and the plugin. You can do this using a content editor web part but I have noticed in some cases scripts need to be in the section of the page. The easiest way to add the scripts to the of the page is to use the following code.

So once you have all the scripts you need on the page we just need to attach the behavior to the form body form field. To do this we can add some JavaScript to the page in a Content Editor web part. We can use jQuery to select the element we want to target and then configure the plugin settings.

For more configuration options and explanations of the plugin check out this page.
I used the following CSS to style the appearance of the character count text.

.counter{
	position:relative;
	right:14px;
	top:0;
	font-size:12px;
	font-weight:normal;
	color:#555;
	float:right;
	clear:both;
	display:block;
	text-align:right;
	background:#fff;
	width:150px;
	padding:3px;
	border:1px solid #888;
	border-top:0px;
	margin-top:-1px;
	}
.warning{color:#660000; font-weight:bold;}
.exceeded{color:#e00; font-weight:bold;}

In Action

Too many characters

In the next part of this series we will add hints to the form fields and make some other improvements.

Improving #SharePoint Forms

davecavins — Tue, 26 Jan 2010 02:43:15 +0000

Over the next few weeks I will be writing a series of posts on how to improve the out of the box SharePoint forms by using simple CSS and jQuery solutions. These solutions will help improve usability as well as enhance the look and feel. Look for the first post later this week.

As a point of reference this is what we will be starting with.

Standard SharePoint Form

Stay tuned for more soon.

Hiding the user presence icon

davecavins — Wed, 06 Jan 2010 21:40:48 +0000

When you are using a data view web part to display information including a person field SharePoint always shows the status icon beside thier name.

status icon

In some cases this is exactly what you want and can be very useful. But sometimes you just want to show a name and nothing else. With most fields you can just change the formatting options to change the display. If you choose to format the value as text SharePoint spits out this long html string.

Cavins, David R

Format as

Each of the other formatting options also provides un-desirable results.
Using some basic CSS we can get rid of the status icon and format the text so it does not look like a hyperlink. First wrap the field value in an element with a class. I used a span with a class of “person”

Then just add this css to the page.

.person nobr span a {
text-decoration:none;
color:black;
cursor:default;
}

If you want to take it a step further you can use jQuery to remove the ‘href’ attribute. Using jQuery we can target the container with the link in it and then change the href value.

$('span.person a').removeAttr('href');