Dave Cavins » SharePoint Designer

#SharePoint Designer Custom Activities Risky?

davecavins — Fri, 04 Mar 2011 20:21:48 +0000

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.

Access

In order to use the custom activities you need SharePoint Designer installed on your workstation and you need at least site owner permissions. Because SharePoint designer is now free any user can get it installed and with the right permissions begin building workflows. With the custom activities it is easier to build more complex workflows. Simple mistakes in the workflow could potentially lead to performance issues (I’ll explain later). It may be best to establish some sort of training for users before they are given access to SharePoint Designer to ensure they have some understanding of workflow best practices. This point applies if you have SPD Custom Activities installed or not even the OOTB workflows can create issues.

Proper Development Practices

Developing workflows in SharePoint Designer is relatively easy and does not require the creator to follow any specific process. Users can easily setup a mission critical application in SharePoint within a few days or weeks. This can make it difficult to support your SharePoint users, here is why. When users can develop complex applications without following SDLC best practices (dev – test – production) it’s easy to have problems in your SharePoint environment without even knowing about them. Additionally as the system owner you may not even know about these applications and their support requirements. When something breaks or the developer leaves how can you support/repair something that was not properly documented or tested. As mentioned earlier these issues are not all specific to SPD custom activities but because of its power can have a larger impact.

Potentially Broad Impact

Workflows are used to automate processes involving large number of items, for processes. If the process only involved a few items users would do it manually through the interface. Poorly-designed automated workflows have the potential to affect large number of items very quickly. SPD Custom Activities adds the ability for these workflows to not only edit permission but also trigger other workflows. When one workflow can start another workflow it’s easy to create a loop that could affect many items very quickly and be hard to troubleshoot as an outsider.

Performance

SharePoint can experience performance degradation with a large number of unique security scopes in lists
Link: http://support.microsoft.com/kb/2420771

According to article

“When more than 1,000 security scopes are created for folders or documents in a list, there’s a significant performance degradation in SharePoint operations that badly affects end users operations(rendering content) as well as SharePoint activities like indexing SharePoint Content. After the number of unique security scopes exceeds1,000 per list, SharePoint uses a code path that requires additional SQL round trips to analyze the scopes before rendering a view. When there are 1000 or fewer scopes, only one round trip is required.”

This mainly related to the permissions related activities in SPD Custom Activities. Its true that a user could run into the same problem by manually breaking permissions on many items through the interface however this is unlikely to happen. If a workflow is built improperly and leaves permissions disinherited the process becomes automated. Automating a bad practice is probably not a good idea.

Conclusion

By no means is this post meant to say that SPD custom activities are bad or should not be used. I think they are very useful and can be very helpful when used properly. It’s important to plan ahead and ensure the proper governance is in place to prevent issues like those mentioned above. If you don’t the time or resources to put some sort of governance in place to protect your farm it may be best to do custom workflow development in Visual Studio where it can be properly tested and packaged.

Useful Resources

Custom Activities in 2010

A Better Annoucements Ticker

davecavins — Wed, 04 Aug 2010 21:08:14 +0000

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.


« Back	More pictures »

    
      
           
           Title
          
              Subtitle Text
          
        First 200 Characters of the body
       Read more

Below is the xsl code I used to build the ticker.




	
	
				'
				
				
	CurrentDate
				0
				
					
	
				
					Table
					
						 
	« Back
	More pictures »

		
		
			
				
			
			
			
	
				
					
					
						
		
	
		
		
		
		

				
		
		

				
				Read more

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.

In addition to this code you will also need to add links to these two files.


/* css file to style the ticker */

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

davecavins — Mon, 14 Jun 2010 14:50:09 +0000

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.

Edit the Masterpage

Here is the code I added to the masterpage. This can be styled to look however you want and can be added anywhere in the page that makes sense.


	Reset CSS
	Verdant
	Belltown
	Petal

In addition to this we also need to add a link to our css file to the master page. I put it at the end of the head section.

I added a class to the link so that we can use jQuery to target only that css link and change it to match the theme the user selects. Initially I left the href value blank but if you want to apply some default styles you would just add the link to the css file there.

Use jQuery to Swap the CSS

So here is the code I used to swap the stylesheet. The main thing I changed is on lines 7 and 12. I changed the selector so it will only target tags with a class of ‘altStyle’. This allows us to swap themes without breaking the link to core.css.

Resources

You will need jQuery either locally or linked from Google. Just update the link on line 1 as needed.
In the code above you will notice a link to cookie.js, this is the jQjuery cookie plugin that you will need in order to save users’ theme selections. In the code above on line 13 you will see where I create a cookie named css. For testing purposes you can uncomment line 10 to see what the cookie value is on page load. You can download the plugin from here. jQuery Cookie Plugin
You can see the original code I started from in this script from CSS Newbie

Conclusion

While this is a very simple solution it is a quick way to add in some fuctionality that many users want without alot of custom code or requiring the user to navigate to multiple pages. Users like to feel that they have some control over the site (even if its just changing the color). Feel free to post any questions or comments.

Anything Slider in SharePoint – Update

davecavins — Fri, 23 Apr 2010 17:49:05 +0000

Several people have asked how to change the under of items displayed in the slider and how to change the sort order.

Item Limit

To change the number of items displayed use the code below.



	
	
	'
	0
	
		
	
	
		Table

On line 13 change the RowLimit to the number of items you would like to show. For example if you wanted to show 6 items you would change line 13 to this

Sort Order

Changing the sort order can be done through SharePoint Designer once you are using the updated code

Click on the arrow to show the common data view tasks.
Click on ‘Sort and Group’ the second option.
Make changes as needed.

If dont want to do it that way there is another option.

Open the page in SharePoint Designer
In code view find this ‘SharePoint:SPDataSource’ you will need to edit this tag.
Find the SelectCommand and add/edit the OrderBy attibute.
See the code below for an example. (Ordered by Created Date in Ascending order). Its basically a CAML query.


 If you are not sure how to get it all set up look to my previous post on the Anything Slider.  If you have questions please post a comment.


Related posts:
Zoomable Photo Grid
CSS-Tricks AnythingSlider in SharePoint
A Better Annoucements Ticker

Displaying document titles as links.

davecavins — Tue, 29 Dec 2009 16:23:33 +0000

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.

My Solution

I added two new columns to the Document Library.

“DocSrc” – a plain text column to hold the path to the document.
“Title Link” – a calculated column to create the link (I will explain this later).

First we need make sure our documents have titles.

Here is how to add Titles to a document in Word 2007:
Click on the ‘orb’ and choose “Prepare” > “Properties”

In the pane that opens you can enter in a title and other Meta data.

Now if a user uploads a document without a title we need to let them know and ask them to add a title.

Next I created a simple SharePoint Designer workflow, here is how.
Create a new workflow in SharePoint Designer and give it a name. On the first screen I checked these two boxes:

Allow the workflow to be started manually.

This is because we want the workflow to run for new items but just in case some items have already been loaded in the library we need to be able to run the workflow on them as well. In step 1 of the workflow I check to see if the “Title” field is empty, if it is not I copy the value from the “URL Path” field into my “DocSrc” field. I also added a condition so that if there is nothing in the “Title” field the workflow will email the user and ask them to add a title. In the body of the email I provide a link to the document. That’s all we need for the workflow.

Building the link

So now we have the title of the document and the URL of the document we can build our link in the “Title Link” column. We need to create a formula in the “Title Link” column that will create a link to our document and use the title as the displayed text.
In the “Title Link” column we just need to put the following text:

=CONCATENATE("",[Title],"")

Next we just need to make the html code display properly using this script from Path to SharePoint.

Now users can see meaningful titles for thier documents without having to decifer complex document names and they will still have access to see the document name with the dropdown menu.

When it comes to document management and getting new SharePoint users on board things like this are important in helping them feel more comfortable. If you dont take steps to make the system suit the users needs they are more likely to just use SharePoint as a new shared drive and just dump all their documents into a library that never get used.

Has anyone else dealt with this type issue? What was your solution?

Styling SharePoint Blog Comments: Part 2

davecavins — Fri, 16 Oct 2009 14:00:45 +0000

As promised I went ahead and styled the comment form on a standard SharePoint blog. I wanted to make it look better than this but there are some limitations because of the way the page is coded with so many nested tables.

Better looking comment form

I kept the styles pretty simple but this should be a good starting point for someone wanting to do something more complex.

This code includes the code from part 1 with some minor changes. The new styles for the comment form are commented.

Note: To be sure this code does not affect the styling of other forms on the page and other web parts it would be best to open the page in SharePoint Designer and wrap the web part in a div some the styles can be targeted to affect only items inside the div.

Styling SharePoint Blog Comments

davecavins — Fri, 09 Oct 2009 20:36:19 +0000

Out of the box the comments on SharePoint blogs dont look that good.

Standard SharePoint blog comments

Here is a way to fix that problem. Just add this CSS to the page and things should start looking alot better.

&lt;style type=&quot;text/css&quot;&gt;
/* wraps the title of each comment */
.ms-commenttable {border:0px;}
/* the title of each comment */
h4.ms-CommentTitle{font-size:x-small;border:0px;}
/* wraps the body of each comment */
div.ms-CommentBody {
	background:url('../../images/comm_top.gif') top 0px no-repeat;
	margin-bottom:12px;
	padding:18px 0 0 0;
}
/* wraps the text of each comment */
div.ms-CommentBody div {
	border:1px solid #ccc;
	border-top:0px;
	padding:15px;
	line-height:18px;
	}
/* wraps the meta info (author, date, etc.)	for each comment */
.ms-CommentFooter {
	background:url('/_layouts/images/square.gif') 5px 50% no-repeat;
	padding:3px;
	margin:0px;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
}
.ms-CommentFooter span {padding-left:18px;}

/* wraps all comments */
.ms-commentsWrapper {
	background:#fff;
	margin:5px;
	border:0px;
}
/* header style for 'Comments' and 'Add a Comment' */
h3.ms-CommentHeader{
	padding-left:35px;
	background:url('/_layouts/images/menunewdiscussion.gif') top left no-repeat
}
&lt;/style&gt;

Without editing the code of the page there are some limitations on what can be done. I did not make too many drastic changes but this code should be a good starting point for making your ShaerPoint blogs look better.

Better looking comments

Here is the image I used in the CSS (right click save as). The other two images are referenced from the 12 hive and should work automatically on any WSS or MOSS installation.

In a future post I will try to do something about the comment form.

Dynamic Drive’s Featured Content Slider in Sharepoint

davecavins — Tue, 12 May 2009 18:39:56 +0000

I have used Dynamic Drive’s Featured Content Slider on a couple of recent projects and wanted to see if I could get it working in SharePoint. There were several key requirements:

User can easily add items
Users can choose a style for each item
Expired Items must not show
Each item will have a Title, Body and a customizable “read more” link.

Here’s how I did it.

First I created a custom list to store the slider items. These are the columns I used:

Title – Single Line of text
Body – Multiple Lines of text
Link URL – HyperLink
Expiration – Date and Time (expired items will not be shown)
Image – Picture
Style – Choice (we will use this column to allow users to choose the style of each item)

On the page I used a DataView WebPart to display the Title, Body, Image and Link URL columns. Using Sharepoint Designer I setup filtering on the expiration date. To do this in design view right click on the data view webpart and bring up the “Common Data View Tasks ” box and choose Filter. In the window I set the conditional statement so that items would only be shown if the expiration date was greater than today.

You can find a basic tutorial on using the DVWP here

Once we have the data we want showing on the page we need to get it into the right format. For the Content Slider to work properly the page needs to refernce an external JavaScript file and a CSS style sheet. Additionally the Slider itself has to follow this pattern:


Content 1 Here.

Basically the whole content slider has do be wrapped in a div with an ID of ‘slider1′ each of the items must be wrapped in a div with the class ‘contentdiv’. For more explanation on this visit Dynamic Drive

SharePoint uses xsl to style the data view so we have to go into the code view and add the nessecary Javascript, CSS and div elements to make everything work. Here is the xsl I used to get everything working in the page



	
	
	'
	CurrentDate
	0
	
		
	
	
		Table
		
		
			
				
			
		
		

 
	
		
		
			
		
	
	
		
		
		
	
	
	...

For information on how to write xsl stylesheets read this post on Heather Solomon’s site. Basically using tags like this:
allows you to insert various peices of data from the list. In the xsl above I am wrapping each item with the nessacary div to make the slider work. Inside each div I am inserting the title inside an h1 tag, the first 330 characters of the body in an a p tag, and the Link URL formatted as a Hyperlink.

To make everything look good I had to customize the CSS that comes from Dynamic Drive. The code is below.

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 0px;
width: 100%; /*width of featured content slider*/
height: 231px;
}
.sliderwrapper .contentdiv{
visibility:hidden; /*leave as is*/
position:absolute; /*leave as is*/
left:0;  /*leave as is*/
top:0;  /*leave as is*/
padding: 0px;
background:#fff;
width:100%;
/*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height:100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity:1;
opacity:1;
color:#fff;
font-size:x-small;
}
.contentdiv img{
height:205px;
width:270px;
margin:10px;
border:1px solid #ccc;
}
.contentdiv h1{
color:#eee;
font:normal normal large Georgia;
margin:0px;
padding:5px 0 0 0;
line-height:20px
}
.contentdiv a:hover, .contentdiv a{
text-decoration:none !important;
padding:0px;
}
.contentdiv p{
line-height:19px;
padding:0px 10px 0px 10px;
}
a.readMoreLink {
color:#555;
padding:4px;
background-color:#fff;
}
a.readMoreLink:hover {
color:#555;
text-decoration:none;
padding:4px;
background:#fff url('link_bg.gif') repeat-x bottom center;
}
.pagination{
width: 100%;
/*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
padding: 3px 1px;
font-size:x-small;
background:#fff url('link_bg.gif') repeat-x bottom center;
border-top:1px solid #ccc;
}
.pagination a{
padding: 0 4px;
text-decoration: none;
color: #666;
background:#fff;
}
.pagination a.selected{
color: #fff;
background-color: #666;
}
.pagination a:hover{
color:#fff;
background:#666;
text-decoration:none;
}

In the XSL stylesheet each item is wrapped in a div, the class name for the div is pulled from the ‘Style’ column in the list. The make the styles work I added the following CSS to my stylesheet

.Red_Style{
height:230px;
background:#671818 url('red_bg.gif') repeat-x top center;
}
.Blue_Style{
height:230px;
background:#3A5E97 url('blue_bg.gif') repeat-x top center;
}
.Green_Style{
height:230px;
background:#4E8822 url('green_bg.gif') repeat-x top center;
}

All I am doing is changing the background image and color for each style. Because the div wraps each item it would be possible to also change font colors, font size, image position and more but I just wanted to keep it simple.

The only drawback with using the dataview webpart is that this webpart cannot be easily moved from one site to another.

Adding Suggestions to the Sharepoint search box

davecavins — Sun, 26 Apr 2009 20:10:41 +0000

I got the idea for this from here: http://cssglobe.com/lab/searchfield/. The idea is that by giving users suggestions of what they should be searching for they can be guided to the most important information. When I am searching for something many times I am unsure what what search terms will give me the best results.

To get started we will need a search box to work with. The out of the box search box could work but I prefer to use the one mentioned here by Kyle Schaeffer because it gives me a lot more flexibility with the design.

Adding a Search Box to the page

To get the search box on your page :

Add this register tag at the top of the page layout or masterpage :

<%@ Register Tagprefix="SPSWC"
Namespace="Microsoft.SharePoint.Portal.WebControls"
Assembly="Microsoft.SharePoint.Portal, Version=12.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

If needed hide the existing search box (I left mine, and it still works fine).
Put this code where you want the search box to show up:
```
 
```
Save the page.

Javascript

Ok now comes the integration part. In the JavaScript code searchfield.js you must insert the ID of the search input field.

var id = "searchfield"

In ASP.NET control IDs change when the page is rendered so the best way to do this is to view the source of the page or use FireBug to get the id. It will be something long like “ctl00_PlaceHolderMain_searchbox2_SFF4064A0_InputKeywords”

Now save the JS file and test the page.

If it does not work make sure you have referenced your javascript properly.

If you are doing this in a page layout the script link should go inside the AdditionalPageHead content place holder.
If you are putting this in a masterpage you can either refernece the script in the section or just above the closing tag.

Search Suggestions

Watch out

This script includes code that will clear the contents of the search box on the first focus so you don’t need to use the “QueryPromptString” tag on your search box because it wont work.

This is what mine came out looking like with a little CSS code. Also to get the “Go” image to show up I just set the “GoImageUrl” attribute.

Conclusion

This is a very simple solution and can help enhance the user experience but it is not as integrated with SharePoint as I would like. Ideally the suggestions would be read in from a list stored somewhere on the site.