Posted: March 10th, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: CSS, Printing | No Comments »
Hides everything except the list and the breadcrumbs. More posts coming later this week.
*{ background-image:none; /* remove all background images */ }
.ms-sbcell, /* search box at top of page */
.ms-topnavContainer, /*horizontal nav container */
img, /*images */
.ms-globalbreadcrumb, /*breadcrumbs */
.ms-titleareaframe, /* page image */
.ms-siteactionsmenu, /*site actions menu */
.ms-pagemargin, /* left margin beside quick launch*/
.ms-quickLaunch, /* quick launch menu */
.ms-sitetitle, /* name name */
.ms-menutoolbar, /* list tool bar */
.ms-pagetitle /* page title */
{ display:none; visibility:hidden; /*width:0px; height:0px;*/
}
.ms-pagetitleareaframe table {
position:absolute; top:1px;
width:600px;
background-image:none;
}
.ms-bodyareaframe { /*remove border around main content*/
border:0px;}
Posted: February 2nd, 2010 | Author: davecavins | Filed under: General SharePoint | Tags: better forms, forms, jQuery, SharePoint | 1 Comment »
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 | No 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 29th, 2009 | Author: davecavins | Filed under: General SharePoint | Tags: Document Library, SharePoint, SharePoint Designer, Workflow | No Comments »
On a recent project I had to migrate a large number of documents from a legacy system into SharePoint. In the old system users to choose what text would be displayed as the link. In most cases users chose not to use the actual file name as the link text.
The Problem
In SharePoint users don’t have as much control of what gets displayed. There is a ‘Title’ field but it can’t be used in a calculated column and on the standard document library it is not a required field.
Technically the file name could be used but this could lead to very long file names with spaces and special characters that could cause problems by forcing the page to scroll as well as creating some REALLY long URLs.
Depending on the type of document the actual file name may be irrelevant to the use while the title would be more helpful. For instance a in document library of meeting minutes the file names could just be the date of the meeting for example (12_03_2009.docx). The document title could be used to contain not only the date but other relevant information about the meeting like who attended or important issues that were discussed. Additionally the title field can support special characters and spaces that could be a problem in file names.
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
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 10th, 2009 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: jQuery, SharePoint, slideshow, web services, webparts | 7 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 »
Posted: November 2nd, 2009 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: forms, jQuery, SharePoint, textarea | 5 Comments »
So one of the things that I have had end users complain to me about is the size of the text boxes on the new and edit forms of lists like the contacts list and announcement list. On a recent non-SharePoint project I used a jQuery plugin to create a resizable text area so I tried to implement it in SharePoint. Here is what happened.
I downloaded the Textarea Resize JavaScript jQuery plugin, saved in a SharePoint library along with the latest version of jQuery.
Selecting the Element
In order for the jQuery code to work it has to know which elements on the page you want to work with.
Here is the code SharePoint renders for a text box:
<textarea name="ctl00$m$g_3fa2cde8_0ea8_4421_814f_6a6d292fbe54$ctl00
$ctl04$ctl0ctl00$TextField"
rows="15"
cols="20" id="ctl00_m_g_3fa2cde8_0ea8_4421_ctl00_TextField" title="Body"
class="ms-long" dir="none"></textarea>
There are two problems:
- ASP.NET creates very long and hard to use IDs
- The class ms-long culd apply to other elements on the page that I dont want to use the effect on.
Read the rest of this entry »
Posted: October 28th, 2009 | Author: davecavins | Filed under: General SharePoint, SharePoint Design | Tags: jQuery, search, SharePoint, suggestions | No Comments »
In Part 1 of this post we used a simple javascript to display suggestions on a custom search box. After I wrote that post I was thinking it would make more sense to read the suggestions from a list instead of a JavaScript file. This post will explain how to setup the list and edit the JavaScript to read the suggestions from a list. The idea is that an administrator could manage the list and help guide users toward specific information instead of getting numerous un-related results like in those commercials for bing.
Assuming you already have the search box setup as described in Part one of this post all you will need to do is change the javascript and add some code to the page.
Setup
- Do everything from the first post
- Add a link to jQuery somewhere on the page.
- Create a custom list called ‘Suggestions’. It just needs to have the default title field. Create at least one item in the list and in the title enter several comma separated words.
- Add the code below to the page.
<script type="text/javascript” src=“http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”></script>
<script type="text/javascript">
function GetItemsFromSP() {
var soapEnv =
“<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>Suggestions</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>”;
$.ajax({
url: “_vti_bin/lists.asmx”,
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processResult,
contentType: “text/xml; charset=\”utf-8\”“,
async: false
});
}
function processResult(xData, status) {
$(xData.responseXML).find(“z\\:row”).each(function() {
$(“#data”).append(“” + $(this).attr(“ows_Title”) + “,”);
});
}
</script>
<script type=“text/javascript” src=“Resources/searchfield.js”></script>
<div style=“display:none; visibility:hidden” id=“data”></div>
The code above get the items from the Suggestions list, seperates them with commas and puts them in a hidden div with an ID of data. Now we just need to edit the searchfield script to read in the information from our hidden div. To do this edit searchfield.js line 26 to call the GetItemsFromSP function and set the suggestionText variable to be equal to the contents of our hidden div. Here is the code.
/**/*/*/*/**/
GetItemsFromSP();
var suggestionText = $(“#data”).html();
Test the page and make sure it works by typing the first few letters of one of the words in you list item.
Conclusion
This is very similar to Jan Tielens’ SharePoint Search-as-You-Type with jQuery solution but I wanted the search box to still be usable even if there are no suggestions. In Jan’s solution the ’search box’ does not actually do anything when the magnifying glass is clicked. There are likely better ways to do this and if you know of one please post a comment.
Recent Comments