Dave Cavins » JavaScript

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

Filter Lists by Date Range

davecavins — Wed, 02 Sep 2009 14:06:42 +0000

On a recent project one of the requirements was that users be able to filter a list by a date range. To this I tried using two date filter webparts connected to a data view webpart. A detailed description of how to set this up can be found here. This solution worked well enough but there was a page refresh after the user entered each date, so the user enters the first date (page refresh) user enters second date (page refresh again) and finally they get the results. This annoyed me, I wanted to remove the extra page loads so I tried several things and this is what I finally came up with.

Setup

Using a content editor webpart build the form elements needed to collect the dates, two inputs and a search button. Give each input a unique ID. Here is the code I used.

The class names are used to activate the date picker script but can be whatever you want. I used this date picker script from Frequecy Decoder

The submitForm() function simply takes the values from the inputs and adds them as query string variables at the end of the URL. We can now use these values to filter the list.

Filtering the Data View Web part

To filter the content of the DVWP based on the date we have to setup some parameters for the start and end dates. Under ‘Common Data View Tasks’ just choose ‘Parameters’ for both the start and end date set the source as ‘Query String’. The query string variable will be whatever you defined in the JavaScript so in this case they are T1 and T2. Set the default value for the start date to some date impossibly far in the past and for the end date set it to something like the year 3000. This will ensure that the list will show all records if no values are passed for the start and end dates.

Then all you have to do is setup your filter based on the parameters from the query string.

You’re done.

Things to remember

The date has to be passed in YYYY-MM-DD format in order to work.

If the detault values for your start and end date parameters are not set high / low enough all records will not display when not date range is entered.

Dynamic Drive’s Featured Content Slider in Sharepoint

davecavins — Tue, 12 May 2009 18:39:56 +0000

I have used Dynamic Drive’s Featured Content Slider on a couple of recent projects and wanted to see if I could get it working in SharePoint. There were several key requirements:

User can easily add items
Users can choose a style for each item
Expired Items must not show
Each item will have a Title, Body and a customizable “read more” link.

Here’s how I did it.

First I created a custom list to store the slider items. These are the columns I used:

Title – Single Line of text
Body – Multiple Lines of text
Link URL – HyperLink
Expiration – Date and Time (expired items will not be shown)
Image – Picture
Style – Choice (we will use this column to allow users to choose the style of each item)

On the page I used a DataView WebPart to display the Title, Body, Image and Link URL columns. Using Sharepoint Designer I setup filtering on the expiration date. To do this in design view right click on the data view webpart and bring up the “Common Data View Tasks ” box and choose Filter. In the window I set the conditional statement so that items would only be shown if the expiration date was greater than today.

You can find a basic tutorial on using the DVWP here

Once we have the data we want showing on the page we need to get it into the right format. For the Content Slider to work properly the page needs to refernce an external JavaScript file and a CSS style sheet. Additionally the Slider itself has to follow this pattern:


Content 1 Here.

Basically the whole content slider has do be wrapped in a div with an ID of ‘slider1′ each of the items must be wrapped in a div with the class ‘contentdiv’. For more explanation on this visit Dynamic Drive

SharePoint uses xsl to style the data view so we have to go into the code view and add the nessecary Javascript, CSS and div elements to make everything work. Here is the xsl I used to get everything working in the page



	
	
	'
	CurrentDate
	0
	
		
	
	
		Table
		
		
			
				
			
		
		

 
	
		
		
			
		
	
	
		
		
		
	
	
	...

For information on how to write xsl stylesheets read this post on Heather Solomon’s site. Basically using tags like this:
allows you to insert various peices of data from the list. In the xsl above I am wrapping each item with the nessacary div to make the slider work. Inside each div I am inserting the title inside an h1 tag, the first 330 characters of the body in an a p tag, and the Link URL formatted as a Hyperlink.

To make everything look good I had to customize the CSS that comes from Dynamic Drive. The code is below.

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 0px;
width: 100%; /*width of featured content slider*/
height: 231px;
}
.sliderwrapper .contentdiv{
visibility:hidden; /*leave as is*/
position:absolute; /*leave as is*/
left:0;  /*leave as is*/
top:0;  /*leave as is*/
padding: 0px;
background:#fff;
width:100%;
/*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height:100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity:1;
opacity:1;
color:#fff;
font-size:x-small;
}
.contentdiv img{
height:205px;
width:270px;
margin:10px;
border:1px solid #ccc;
}
.contentdiv h1{
color:#eee;
font:normal normal large Georgia;
margin:0px;
padding:5px 0 0 0;
line-height:20px
}
.contentdiv a:hover, .contentdiv a{
text-decoration:none !important;
padding:0px;
}
.contentdiv p{
line-height:19px;
padding:0px 10px 0px 10px;
}
a.readMoreLink {
color:#555;
padding:4px;
background-color:#fff;
}
a.readMoreLink:hover {
color:#555;
text-decoration:none;
padding:4px;
background:#fff url('link_bg.gif') repeat-x bottom center;
}
.pagination{
width: 100%;
/*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
padding: 3px 1px;
font-size:x-small;
background:#fff url('link_bg.gif') repeat-x bottom center;
border-top:1px solid #ccc;
}
.pagination a{
padding: 0 4px;
text-decoration: none;
color: #666;
background:#fff;
}
.pagination a.selected{
color: #fff;
background-color: #666;
}
.pagination a:hover{
color:#fff;
background:#666;
text-decoration:none;
}

In the XSL stylesheet each item is wrapped in a div, the class name for the div is pulled from the ‘Style’ column in the list. The make the styles work I added the following CSS to my stylesheet

.Red_Style{
height:230px;
background:#671818 url('red_bg.gif') repeat-x top center;
}
.Blue_Style{
height:230px;
background:#3A5E97 url('blue_bg.gif') repeat-x top center;
}
.Green_Style{
height:230px;
background:#4E8822 url('green_bg.gif') repeat-x top center;
}

All I am doing is changing the background image and color for each style. Because the div wraps each item it would be possible to also change font colors, font size, image position and more but I just wanted to keep it simple.

The only drawback with using the dataview webpart is that this webpart cannot be easily moved from one site to another.