This article explains how you can use jQuery with Sharepoint 2007 to customise how your lists appear on your site. With jQuery we will:
- highlight specific columns or rows based on values
- change the default “no records” message, and
- change the default “add item” message.
Although it’s not envisaged you’ll need to do all three in every list you deliver!
Getting started
To get started first add the required list to your page. Use the standard list webpart and customise as best you can within the webpart itself:
- set which columns to present
- set the order to display the columns
- set the default appearance (or not) of the toolbar
We’ll use jQuery to interrogate that default view and customise as required.
Once the list is ready, next is to add jQuery to the page. Add a Content Editor webpart, use the Source Editor and add the required link:
<script src="/path/to/jquery-1.9.1.min.js"></script>
We always upload a local copy to our server (because a lot of our internal audience do not have internet access), but you could just link to jQuery on the interwebs. This article provides the link and an explanation of when/why to use this approach.
Highlight specific columns or rows
This is easy to achieve using the jQuery Filter() function. We’ll simply search for matching items and then add styling to highlight them.
First step is to update your view so that the value you want to highlight/select is included in the data displayed. jQuery can only work on it if it appears on the page. Ans since list data appears in a table, it will then be searchable within a <td> cell:
<script>
$("td").filter(function() {
return $(this).text() == 'Value to Match';
})
.css("color", "red");
</script>
Alternatively/preferably, when you match your required value apply a defined style (in a separate stylesheet) to it rather than manually making style changes:
<style>
.highlighted {
background-color: #ccc;
color : red;
}
</style>
...............
<script>
$("td").filter(function() {
return $(this).text() == 'Value to Match';
})
.addClass("highlighted");
</script>
But what if you want to highlight the entire row that matches the selected value, not just the value itself? With jQuery that’s simple, using the .closest() function:
<script>
$("td").filter(function() {
return $(this).text() == 'Value to Match';
})
.closest ("tr")
.addClass("highlighted");
</script>
Since you’ll need to add a content editor webpart to include the required highlight script, consider adding visible text to that webpart that explains to the user what the highlighting represents.
The result:
Before (active and inactive records not differentiated)
After (inactive records highlighted with explanation below list)
Change the default Add Item message
Now let’s clean up the standard list option of “Add Item” that presents when you use the summary toolbar:
The standard message is a bit vague. To change it we’ll use the Filter() to search for the “Add Item” anchor text and change to something smarter:
<script>
$("a").filter (function() {
return $(this).text() == 'Add new item';
})
.text("Add yourself to our database");
</script>
The result:
Change the default “No records” message
The issue with the standard “No records” message is not only is it not very friendly, it also expects you to have the full toolbar visible.
Notice how the instructions talks of the ‘New’ button above, but that is only available if using the Full Toolbar. Something we rarely do since it adds a heap of confusing features for settings, etc.
To fix we can use the same approach as for the add item link: search for the standard text and replace with something more appropriate. To do so you can use the filter() function as above.
Problem here is the standard text is quite long (and will change if the list name changes). So a better solution would let us just match a key snippet of the standard text (eg “no items to show”) and let us then update the full text. The jQuery selector to match partial text is :contains() but this will surprise you in its result:
<script>
$("td:contains('no items to show')")
.css("background-color", "red");
</script>
Issue is :contains() will match not just the TD we’re after, but every TD that contains that TD. Since Sharepoint 2007 goes to town with tables, that’s a lot of TDs changing colour.
Getting around this issue is not simple (as this Stack Overflow question explains). However logically we know the TD we’re after is at the bottom of the tree (ie no child nodes other than text) so let’s use that to filter our matches. Again, Stack Overflow can help: http://stackoverflow.com/questions/743957/how-to-get-elements-which-have-no-children-but-may-have-text. Leading us to the following solution:
<script>
$("td:not(:has(*)):contains('no items to show')")
.text("No items to show");
</script>
The result:
Conclusion
This article shows some simple jQuery technicques to improve the appearance of lists in Sharepoint 2007. No promises are made that these are the most efficient methods, but they work. Show us the improved methods in the comments.
