Posted: November 17th, 2009 | Author: davecavins | Filed under: Uncategorized | Tags: Endusersharepoint, jQuery, SharePoint, ticker, webparts | 25 Comments »
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.
Read the rest of this entry »
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.
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.
var startDate = document.getElementById('startDate').value;
var endDate = document.getElementById('endDate').value;
window.parent.location="default.aspx?T1=" + startDate + '&T2=' + endDate;
<p><div id="dateDiv" style="display:none;" class="filterBox">
<input name="startDate" type="text" id="startDate" value="" size="15" class="dateformat-Y-ds-m-ds-d" value="">
<input name="endDate" type="text" id="endDate" value="" size="15" class="dateformat-Y-ds-m-ds-d" value="">
<input type="submit" name="Submit" value="Go" onClick="submitForm();this.disabled=true;">
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
Then all you have to do is setup your filter based on the parameters from the query string.
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.