SharePoint News Ticker

SharePoint List Driven News Ticker

by with No Comment General SharePoint

I have written about making a News Ticker before but it looks like the code is not working anymore so why not make something better. News tickers are a great way to show a lot of information in a small space and they look much better than an annoucements web part. For this example I established a few ground rules.

  • Content will be pulled from a custom SharePoint list.
  • When clicked the items will open in a dialog window
  • The ticker will pause on hover and have controls so users can scroll through the news items
Inline Editing for document libraries

Inline editing in a dataview web part.

by with No Comment General SharePointSharePoint Design
inline editing in a DVWP SharePoint 2010

Inline Editing Options in SharePoint Designer

When you create a list view dataview web part in SharePoint 2010 you have the option of enabling inline editing. Once enabled users can edit and create list items without leaving the page. This is nice but by default SharePoint Designer does not style the interface the same way as it is when done in a standard list view. See the example below.

This is not difficult to fix, here is how I did it.

Here is what the standard inline editing interface looks like

default inline editing SharePoint

default inline editing SharePoint
When you use a data view web part it looks like this by default

data view web part inline editing SharePoint
data view web part inline editing SharePoint

Now this interface may look fine to you but I wanted it to look more like the standard interface. To get it looking better requires adding some code to the data view using SharePoint desiger.

SharePoint Featured Content Slider

SharePoint Featured Content Slider for 2010

by with 3 Comments General SharePointSharePoint Design

SharePoint Featured Content Slider

So I rewrote this web part to work a little better in SharePoint 2010. I made a few minor changes and improvements. If you can think of other improvements put them in the comments. Here is the older version.

Whats new

  • Added an order field to the List template to allow more control of the display order. In the list template this field is setup to require unique values.
  • Re-wrote the CSS to include some new CSS3 enhancements. If you are using a newer browser the slider will look better.
  • Tested across muliple browsers. See screenshots below.

#SharePoint Designer Custom Activities Risky?

by with One Comment General SharePoint

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.

A Better Annoucements Ticker

by with 5 Comments General SharePointSharePoint Design

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.
List Columns

Switch Themes Without a Page Refresh: Part 2

by with No Comment General SharePointSharePoint Design

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.

AnythingSlider in SharePoint

Anything Slider in SharePoint – Update

by with No Comment SharePoint Design

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.

<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:output>
	<xsl:decimal-format NaN=""/>
	<xsl:param name="dvt_apos">&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="dvt_StyleName">Table</xsl:variable>
		<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"></xsl:variable>
		<xsl:variable name="RowLimit" select="3"></xsl:variable>
		<xsl:variable name="dvt_RowCount" select="count($Rows)"></xsl:variable>
		<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0"></xsl:variable>
		   <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"></script> <div class="anythingSlider">
			<div class="wrapper">
		<ul>
			<xsl:call-template name="dvt_1.body">
				<xsl:with-param name="Rows" select="$Rows" />
				<xsl:with-param name="FirstRow" select="1" />
				<xsl:with-param name="LastRow" select="$RowLimit" />
			</xsl:call-template>
		</ul>
		</div>
        </div>
	</xsl:template>
	<xsl:template name="dvt_1.body">
		<xsl:param name="Rows"></xsl:param>
		<xsl:param name="FirstRow"></xsl:param>
		<xsl:param name="LastRow"></xsl:param>
		<xsl:for-each select="$Rows">
			<xsl:variable name="dvt_KeepItemsTogether" select="false()"></xsl:variable>
			<xsl:variable name="dvt_HideGroupDetail" select="false()"></xsl:variable>
			<xsl:if test="(position() &gt;= $FirstRow and position() &lt;= $LastRow) or $dvt_KeepItemsTogether">
				</xsl:if><xsl:if test="not($dvt_HideGroupDetail)" ddwrt:cf_ignore="1">
					<xsl:call-template name="dvt_1.rowview" />
				</xsl:if>
			
		</xsl:for-each>
	</xsl:template>
	<xsl:template name="dvt_1.rowview">
		<li>
		<div class="textSlide">
			<h3><a href="/{@FileDirRef}/DispForm.aspx?ID={@ID}" title="{@Title}"><xsl:value-of select="@Title" /></a></h3>
			<xsl:value-of select="@Body" disable-output-escaping="yes" />
		</div>
		</li></xsl:template>
	</xsl:stylesheet>
</xsl>

Displaying document titles as links.

by with 7 Comments General SharePoint

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.