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. Read the rest of this entry »
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.
Read the rest of this entry »
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, UI | 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.
Read the rest of this entry »
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
Read the rest of this entry »
