Dave Cavins » SharePoint

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');

Displaying document titles as links.

davecavins — Tue, 29 Dec 2009 16:23:33 +0000

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.

My Solution

I added two new columns to the Document Library.

“DocSrc” – a plain text column to hold the path to the document.
“Title Link” – a calculated column to create the link (I will explain this later).

First we need make sure our documents have titles.

Here is how to add Titles to a document in Word 2007:
Click on the ‘orb’ and choose “Prepare” > “Properties”

In the pane that opens you can enter in a title and other Meta data.

Now if a user uploads a document without a title we need to let them know and ask them to add a title.

Next I created a simple SharePoint Designer workflow, here is how.
Create a new workflow in SharePoint Designer and give it a name. On the first screen I checked these two boxes:

Allow the workflow to be started manually.

This is because we want the workflow to run for new items but just in case some items have already been loaded in the library we need to be able to run the workflow on them as well. In step 1 of the workflow I check to see if the “Title” field is empty, if it is not I copy the value from the “URL Path” field into my “DocSrc” field. I also added a condition so that if there is nothing in the “Title” field the workflow will email the user and ask them to add a title. In the body of the email I provide a link to the document. That’s all we need for the workflow.

Building the link

So now we have the title of the document and the URL of the document we can build our link in the “Title Link” column. We need to create a formula in the “Title Link” column that will create a link to our document and use the title as the displayed text.
In the “Title Link” column we just need to put the following text:

=CONCATENATE("",[Title],"")

Next we just need to make the html code display properly using this script from Path to SharePoint.

Now users can see meaningful titles for thier documents without having to decifer complex document names and they will still have access to see the document name with the dropdown menu.

When it comes to document management and getting new SharePoint users on board things like this are important in helping them feel more comfortable. If you dont take steps to make the system suit the users needs they are more likely to just use SharePoint as a new shared drive and just dump all their documents into a library that never get used.

Has anyone else dealt with this type issue? What was your solution?

CSS-Tricks AnythingSlider in SharePoint

davecavins — Mon, 07 Dec 2009 20:10:42 +0000

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 tag. It should be right after the closing 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.

Important: Adjust the links on the code so that point to your local copies of the css easing and plugin files.

Notes

I made a few small changes in the css file to make things work better with SharePoint. In page.css file I deleted several of the classes so they would not interfere with SharePoint’s styles. In the xsl I used a div with a class of .textslide to wrap the content so I had to change that in page.css as well. To keep long annoucements from breaking the design I set the overflow on the .textslide div to hidden. Below is the code I used in page.css.

/*hide content that is too long */
.textSlide { padding: 10px 30px; overflow:hidden; }
.textSlide h3  { font: 20px Georgia, Serif; margin-bottom:12px; }
.textSlide h4  { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
.textSlide ul  { list-style: disc; margin: 0 0 0 25px; }
.textSlide ul li  { display: list-item; }

I did not make any changes to slider.css. It may be easier to just combine the tow files to keep things simple and reduce page load times.

Conclusion

The AnythingSlider plugin is lightweight, powerful and easy to customize. Adding this type of functionality that is common on regular websites to a SharePoint site can help guide users to important information and of course make your site ‘cooler’ than the average SharePoint site.

The code above just shows all the items in the list but once you have it working it is easy to add your own sort/filter parameters to the data view so only certain items are shown.

The slider could also be implemented to run off of the SharePoint list web service the same way I did in this post. If you have any questions or comments feel free to post.

Updating the People Picker

davecavins — Fri, 04 Dec 2009 21:25:04 +0000

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

So to prefill the form with some information we used a simple jQuery script in a Content Editor Web Part on the NewItem.aspx page. Initially we tried to target the input by using its title. This did not work so I looked at the code of the page using FireBug. It turns out that the field is actually a hidden textarea and what you see on the screen is actually just a div with a class of ms-inputuserfield. Here is part of the code we used to populate the people picker.

This script can used along with the SP web services to prepopulate the people picker and other fields of a list. This is useful if you have a contacts list where you want people to be able to add themselves or a task list where users are supposed to assign items to themselves. Prepopulating fields makes it easier for the user saving them time.

The Rich Text Field is similar to the people picker in that it also hides the actual textarea and uses a div instead. In a later post I will explain how to use the web service to prepopulate list fields with information from the current users profile.

SharePoint Vertical News Ticker

davecavins — Tue, 17 Nov 2009 20:22:46 +0000

On a recent project I needed to create a simple news ticker do 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

davecavins — Tue, 10 Nov 2009 17:12:01 +0000

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

Setup

To get this slideshow up and running there are a few things we have to do to prepare.

Create a standard image library. You can add additional fields if needed but the list needs to have all of the out of the box fields.
Get jQuery. Either link to the latest version from Google or download it and put it in a location on your server.
Download the s3 slider plugin and put it somewhere on your server.

Querying the SharePoint List

I am using the techniques described by Jan Tielnes for querying SP lists with javascript. Here is the code.

Configuring the query.

In the code above I am querying a list named ‘Pictures’ and returning the title, link to the file, file name, file type, description and the ID. To change the name of the list just update this tag with the appropriate list name.

Name of the List you want to use

Note: If you have renamed a default Image library the name may not have actually changed from SharePoint’s perspective so double check by browsing to the list and reading the URL string.

If you want to include data from other fields in the html output just add the field names to the ‘ViewFields’ section of the soap envelope.

You will also need to add a reference to the field in the ‘liHtml’ variable. When referencing fields in the variable remember to put ‘ows_’ in front of the field name.

Remember the field name that is displayed through the SharePoint UI is not always the real field name. In this post Heather Solomon describes a good way to find the real field names.

The CSS

I made a few changes to the CSS to set the size of the slideshow and the colors and fonts for the captions

 #s3slider {width: 450px; height: 300px; position: relative; overflow: hidden; border:1px solid #666;}
#s3sliderContent {width: 450px; position: absolute; top: 0; margin-left: 0;}
.s3sliderImage {float: left; position: relative; display: none;}
.s3sliderImage span {
   position: absolute;
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 5px 13px;
   width: 449px;
   background-color: #fff;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   color: #000;
   display: none;
   top: 0;
}
.s3sliderImage span h3{margin:1px;	padding:1px; font:normal italic 18px/14px Georgia, serif;}
.s3sliderImage span a{float:right;color:#fff;background:#333;padding:2px;text-decoration:none;margin-top:5px;}
.clear {clear: both;}

Download all the the code in a .dwp here

Resizable textareas in SharePoint edit forms

davecavins — Mon, 02 Nov 2009 15:01:21 +0000

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:

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.

So all we have left to use is the title attribute. With jQuery we can select elements based on thier title. There are more details on using jQuery selectors on the jQuery website. To select our text box with the title “Simple Text” we use the following code:

$('textarea[title="Simple Text"]')

A quick way to check and be sure your selector is working is to call the addClass function in jQuery and change the background color or border color of the element.

Trial and Error

So after I verified the selector was working I applied the plugin but nothing happened. After some testing I realized the script would not work on the rich text box because SharePoint has a JavaScript that runs to initialize the WYSIWYG editor. I am still experimenting so if I get it working on the rich text field I will post and update. For now it only works with the plain text field.

Here is the code I used:

I just put the code in a content editor webpart on the EditFomr.aspx and NewForm.aspx pages. To add the CEWP to the page just add “&ToolPaneView=2″ to the end of the url to get the toolbar.

Adding Suggestions to the Sharepoint search box : Part 2

davecavins — Wed, 28 Oct 2009 16:07:37 +0000

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.

Setup

Do everything from the first post
Add a link to jQuery somewhere on the page.
Create a custom list called ‘Suggestions’. It just needs to have the default title field. Create at least one item in the list and in the title enter several comma separated words.
Add the code below to the page.

The code above get the items from the Suggestions list, seperates them with commas and puts them in a hidden div with an ID of data. Now we just need to edit the searchfield script to read in the information from our hidden div. To do this edit searchfield.js line 26 to call the GetItemsFromSP function and set the suggestionText variable to be equal to the contents of our hidden div. Here is the code.

/**/*/*/*/**/
	GetItemsFromSP();
	var suggestionText =  $(“#data”).html();

Test the page and make sure it works by typing the first few letters of one of the words in you list item.

Conclusion

This is very similar to Jan Tielens’ SharePoint Search-as-You-Type with jQuery solution but I wanted the search box to still be usable even if there are no suggestions. In Jan’s solution the ‘search box’ does not actually do anything when the magnifying glass is clicked. There are likely better ways to do this and if you know of one please post a comment.