Sharepoint Insight by Namwar Rizvi

Sharepoint Tips, Tricks and inside knowledge from real world experience by Namwar Rizvi

Posts Tagged ‘WebParts’

How to create a general purpose Search Results ticker in SharePoint by jQuery

Posted by namwar on May 22, 2010


Business Problem

Display SharePoint search results as a scrolling ticker.

Solution:

SharePoint has two very powerful web parts Search Core Results WebPart and Content Editor WebPart . By combining these two web parts along with some jQuery and jCarousel Lite plug-in we can achieve desired results very quickly. The technique described here is very generic and can be used in CQWP and other web parts too.

What we are doing is quite simple. We use jCarousel plugin for jQuery to scroll the elements of HTML unordered list i.e. <ul>. To achieve this we need an HTML code similar to following

<div class="wrapper">
   <ul id="listticker">
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
   </ul>
 </div>

We generate this code by updating the XSL of Search Core Results Web part.

Step 1 : Setup required javascript libraries:

  • jQuery: No need to download, we will use it from Google CDN.
  • jCarousel Lite: Please download it from here and store it either under _layouts folder or in a document library at your sharepoint web.

Step 2 : Add Content Editor Web Part (CEWP):

Add CEWP on your target page. Edit the CEWP and paste following code by clicking on Source Editor:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

//Replace the value of src attribute with the path of your jcarousellite.js file
<script type="text/javascript" src="http://moss-server/SearchCenter/Resources/jcarousellite/jcarousellite.js"></script>

<script type="text/javascript">
$(function() {
	$(".wrapper").jCarouselLite({
		vertical: true,
		hoverPause:true,
		visible: 1,
		auto:3000,
		speed:1000
	});
});
</script>

Step 3 : Add Search Core Results Web Part :

Add Search Core Results web part. Configure the web part as you wish. For example, I used it to display all documents by using  Fixed Keyword Query functionality as follows:

  • Fixed Keyword Query = IsDocument:1
  • Cross-Web Part query ID = Query 2

Step 4 : Update XSL of Search Core Results Web Part :

Click XSL Editor and paste following XSL

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:param name="ResultsBy" />
<xsl:param name="ViewByUrl" />
<xsl:param name="ViewByValue" />
<xsl:param name="IsNoKeyword" />
<xsl:param name="IsFixedQuery" />
<xsl:param name="ShowActionLinks" />
<xsl:param name="MoreResultsText" />
<xsl:param name="MoreResultsLink" />
<xsl:param name="CollapsingStatusLink" />
<xsl:param name="CollapseDuplicatesText" />
<xsl:param name="AlertMeLink" />
<xsl:param name="AlertMeText" />
<xsl:param name="SrchRSSText" />
<xsl:param name="SrchRSSLink" />
<xsl:param name="ShowMessage" />
<xsl:param name="IsThisListScope" />
<xsl:param name="DisplayDiscoveredDefinition" select="True" />
<xsl:param name="NoFixedQuery" />
<xsl:param name="NoKeyword" />
<xsl:param name="NoResults" />
<xsl:param name="NoResults1" />
<xsl:param name="NoResults2" />
<xsl:param name="NoResults3" />
<xsl:param name="NoResults4" />
<xsl:param name="DefinitionIntro" />

<!-- When there is keywory to issue the search -->
<xsl:template name="dvt_1.noKeyword">
  <span class="srch-description">
  <xsl:choose>
  <xsl:when test="$IsFixedQuery">
      <xsl:value-of select="$NoFixedQuery" />
  </xsl:when>
   <xsl:otherwise>
      <xsl:value-of select="$NoKeyword" />
   </xsl:otherwise>
  </xsl:choose>
  </span>
</xsl:template>

<!-- When empty result set is returned from search -->
<xsl:template name="dvt_1.empty">
 <div class="srch-sort">
  <xsl:if test="$AlertMeLink and $ShowActionLinks">
    <span class="srch-alertme" > <a href ="{$AlertMeLink}" id="CSR_AM1" title="{$AlertMeText}"><img style="vertical-align: middle;" src="/_layouts/images/bell.gif" alt="" border="0"/><xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text><xsl:value-of select="$AlertMeText" /></a>
    </span>
  </xsl:if>

  <xsl:if test="string-length($SrchRSSLink) &gt; 0 and $ShowActionLinks">
   <xsl:if test="$AlertMeLink">
    |
   </xsl:if>
   <a type="application/rss+xml" href ="{$SrchRSSLink}" title="{$SrchRSSText}" id="SRCHRSSL"><img style="vertical-align: middle;" border="0" src="/_layouts/images/rss.gif" alt=""/><xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text><xsl:value-of select="$SrchRSSText"/></a>
  </xsl:if>
 </div>
 <br/> <br/>

  <span class="srch-description" id="CSR_NO_RESULTS">
   <xsl:value-of select="$NoResults" />

    <ol>
    <li><xsl:value-of select="$NoResults1" /></li>
    <li><xsl:value-of select="$NoResults2" /></li>
    <li><xsl:value-of select="$NoResults3" /></li>
    <li><xsl:value-of select="$NoResults4" /></li>
    </ol>
  </span>
</xsl:template>

<!-- Main body template. Sets the Results view (Relevance or date) options -->
<xsl:template name="dvt_1.body">

  <div class="srch-results">
  <xsl:if test="$ShowActionLinks">
  <div class="srch-sort"> <xsl:value-of select="$ResultsBy" />
   <xsl:if test="$ViewByUrl">
     |
    <a href ="{$ViewByUrl}" id="CSR_RV" title="{$ViewByValue}">
     <xsl:value-of select="$ViewByValue" />
    </a>
   </xsl:if>
   <xsl:if test="$AlertMeLink">
     |
    <span class="srch-alertme" > <a href ="{$AlertMeLink}" id="CSR_AM2" title="{$AlertMeText}"><img style="vertical-align: middle;" src="/_layouts/images/bell.gif" alt="" border="0"/><xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text><xsl:value-of select="$AlertMeText" /></a>
    </span>
   </xsl:if>
   <xsl:if test="string-length($SrchRSSLink) &gt; 0">
     |
     <a type="application/rss+xml" href ="{$SrchRSSLink}" title="{$SrchRSSText}" id="SRCHRSSL"><img style="vertical-align: middle;" border="0" src="/_layouts/images/rss.gif" alt=""/><xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text><xsl:value-of select="$SrchRSSText"/></a>
   </xsl:if>
  </div>
  <br /><br />
  </xsl:if>

	<div class="wrapper">
			<ul id="listticker">
				<xsl:apply-templates />
			</ul>

	</div>

  </div>

  <xsl:call-template name="DisplayMoreResultsAnchor" />

</xsl:template><!-- This template is called for each result -->
<xsl:template match="Result">
  <xsl:variable name="id" select="id"/>
  <xsl:variable name="url" select="url"/>
	<li>
  <span class="srch-Icon">
   <a href="{$url}" id="{concat('CSR_IMG_',$id)}" title="{$url}">
   <img align="absmiddle" src="{imageurl}" border="0" alt="{imageurl/@imageurldescription}" />
   </a>
  </span>
  <span class="srch-Title">
   <a href="{$url}" id="{concat('CSR_',$id)}" title="{$url}">
    <xsl:choose>
     <xsl:when test="hithighlightedproperties/HHTitle[. != '']">
         <xsl:call-template name="HitHighlighting">
          <xsl:with-param name="hh" select="hithighlightedproperties/HHTitle" />
         </xsl:call-template>
     </xsl:when>
     <xsl:otherwise><xsl:value-of select="title"/></xsl:otherwise>
    </xsl:choose>
   </a>
    <br/>
   </span>

   <xsl:choose>
     <xsl:when test="$IsThisListScope = 'True' and contentclass[. = 'STS_ListItem_PictureLibrary'] and picturethumbnailurl[. != '']">
       <div style="padding-top: 2px; padding-bottom: 2px;">
        <a href="{$url}" id="{concat('CSR_P',$id)}" title="{title}">
          <img src="{picturethumbnailurl}" alt="" />
        </a>
       </div>
     </xsl:when>
   </xsl:choose>
   <div class="srch-Description">
    <xsl:choose>
    <xsl:when test="hithighlightedsummary[. != '']">
       <xsl:call-template name="HitHighlighting">
          <xsl:with-param name="hh" select="hithighlightedsummary" />
       </xsl:call-template>
    </xsl:when>
     <xsl:when test="description[. != '']">
        <xsl:value-of select="description"/>
     </xsl:when>
    </xsl:choose>
    </div >
    <p class="srch-Metadata">

    <span class="srch-URL">
     <a href="{$url}" id="{concat('CSR_U_',$id)}" title="{$url}" dir="ltr">
      <xsl:choose>
        <xsl:when test="hithighlightedproperties/HHUrl[. != '']">
           <xsl:call-template name="HitHighlighting">
              <xsl:with-param name="hh" select="hithighlightedproperties/HHUrl" />
           </xsl:call-template>
        </xsl:when>
       <xsl:otherwise><xsl:value-of select="url"/></xsl:otherwise>
      </xsl:choose>
     </a>
    </span>
     <xsl:call-template name="DisplaySize">
      <xsl:with-param name="size" select="size" />
     </xsl:call-template>
     <xsl:call-template name="DisplayString">
      <xsl:with-param name="str" select="author" />
     </xsl:call-template>
     <xsl:call-template name="DisplayString">
      <xsl:with-param name="str" select="write" />
     </xsl:call-template>
     <xsl:call-template name="DisplayCollapsingStatusLink">
        <xsl:with-param name="status" select="collapsingstatus"/>
        <xsl:with-param name="urlEncoded" select="urlEncoded"/>
        <xsl:with-param name="id" select="concat('CSR_CS_',$id)"/>
     </xsl:call-template>
    </p>
	</li>
</xsl:template>

<xsl:template name="HitHighlighting">
 <xsl:param name="hh" />
 <xsl:apply-templates select="$hh"/>
</xsl:template>

<xsl:template match="ddd">
  …
</xsl:template>
<xsl:template match="c0">
    <b><xsl:value-of select="."/></b>
</xsl:template>
<xsl:template match="c1">
    <b><xsl:value-of select="."/></b>
</xsl:template>
<xsl:template match="c2">
    <b><xsl:value-of select="."/></b>
</xsl:template>
<xsl:template match="c3">
    <b><xsl:value-of select="."/></b>
</xsl:template>
<xsl:template match="c4">
    <b><xsl:value-of select="."/></b>
</xsl:template>
<xsl:template match="c5">
    <b><xsl:value-of select="."/></b>
</xsl:template>
<xsl:template match="c6">
    <b><xsl:value-of select="."/></b>
</xsl:template>
<xsl:template match="c7">
    <b><xsl:value-of select="."/></b>
</xsl:template>
<xsl:template match="c8">
    <b><xsl:value-of select="."/></b>
</xsl:template>
<xsl:template match="c9">
    <b><xsl:value-of select="."/></b>
</xsl:template>

<!-- The size attribute for each result is prepared here -->
<xsl:template name="DisplaySize">
  <xsl:param name="size" />
  <xsl:if test='string-length($size) &gt; 0'>
   <xsl:if test="number($size) &gt; 0">
   -
    <xsl:choose>
     <xsl:when test="round($size div 1024) &lt; 1"><xsl:value-of select="$size" /> Bytes</xsl:when>
     <xsl:when test="round($size div (1024 *1024)) &lt; 1"><xsl:value-of select="round($size div 1024)" />KB</xsl:when>
     <xsl:otherwise><xsl:value-of select="round($size div (1024 * 1024))"/>MB</xsl:otherwise>
    </xsl:choose>
   </xsl:if>
  </xsl:if>
</xsl:template>

<!-- A generic template to display string with non 0 string length (used for author and lastmodified time -->
<xsl:template name="DisplayString">
  <xsl:param name="str" />
  <xsl:if test='string-length($str) &gt; 0'>
   -
   <xsl:value-of select="$str" />
  </xsl:if>
</xsl:template>

<!-- document collapsing link setup -->
<xsl:template name="DisplayCollapsingStatusLink">
    <xsl:param name="status"/>
    <xsl:param name="urlEncoded"/>
    <xsl:param name="id"/>
    <xsl:if test="$CollapsingStatusLink">
      <xsl:choose>
          <xsl:when test="$status=1">
              <br/>
              <xsl:variable name="CollapsingStatusHref" select="concat(substring-before($CollapsingStatusLink, '$$COLLAPSE_PARAM$$'), 'duplicates:&quot;', $urlEncoded, '&quot;', substring-after($CollapsingStatusLink, '$$COLLAPSE_PARAM$$'))"/>
              <span class="srch-dup">
              [<a href="{$CollapsingStatusHref}" id="$id" title="{$CollapseDuplicatesText}">
              <xsl:value-of select="$CollapseDuplicatesText"/>
              </a>]
              </span>
          </xsl:when>
      </xsl:choose>
    </xsl:if>
</xsl:template><!-- The "view more results" for fixed query -->
<xsl:template name="DisplayMoreResultsAnchor">
  <xsl:if test="$MoreResultsLink">
   <a href="{$MoreResultsLink}" id="CSR_MRL">
    <xsl:value-of select="$MoreResultsText"/>
    </a>
   </xsl:if>
</xsl:template>

<xsl:template match="All_Results/DiscoveredDefinitions">
  <xsl:variable name="FoundIn" select="DDFoundIn" />
  <xsl:variable name="DDSearchTerm" select="DDSearchTerm" />
  <xsl:if test="$DisplayDiscoveredDefinition = 'True' and string-length($DDSearchTerm) &gt; 0">
    <script language="javascript">
      function ToggleDefinitionSelection()
      {
        var selection = document.getElementById("definitionSelection");
        if (selection.style.display == "none")
        {
          selection.style.display = "inline";
        }
        else
        {
          selection.style.display = "none";
        }
      }
    </script>
    <div>
      <a href="#" onclick="ToggleDefinitionSelection(); return false;">
        <xsl:value-of select="$DefinitionIntro" /><b><xsl:value-of select="$DDSearchTerm"/></b></a>
      <div id="definitionSelection" class="srch-Description" style="display:none;">
        <xsl:for-each select="DDefinitions/DDefinition">
          <br/>
          <xsl:variable name="DDUrl" select="DDUrl" />
          <xsl:value-of select="DDStart"/>
          <b>
            <xsl:value-of select="DDBold"/>
          </b>
          <xsl:value-of select="DDEnd"/>
          <br/>
          <xsl:value-of select="$FoundIn"/>
          <a href="{$DDUrl}">
          <xsl:value-of select="DDTitle"/>
          </a>
        </xsl:for-each>
      </div>
    </div>
  </xsl:if>
</xsl:template>

<!-- XSL transformation starts here -->
<xsl:template match="/">
  <xsl:if test="$AlertMeLink">
   <input type="hidden" name="P_Query" />
   <input type="hidden" name="P_LastNotificationTime" />
  </xsl:if>
  <xsl:choose>
   <xsl:when test="$IsNoKeyword = 'True'" >
    <xsl:call-template name="dvt_1.noKeyword" />
   </xsl:when>
   <xsl:when test="$ShowMessage = 'True'">
     <xsl:call-template name="dvt_1.empty" />
   </xsl:when>
   <xsl:otherwise>
    <xsl:call-template name="dvt_1.body"/>
   </xsl:otherwise>
  </xsl:choose>
</xsl:template>

<!-- End of Stylesheet -->
</xsl:stylesheet>

Step 5 : Enjoy! :
Click OK and exit from edit mode. Your ticker is ready, Enjoy.

Advertisements

Posted in Information, JavaScript, jQuery, Search, Solutions | Tagged: , , , , , , , , , | Leave a Comment »

How to display Web Part Maintenance Page in SharePoint

Posted by namwar on July 19, 2009


Often your web part page starts behaving strangely or giving you errors due to some buggy script or web part. This sometimes even stops you to open page in edit mode because of Java Script errors.

Don’t worry, there is a very simple way to delete those web parts. Just append ?contents=1 at the end of the URL of respective page and SharePoint will open the Web Part Maintenance Page for it.

For example, if the URL of problematic page is

http://MOSServer/Test/default.aspx

then Web Part Maintenance Page url will be

http://MOSServer/Test/default.aspx?contents=1


Posted in Solutions, Tips | Tagged: , , | 1 Comment »

How to add custom CSS in your WebPart

Posted by namwar on June 14, 2009


If you want to add custom CSS file for your webpart, here is the code:

  1. protected override void CreateChildControls()
  2. {
  3. base.CreateChildControls();
  4. CssLink cssLink = new CssLink();
  5. cssLink.DefaultUrl = “/_layouts/Test.css”;
  6. this.Page.Header.Controls.Add(cssLink);
  7. }

Posted in C#, Solutions, Tips | Tagged: , , | Leave a Comment »

Visual Studio 2008 extensions for Windows SharePoint Services 3.0, v1.3 – Mar 2009 CTP

Posted by namwar on March 24, 2009


A goow news for SharePoint community 🙂 Microsoft has releasesd the Mar 2009 CTP of Windows SharePoint Services 3.0 v1.3. This CTP contains excellent set of functionalities and saves your precious time. You can download the extensions from here

Following is the overview as released by Microsoft

This is the SharePoint developer tools for Visual Studio 2008. These tools are suitable for use with Windows SharePoint Services 3.0 or Microsoft Office SharePoint Server 2007. It includes project and item templates for common SharePoint artifacts, it includes build, packaging and deployment for SharePoint solutions and it includes the SharePoint Solution Generator which creates a new Visual Studio 2008 project from a SharePoint site.

The tools provide item templates for List Definition, List Definition from Content Type, Content Type, Field Control, Web Part, Module, Root File, Template, Event Receiver, and List Instance. It provides project templates for Team Site Definition, Blank Site Definition, List Definition, Web Part and Empty. It works with Visual Basic .NET and C# languages and a comprehensive user guide is included. It does not include the SharePoint Workflow templates as they are built in with Visual Studio 2008.

New features in version 1.3 include:

  • Can be installed on x64 Server OS machines running SharePoint x64. Previously only x86 Server OS could be used
  • Separate build commands for package, deploy and retract are added as Visual Studio menu items
  • WSP View improvements for consistency of deleting feature elements, merging features and adding event receivers to features
  • Command line build, package and retract commands are included enabling continuous integration and build servers. Previously command line build of SharePoint projects was very difficult
  • Refactoring support for renaming of Web Parts. Previously renaming a web part required changes in several files in the project
  • Solution Generator can now generate solutions from publishing sites. Previously only regular sites could be generated
  • Allowing partial trust BIN deployments of web parts
  • New project item template for SharePoint RootFiles items
  • Deployment will now optionally remove conflicting existing features on the development server prior to redeployment. Previously any feature name conflicts would result in an error
  • Ancillary assemblies such as for business logic can now be added to the SharePoint Solution WSP
  • Hidden features related to Site Definition projects are now shown in WSP View. They are no longer hidden
  • For advanced users a fast deploy is included to update only the compiled assembly on the SharePoint development installation
  • Deployment step logging is included
  • The List Definition from Content Type template now allows for the creation of a List Definition Event Receiver
  • The User Guide is now installed with the extensions instead of being a separate download

Posted in Debugging, Guidance, Templates, Tools | Tagged: , , , , , , , , | Leave a Comment »

Launch Office Application from SharePoint Portal Page

Posted by namwar on February 26, 2009


Business Problem:

    One of my client wanted to have links on main portal to launch Microsoft Office key applications i.e Word, Excel, Power Point and Outlook directly by clicking on a link at portal page.

Solution:

I searched the net and find a nice solution here It is a small piece of JavaScript code which you can put in CEWP and use it on your portal page. I added some formatting and relevant icons against the office applications and wraps it up in a webpart dwp file. After importing this web part on your page, you will get something like this:

launchofficeapplication1

You can download the dwp file from here

Posted in Customization, JavaScript, Uncategorized | Tagged: , , , , | 3 Comments »