Block multi-document uploads in #SharePoint

In SharePoint 2007 when a document library has required columns for metadata or other information the user is prompted to complete the information when a new document is added. However if the user chooses the ‘Upload Multiple Files” option they are not required to populate required columns. After the files are load and a user goes in to edit they will be prompted to fill in the information.

In some cases this may not be an issue but if the library has workflows triggered by column values or views sorted or filtered based on those metadata columns there could be problems. So of course there is use training that can be done to ensure documents are always properly populated with metadata but sometimes that is not enough.

Ricky Deleyos showed me how to with some simple CSS hide the “Upload Multiple Documents” link on Upload.aspx.

.ms-splitbuttondropdown, #ctl00_PlaceHolderMain_ctl01_ctl02_UploadMultipleLink { display: none !important;}

Because Upload.aspx is called from the 12 hive and not from the local site this code needs to be added to your declared CSS and not just referenced using a CEWP or other method. This will hide the link for all libraries on the site using the declared CSS.

There are other ways to solve this problem

• JavaScript method 1
• JavaScript method 2

These methods all require editing the page itself which can be risky or even impossible given your environment. Especially in large environments where user requirements can vary greatly its best not to make changes that will affect everyone. It’s best to implement solutions that can be isolated to impact only the site or area where they are needed.

Some thoughts on #SharePoint Adoption

SharePoint is a powerful tool for collaboration and information sharing. Working on documents, tracking issues, tasks and projects can all be made easier using the tool. In many demos I have seen SharePoint can be used as a complete solution for managing the complete life-cycle of a business process. It all seems so great.

In the real world of actual organizations (at least in my experience) not everyone is willing or interested in using SharePoint. There are ways to integrate external applications with SharePoint that can create very powerful solutions but in some cases the issues is more than just connecting to other data sources. There are cases where you just need to pull information out of SharePoint for a report to management or for a meeting where you will not have access to your SharePoint site. Read the rest of this entry »

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

#SharePoint Designer Custom Activities Risky?

SPD Custom Activities are an add-on many people use because they add new custom activities and conditions that can be used in SharePoint Design workflows. SPD Custom Activities give designers the ability to create more complex and powerful workflows without having to know code or use Visual Studio for development.  Check out a list of the activities and descriptions here.

These activities have many benefits for users including:

• Make the automation of business processes easier
• Easier to build complex applications without the help of a (costly) developer.
• More power in the hands of the user
• Can quickly prototype, test and deliver applications
• Easier to manage and make changes to applications in production

On the other hand I feel it is important to consider the SPD Custom Activities from a governance and management standpoint.  If you are responsible for managing and supporting the SharePoint environment its important to consider not only how these types of solutions will help the user but how will they affect the stability of your environment?

I will discuss a few of the main risks I discovered while researching SPD Custom Activities along with Gabe Hilado of Zenpo Software.

Read the rest of this entry »

#BCP2010 Part 1

I meant to post this last week during the conference but I was too busy or too tired to do so.

So the conference started off with an hour long keynote presentation that began with short a welcome from Bill English from Mindsharp. The welcome was follow by an hour long advertisement for Microsoft’s SharePoint MCM program. Various MCM’s came up and talked about how great the program is and how much smarter they are as a result of attending it.

Overall this session was somewhat interesting but for the most part I don’t feel that it really applied to most of the audience of the conference. There are only 24 slots available for the MCM course each quarter and the training is rather expensive ($30k). Needless to say I would not have felt bad if I had come late.

The rest of the day I attended sessions by various presenters mainly focused on the new features in SharePoint 2010. I wish there had been more sessions focused on MOSS 2007 or just general best practices because although the presentations were interesting I know it will be quite some time before I will get to use SP2010 at work.
This was my first conference and it felt good to be able to learn so much from others and talk to people who are working with the same tools. I was glad to see such a diverse group of people including developers, administrators, project managers and other users.

You can read more discussion about #BPC2010 here.

I’ll write more later but right now it’s time to get back to work.

My first #SharePoint Conference #BPC2010

So I am at the Best Practices Conference here in Reston VA. I am going to try to post about what I learn and some of my opinions on the conference as a whole.  This is my first time attending a SharePoint Conference so it should be interesting.   I hope to learn a lot about both 2007 and 2010.

Most best practices information I have read before has been pretty good but because of the many uses ad types of SharePoint deployments it seems to be very difficult to establish many best practices that will always be true no matter the size or type of your deployment.

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 »

Improving #SharePoint Forms – Watermarks

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.

• Improving #SharePoint Forms – Hints
• Improving #SharePoint Forms – Character Count

Watermarks

Prerequisites

• jQuery Library referenced in the page
• CEWP on the page

Read the rest of this entry »

Switch List Displays with JQuery and CSS

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 »