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 | 2 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 | 1 Comment »
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 | 27 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.
Posted: November 17th, 2009 | Author: davecavins | Filed under: Uncategorized | Tags: Endusersharepoint, jQuery, SharePoint, ticker, webparts | 18 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 »
Posted: November 10th, 2009 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: jQuery, SharePoint, slideshow, web services, webparts | 11 Comments »
This is a very simple image slide show script that uses jQuery, SharePoint webservices and the default images library to show images with captions. All the content is pulled from default fields in the images library but feel free to add more fields and customize the code to fit your needs.
Slide show with captions
Read the rest of this entry »
Recent Comments