SharePoint Announcements View with Ellipses if Body is over 50 Words

Requirements:


  1. Truncate the Body of the announcement if over a certain word count.
  2. Restyle the announcement to look modern.
  3. Create a link if the Body is truncated so the user can view the full Body.
  4. Have this link open a popup window with only the Title and Body shown, with scrollbars.
  5. Create a close button on the page to close the window.

Execution:



  1. Add a data view of the announcements list to the page.
  2. Filter View: Expires >= [Current Date]
  3. Add Links to Stylesheets saved in the global library (Before xsl:output):
    1. <xsl:import href="/Style Library/XSL Style Sheets/StripHTML.xsl"/>
    2. <xsl:import href="/Style Library/XSL Style Sheets/FirstNWords.xsl"/>
    3. (these can be downloaded here: http://spxslt.codeplex.com/)
  4. Add variable in main stylesheet:
    1. <xsl:variable name="WebUrl" select="@FileDirRef"/>
  5. Call this stylesheet in rowview template inside the <td></td> section.
    1. <xsl:call-template name="EventDisplay"></xsl:call-template>
    2. See template, and styling below...

EventDisplay Template:

<xsl:template name="EventDisplay" match="Row[@Style='EventDisplay']" mode="itemstyle">
<xsl:variable name="BodyText">
<xsl:call-template name="StripHTML">
<xsl:with-param name="HTMLText" select="@Body"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name="myDateTime" select="ddwrt:FormatDateTime(string(@Modified) ,1033, 'MMMM dd')" />
<xsl:variable name="month" select="substring-before($myDateTime, ' ')" />
<xsl:variable name="day"   select="substring-after($myDateTime, ' ')" />
<xsl:variable name="x"   select="normalize-space($BodyText)" />
<xsl:variable name="y"   select="translate($BodyText, ' ', '')" />
<xsl:variable name="WordCount" select="string-length($x) - string-length($y) +1"/>
<table width="100%">
<tr>
<td class="CalLeft">
<span class="CalMonth"><xsl:value-of select="$month" /></span>
<span class="CalDay"><xsl:value-of select="$day" /></span>
</td>
<td class="CalRight CalDescriptionCell">
<span class="CalTitle"><xsl:value-of select="@Title" /></span>
<span class="CalDescriptionText">
<xsl:choose>
<xsl:when test="$WordCount &gt; 50">
<xsl:call-template name="FirstNWords">
<xsl:with-param name="TextData" select="$BodyText"/>
<xsl:with-param name="WordCount" select="50"/>
<xsl:with-param name="MoreText" select="'...'"/>
</xsl:call-template>
<a class="ButtonHover" style="font-family:Calibri;font-size:12px;">
<xsl:attribute name="href">#</xsl:attribute>
<xsl:attribute name="onclick">javascript:window.open('<xsl:value-of select="$WebUrl"/>/lists/announce/body.aspx?ID=<xsl:value-of disable-output-escaping="yes" select="@ID"/>','PopupComment','status=0,toolbar=0,scrollbars=1,width=600,height=800')</xsl:attribute>
Click Here to View More
</a>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@Body" disable-output-escaping="yes"/>
</xsl:otherwise>
</xsl:choose>
</span>
</td>
</tr>
</table>
</xsl:template>

EventDisplay CSS Styling

.CalLeft {
text-align: center;
vertical-align:top;
width:100px;
}
.CalRight {
vertical-align: top;
}
.CalMonth {
text-transform: uppercase;
background: #71cdf4;
color: #fff;
padding: 3px 0 3px 0px;
width: 90px;
display: block;
font-size: 12px;
}
.CalDay {
font-size: 40px;
width: 72px;
display: block;
line-height: 50px;
text-align: right;
}
.CalTitle {
color: #0775aa;
display: block;
padding: 5px 2px 0px 2px;
font: normal normal normal 15px calibri;
}
.CalDescriptionCell {
vertical-align: top;
padding-top: 0px;
}
.CalDescriptionText {
font-size: 11px;
}
.CalEmptyText {
font-size: 13px;
}
.ButtonHover {
cursor: help;
}

Body.aspx Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<%@ Page Language="C#" inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register tagprefix="WebPartPages" namespace="Microsoft.SharePoint.WebPartPages" assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta name="ProgId" content="SharePoint.WebPartPage.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Announcement</title>
<SharePoint:CssLink runat="server"></SharePoint:CssLink>
<SharePoint:ScriptLink runat="server" language="javascript" name="core.js">
</SharePoint:ScriptLink>
</head>

<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager"></asp:ScriptManager>



<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="8" Title="Announcements (1)" PageType="PAGE_DISPLAYFORM" ListName="{5ACEDF1A-B8A7-4E85-B518-FFD19ACAB959}" Default="FALSE" DisplayName="Announcements" __markuptype="vsattributemarkup" __WebPartId="{5B3DD047-F2B3-4125-A780-FF75788FE89C}" id="g_5b3dd047_f2b3_4125_a780_ff75788fe89c" __AllowXSLTEditing="true" WebPart="true" Height="" Width="">
<DataSources>
<SharePoint:SPDataSource runat="server" DataSourceMode="ListItem" UseInternalName="true" UseServerDataFormat="True" selectcommand="&lt;View&gt;&lt;Query&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=&quot;ContentType&quot;/&gt;&lt;Value Type=&quot;Text&quot;&gt;Announcement&lt;/Value&gt;&lt;/Eq&gt;&lt;/Where&gt;&lt;/Query&gt;&lt;/View&gt;" id="Announcements1"><SelectParameters><WebPartPages:DataFormParameter Name="ListItemId" ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0"/><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{5ACEDF1A-B8A7-4E85-B518-FFD19ACAB959}"/><WebPartPages:DataFormParameter Name="MaximumRows" ParameterKey="MaximumRows" PropertyName="ParameterValues" DefaultValue="10"/></SelectParameters><DeleteParameters><WebPartPages:DataFormParameter Name="ListItemId" ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0"/><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{5ACEDF1A-B8A7-4E85-B518-FFD19ACAB959}"/></DeleteParameters><InsertParameters><WebPartPages:DataFormParameter Name="ListItemId" ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0"/><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{5ACEDF1A-B8A7-4E85-B518-FFD19ACAB959}"/></InsertParameters><UpdateParameters><WebPartPages:DataFormParameter Name="ListItemId" ParameterKey="ListItemId" PropertyName="ParameterValues" DefaultValue="0"/><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="{5ACEDF1A-B8A7-4E85-B518-FFD19ACAB959}"/></UpdateParameters></SharePoint:SPDataSource>
</DataSources>
<ParameterBindings>
<ParameterBinding Name="ListItemId" Location="QueryString(ID)" DefaultValue="0"/>
<ParameterBinding Name="ListID" Location="None" DefaultValue="{5ACEDF1A-B8A7-4E85-B518-FFD19ACAB959}"/>
<ParameterBinding Name="MaximumRows" Location="None" DefaultValue="10"/>
<ParameterBinding Name="dvt_apos" Location="Postback;Connection"/>
<ParameterBinding Name="ManualRefresh" Location="WPProperty[ManualRefresh]"/>
<ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
<ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/>
</ParameterBindings>
<datafields>@ID,ID;@ContentType,Content Type;@Title,Title;@Modified,Modified;@Created,Created;@Author,Created By;@Editor,Modified By;@_UIVersionString,Version;@Attachments,Attachments;@File_x0020_Type,File Type;@FileLeafRef,Name (for use in forms);@FileDirRef,Path;@FSObjType,Item Type;@_HasCopyDestinations,Has Copy Destinations;@_CopySource,Copy Source;@ContentTypeId,Content Type ID;@_ModerationStatus,Approval Status;@_UIVersion,UI Version;@Created_x0020_Date,Created;@FileRef,URL Path;@ItemChildCount,Item Child Count;@FolderChildCount,Folder Child Count;@Body,Body;@Expires,Expires;</datafields>
<XSL>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:dsp="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="ManualRefresh"></xsl:param>
<xsl:variable name="dvt_1_automode">0</xsl:variable>
<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:dsp="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:choose>
<xsl:when test="($ManualRefresh = 'True')">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<xsl:call-template name="dvt_1"/>
</td>
<td width="1%" class="ms-vb" valign="top">
<img src="/_layouts/images/staticrefresh.gif" id="ManualRefresh" border="0" onclick="javascript: {ddwrt:GenFireServerEvent('__cancel')}" alt="Click here to refresh the dataview."/>
</td>
</tr>
</table>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="dvt_1"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">ListForm</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
<xsl:variable name="dvt_RowCount" select="count($Rows)"/>
<xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0"/>
<table border="0" width="100%">
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows"/>
</xsl:call-template>
</table>
</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>
<tr>
<td class="ms-toolbar" nowrap="nowrap">
<table>
<tr>
<td width="99%" class="ms-toolbar" nowrap="nowrap"><IMG SRC="/_layouts/images/blank.gif" width="1" height="18"/></td>
<td class="ms-toolbar" nowrap="nowrap" align="right">
<asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="javascript:self.close()" />
</td>
</tr>
</table>
</td>
</tr>
</xsl:template>
<xsl:template name="dvt_1.rowview">
<tr>
<td>
<table border="0" cellspacing="0" width="100%">
<tr>
<td class="CalRight CalDescriptionCell">
<span class="CalDescriptionText">
<span class="CalTitle"><xsl:value-of select="@Title" /></span>
<xsl:value-of select="@Body" disable-output-escaping="yes"/>
</span>
</td>
</tr>
</table>
</td>
</tr>
</xsl:template>
</xsl:stylesheet> </XSL>
</WebPartPages:DataFormWebPart>
</form>
</body>
</html>

Comments

Popular posts from this blog

SharePoint Designer 2013 Approval Workflow with Comments

Change SharePoint server hostname and Web Application Names

The Timer Service Failed to Recycle