Posted: August 22nd, 2011 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: jQuery, search, SharePoint | No Comments »
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
Posted: November 23rd, 2010 | Author: davecavins | Filed under: SharePoint Design | Tags: jQuery, photo grid, SharePoint | 3 Comments »
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
Posted: May 3rd, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: better forms, forms, jQuery, SharePoint | 2 Comments »
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
Read the rest of this entry »
Posted: April 21st, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: CSS, design, jQuery, SharePoint | 5 Comments »
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
Read the rest of this entry »
Posted: February 2nd, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: better forms, forms, jQuery, SharePoint | 4 Comments »
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
Read the rest of this entry »
Posted: January 25th, 2010 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: better forms, CSS, forms, jQuery, SharePoint | No Comments »
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.
Posted: January 20th, 2010 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: captify, Data View Web Part, jQuery, slideshow | 1 Comment »
Nothing makes a site look good like nice images. Using a large header graphic on you Sharepoint site can help direct users to some important information or announcement. Many non-SharePoint images use this technique to add interest to their site and attract visitors. Doing something like this in SharePoint will make your site a lot less ‘SharePointy’ (my made up word for sites that look like SharePoint). Here is how I did it.
Rotating images with captions
Read the rest of this entry »
Posted: January 6th, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: CSS, icon, JavaScript, jQuery, SharePoint, user | 2 Comments »
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.
<nobr><span><A HREF="/sites/site/_layouts/userdisp.aspx?ID=2">Cavins, David R</A><img border="0" height="1" width="3" src="/_layouts/images/blank.gif"/><a href='javascript:' onclick='IMNImageOnClick();return false;' class='ms-imnlink'><img name='imnmark' title='' border='0' height='12' width='12' src='/_layouts/images/blank.gif' alt='No presence information' sip='email@email.com' id='imn_8,type=sip'/></a></span></nobr>
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”
<span class=”person”>
<xsl:value-of select="@Author" />
</span>
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');
Posted: December 7th, 2009 | Author: davecavins | Filed under: SharePoint Design, Web Design | Tags: CSS-Tricks, Data View Web Part, jQuery, SharePoint, xsl | 45 Comments »
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 <xsl> tag. It should be right after the closing <DatasSources> 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.
<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: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="Rows" select="/dsQueryResponse/Rows/Row" />
<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">
function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo",
autoPlay: true,
delay: 3000,
startStopped: false,
animationTime: 600,
hashTags: true,
buildNavigation: true,
pauseOnHover: true,
startText: "Go",
stopText: "Stop",
navigationFormatter: formatText
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});
</script>
<div class="anythingSlider">
<div class="wrapper">
<ul>
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows" />
</xsl:call-template>
</ul>
</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">
<li>
<div class="textSlide">
<!-- display the item title and a link to the item -->
<h3><a href="/{@FileDirRef}/DispForm.aspx?ID={@ID}" title="{@Title}"><xsl:value-of select="@Title" /></a></h3>
<!-- display the body of the item -->
<xsl:value-of select="@Body" disable-output-escaping="yes" />
</div>
</li></xsl:template>
</xsl:stylesheet>
</Xsl>
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.
Posted: December 4th, 2009 | Author: davecavins | Filed under: General SharePoint | Tags: jQuery, pre-populate, SharePoint | No Comments »
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.
<script type="text/javascript">
var user = "dcavins"
$(document).ready(function() {
$('div.ms-inputuserfield').text(user);
});
</script>
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.
Recent Comments