Simple Search Box with Radio Buttons

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. 

</pre>
<div id="multisearch" onkeydown="javascript:if (event.keyCode == 13) submitSearch();"><input id="search_txt" title="Enter search words" type="text" name="k" maxlength="200" />
<label for="all">
<input id="all" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint" checked="checked" />
All
</label>
<label for="posts">
<input id="posts" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint/Lists/Tasks" />
Tasks
</label>
<label for="disc">
<input id="disc" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint/Lists/Discussion" />
Discussions</label></div>
<pre>
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
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">// <![CDATA[

// ]]></script>
<script type="text/javascript" language="JavaScript">// <![CDATA[
function submitSearch()
{
// If the all radio button is selected search everything on the site
if(the_value = <a href="http://myurl.com/sites/SharePoint">http://myurl.com/sites/SharePoint</a>){
//set the search terms to the value ofthe text box
queryVal = $('#search_txt').val();
the_value = $('input[name="radiou"]:checked', '#multisearch').val();
//build the url with the url of the search page, the search terms and search scope and browse to it
window.parent.location='search.aspx?k=' + queryVal + '&u=' + the_value + '&cs=This Site';
}
else {
// get the search terrm from the text box
queryVal = $('#search_txt').val();
// Use the radio button value as the url for the search scope
the_value = $('input[name="radiou"]:checked', '#multisearch2').val();
//build the url with the url of the search page, the search terms and search scope and browse to it
window.parent.location='search.aspx?k=' + queryVal + '&u=' + the_value + '&cs=This List'; } };
// ]]></script>

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" language="JavaScript">// <![CDATA[
 function submitSearch() { if(the_value = "http://myurl.com/sites/SharePoint"){ queryVal = $('#search_txt').val(); the_value = $('input[name="radiou"]:checked', '#multisearch').val(); window.parent.location='search.aspx?k=' + queryVal + '&u=' + the_value + '&cs=This Site'; } else { queryVal = $('#search_txt').val(); the_value = $('input[name="radiou"]:checked', '#multisearch2').val(); window.parent.location='search.aspx?k=' + queryVal + '&u=' + the_value + '&cs=This List'; } };
// ]]></script></pre>
<div id="multisearch" onkeydown="javascript:if (event.keyCode == 13) submitSearch();"><input id="search_txt" title="Enter search words" type="text" name="k" maxlength="200" />
<label for="all">
<input id="all" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint" checked="checked" />
All
</label>
<label for="posts">
<input id="posts" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint/Lists/Tasks" />
Tasks
</label>
<label for="disc">
<input id="disc" type="radio" name="radiou" value="http://myurl.com/sites/SharePoint/Lists/Discussion" />
Discussions</label></div>
Search

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

• Getting started with jQuery
• How to create Custom Search and Results page

Zoomable Photo Grid

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="jphotogrid.js"></script>
/* Setup.js is where you can change settings for the plugin*/ 
   <script src="setup.js"></script>
<link href="jphotogrid.css" rel="stylesheet" media="screen" />
  <!--[if IE]>
   <link href="jphotogrid.ie.css" rel="stylesheet" media="screen" />
  <![endif]-->

XSL Code

This is the easy part.  Each image is wrapped in an <li>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 <p> tag.  The rest is handled by javascript.

<Xsl>
<xsl:stylesheet xmlns:x="<a href="http://www.w3.org/2001/XMLSchema">http://www.w3.org/2001/XMLSchema</a>" xmlns:d="<a href="http://schemas.microsoft.com/sharepoint/dsp">http://schemas.microsoft.com/sharepoint/dsp</a>" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="<a href="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">http://schemas.microsoft.com/WebParts/v2/DataView/runtime</a>" xmlns:asp="<a href="http://schemas.microsoft.com/ASPNET/20">http://schemas.microsoft.com/ASPNET/20</a>" xmlns:__designer="<a href="http://schemas.microsoft.com/WebParts/v2/DataView/designer">http://schemas.microsoft.com/WebParts/v2/DataView/designer</a>" xmlns:xsl="<a href="http://www.w3.org/1999/XSL/Transform">http://www.w3.org/1999/XSL/Transform</a>" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
 <xsl:output method="html" indent="no"/>
 <xsl:decimal-format NaN=""/>
      <xsl:param>'</xsl:param>
      <xsl:variable>0</xsl:variable>
      <xsl:template match="/" xmlns:x="<a href="http://www.w3.org/2001/XMLSchema">http://www.w3.org/2001/XMLSchema</a>" xmlns:d="<a href="http://schemas.microsoft.com/sharepoint/dsp">http://schemas.microsoft.com/sharepoint/dsp</a>" xmlns:asp="<a href="http://schemas.microsoft.com/ASPNET/20">http://schemas.microsoft.com/ASPNET/20</a>" xmlns:__designer="<a href="http://schemas.microsoft.com/WebParts/v2/DataView/designer">http://schemas.microsoft.com/WebParts/v2/DataView/designer</a>" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
       <xsl:call-template/>
 </xsl:template>
      <xsl:template>
       <xsl:variable>BulTitl</xsl:variable>
       <xsl:variable select="/dsQueryResponse/Rows/Row" />
       <ul>
        <xsl:call-template>
         <xsl:with-param select="$Rows" />
        </xsl:call-template>
       </ul>
      </xsl:template>
      <xsl:template>
       <xsl:param />
       <xsl:for-each select="$Rows">
        <xsl:call-template />
       </xsl:for-each>
      </xsl:template>
      <xsl:template>
  <li>
   <img border="0" src="{@FileRef}" alt="<a href="mailto:{@Title">{@Title</a>}" />
   <p><a href="mailto:{@Title">{@Title</a>}</p>
  </li></xsl:template>
 </xsl:stylesheet></Xsl>

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

A Better Annoucements Ticker

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.

<div id="actions">
<a class="prev">« Back</a>	<a class="next">More pictures »</a></div>
<div class="scrollable vertical">
    <div class="items">
      <div class="item">
           <img src="#" alt="Thumbnail Image" />
           <h3>Title</h3>
          <strong>
              <span>Subtitle Text</span>
          </strong>
        <p>First 200 Characters of the body</p>
       <p><a href="#">Read more</a></p>
    </div>
   </div>
</div>

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

<Xsl>
<xsl:stylesheet xmlns:x="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">
	<xsl:output method="html" indent="no"/>
	<xsl:decimal-format NaN=""/>
				<xsl:param name="dvt_apos">'</xsl:param>
				<xsl:param name="url_PATH_INFO" />
				<xsl:param name="url_HTTP_HOST" />
	<xsl:param name="Today">CurrentDate</xsl:param>
				<xsl:variable name="dvt_1_automode">0</xsl:variable>
				<xsl:template match="/" xmlns:x="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">
					<xsl:call-template name="dvt_1"/>
	</xsl:template>
				<xsl:template name="dvt_1">
					<xsl:variable name="dvt_StyleName">Table</xsl:variable>
					<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
						<script>
$(function() {
	$(".scrollable").scrollable({ vertical: true, mousewheel: true, circular: true, keyboard: true });
// scrollable has to match the class on the div you use to wrap your items.
});
</script> <div id="actions">
	<a class="prev">« Back</a>
	<a class="next">More pictures »</a>
</div>
		<div class="scrollable vertical">
		<div class="items">
			<xsl:call-template name="dvt_1.body">
				<xsl:with-param name="Rows" select="$Rows"/>
			</xsl:call-template>
			</div>
			</div>
	</xsl:template>
				<xsl:template name="dvt_1.body">
					<xsl:param name="Rows"/>
					<xsl:for-each select="$Rows">
						<xsl:call-template name="dvt_1.rowview"/>
		</xsl:for-each>
	</xsl:template>
		<xsl:template name="dvt_1.rowview">
		<div class="item">
		<xsl:if test="not(normalize-space(@Picture) = '')"><img src="{substring-before(@Picture,',')}" /></xsl:if>
		<h3><xsl:value-of select="@Title"/></h3>

				<strong>
		<xsl:if test="not(normalize-space(@SubTitle) = '')"><span><xsl:value-of select="@SubTitle " disable-output-escaping="yes" /></span></xsl:if>
		</strong>

				<p><xsl:value-of select="substring(@Body,0,200)" disable-output-escaping="yes" /></p>
				<p><a href="http://{$url_HTTP_HOST}/{@FileDirRef}/DispForm.aspx?id={@ID}">Read more</a></p>
		</div>
	</xsl:template>
</xsl:stylesheet></Xsl>

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.

<ParameterBinding Name="url_PATH_INFO" Location="ServerVariable(PATH_INFO)" DefaultValue=""/><ParameterBinding Name="url_HTTP_HOST" Location="ServerVariable(HTTP_HOST)" DefaultValue=""/>

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

<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>
/* css file to style the ticker */
<link rel="stylesheet" type="text/css" href="scroll.css" />

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

 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. 

Read the rest of this entry »

Switch Themes Without a Page Refresh: Part 1

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. 

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.  For this solution there were several requirements.

• 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.

Anything Slider in SharePoint – Update

Several people have asked how to change the under of items displayed in the slider and how to change the sort order.

Item Limit

To change the number of items displayed use the code below.

<Xsl>
<xsl:stylesheet xmlns:x="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">
	<xsl:output method="html" indent="no"/>
	<xsl:decimal-format NaN=""/>
	<xsl:param name="dvt_apos">&apos;</xsl:param>
	<xsl:variable name="dvt_1_automode">0</xsl:variable>
	<xsl:template match="/" xmlns:x="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">
		<xsl:call-template name="dvt_1"/>
	</xsl:template>
	<xsl:template name="dvt_1">
		<xsl:variable name="dvt_StyleName">Table</xsl:variable>
		<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
		<xsl:variable name="RowLimit" select="3" />
		<xsl:variable name="dvt_RowCount" select="count($Rows)" />
		<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />
		   <link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
		<script type="text/javascript" src="js/jquery.easing.1.2.js"></script> <script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"></script> <div class="anythingSlider">
			<div class="wrapper">
		<ul>
			<xsl:call-template name="dvt_1.body">
				<xsl:with-param name="Rows" select="$Rows" />
				<xsl:with-param name="FirstRow" select="1" />
				<xsl:with-param name="LastRow" select="$RowLimit" />
			</xsl:call-template>
		</ul>
		</div>
        </div>
	</xsl:template>
	<xsl:template name="dvt_1.body">
		<xsl:param name="Rows" />
		<xsl:param name="FirstRow" />
		<xsl:param name="LastRow" />
		<xsl:for-each select="$Rows">
			<xsl:variable name="dvt_KeepItemsTogether" select="false()" />
			<xsl:variable name="dvt_HideGroupDetail" select="false()" />
			<xsl:if test="(position() &gt;= $FirstRow and position() &lt;= $LastRow) or $dvt_KeepItemsTogether">
				<xsl:if test="not($dvt_HideGroupDetail)" ddwrt:cf_ignore="1">
					<xsl:call-template name="dvt_1.rowview" />
				</xsl:if>
			</xsl:if>
		</xsl:for-each>
	</xsl:template>
	<xsl:template name="dvt_1.rowview">
		<li>
		<div class="textSlide">
			<h3><a href="/{@FileDirRef}/DispForm.aspx?ID={@ID}" title="{@Title}"><xsl:value-of select="@Title" /></a></h3>
			<xsl:value-of select="@Body" disable-output-escaping="yes" />
		</div>
		</li></xsl:template>
	</xsl:stylesheet>
</Xsl>

On line 13 change the RowLimit to the number of items you would like to show. For example if you wanted to show 6 items you would change line 13 to this

<xsl:variable name="RowLimit" select="6" />

Sort Order

Changing the sort order can be done through SharePoint Designer once you are using the updated code

• Click on the arrow to show the common data view tasks.
• Click on ‘Sort and Group’ the second option.
• Make changes as needed.

If dont want to do it that way there is another  option.

• Open the page in SharePoint Designer
• In code view find this ‘SharePoint:SPDataSource’ you will need to edit this tag.
• Find the SelectCommand and add/edit the OrderBy attibute.
• See the code below for an example. (Ordered by Created Date  in Ascending order). Its basically a CAML query.

<SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="&lt;View&gt;&lt;Query&gt;&lt;OrderBy&gt;&lt;FieldRef Name=&quot;Created_x0020_Date&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;/OrderBy&gt;&lt;/Query&gt;&lt;/View&gt;"

 If you are not sure how to get it all set up look to my previous post on the Anything Slider.  If you have questions please post a comment.

Adding Comments to a List Part 2

So here is what we have done so far from Part 1   

• Create a custom list to hold our comments
• Link the list with an Annoucements list using lookup columns
• Create a page to display a single annoucement and the realted comments from our comments list.

This is what it looks like:   

What we have so far.

 All we need to do now is setup a form on the page to allow users to create new comments on the item they are viewing.   

Read the rest of this entry »

Adding Comments to a List Part 1

What you will need

• Two Lists
• SharePoint Designer
• Basic knowledge of HTML

I’ll assume you already have a list setup on which you want to allow users to comment. For this example I will use a standard Announcements list.

So the first thing we need to do is create a list to hold our comments.  I just used the following columns:

• Title
• Body
• Post  (lookup to main list’s ‘Title’ column)

In the main list you will need to add a column that points back to the comments list.

1. Go to the list settings page and click ‘Create Column’
2. Name the column ‘Comments‘ (the name does not really matter. Set the type to ‘Lookup‘
3. The lookup should get information from the comments list you created.  The column should be set to the lookup column in the comments list.  See the screenshot below. This column will show us the number of comments each item in our list has.  Read the rest of this entry »

Improving #SharePoint Forms – Hints

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:

<script type="text/javascript">
$("input[title='Author']").inputHintBox({
	className:'simple_box',
	html:'Who is the author of this quote?',
	incrementLeft:-25,
	incrementTop:-15
	});
</script>

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

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.