Arranging web parts in JQuery tabs

From past couple of weeks I’m thoroughly working on designing custom SharePoint sites which should look untraditional SharePoint site in all the way. Most of the time users ask to put lots of libraries web part on the home page which looks cluttered and dirty with scroll bars. So I thought why don’t I try with tab table and jQuery was my first preference. Here is how I achieved using SharePoint designer 2010

  • Open your SharePoint site in SharePoint designer 2010 and Download following JQuery JS files and keep into SharePoint site for reference.

Here are the locations,

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
  • Add new ASPX page into your site.

  • Open newly created aspx page in design mode and add following code in head section,
<link href="/path$/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="/path$/jquery.min.js"></script>
  <script type="text/javascript" src="/path$/jquery-ui.min.js"></script>

  <script type="text/javascript">
  $(document).ready(function() {
    $("#tabs").tabs();
  });
 </script>
  • Add following code in body section of the form , Comments shows where web part zone will be added.
<div id="tabs">

    <ul>
        <li><a href="#tab-1"><span>Announcements</span></a></li>
        <li><a href="#tab-2"><span>Events</span></a></li>
        <li><a href="#tab-3"><span>Tasks</span></a></li>
        <li><a href="#tab-4"><span>Shared Documents</span></a></li>

    </ul>

    <div id="tab-1">
        <!-- Web part Zone -->
    </div>

    <div id="tab-2">
       <!-- Web part Zone -->
    </div>

    <div id="tab-3">
         <!-- Web part Zone -->
    </div>

    <div id="tab-4">
        <!-- Web part Zone -->
    </div>

</div>
  • Add web part zone in each DIV . It should be like,

  • Save the form and hit F12. You can able to see the tab table like,

  • Time to link Master page into this aspx page. To do that, Go to Style tab and select master page to attach. View the page on the browser and add web parts to the zone. Here is the final output,

Advertisements

Merging document libraries using Content Query Web Part

Recently I had an requirement to merge more than one document library in same site collection. My first attempt was to find “no code” solution and use SharePoint built in capabilities. After some Google attempt found we can accomplish this using Content Query Web Part or Data View Web Part. There are plenty of posts which explains “connecting another document library using data view web part in SharePoint Designer 2007” but they are irrelevant for SharePoint Designer 2010 ( or Am I missing something ? ). Why ? Because SharePoint Designer 2010 data source picker is missing important feature Connect to another library link.

Some says it can now achieved using SOAP Service Connection and REST Service Connection in SharePoint Designer 2010 but I’m not able to merge though I can get the library from other sites.

At the end I realized only Content Query Web Part may help me to accomplish this. However, I don’t find any help over Internet which explains start to end steps which I can follow and accomplish this ( or I’m poor Googler ). Most important point I was missing is to merge libraries using “CQWP” you must have one common content type for all those libraries which you want to merge. Let’s move on and see how it can be done ..

  • First create new content type which will use by my libraries later.To do so, Go to Site Settings-Galleries-Site content types and Create new Content type. Here is my Customer content type,

  • Created two Customer libraries in two different sites using above content type and added some documents.

  • Add Content Query web part on the page and click Edit Web part link to customize it. Expand Query section and select top level site collection.

  • Under List Type, Select Custom List and choose the content type.

  • Save the settings and documents from both the the libraries will appear like,

By default you can see only Title column until you modify ItemStyle.xsl file . To do so you should follow the Heather Solomon’s article about customizing content query web part.

http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx

So here is my customize ItemStyle.xsl ,

<xsl:template name="ConsolidateListStyle" match="Row[@Style='ConsolidateListStyle']" 
mode="itemstyle">

		<xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="SafeImageUrl">
            <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="LinkTarget">
            <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
        </xsl:variable>

      	 <table cellpadding="7" cellspacing="7" border="1" width="100%">
        	<tr>
           	   <td valign="top" style="width:25%;">
	             <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
                	<a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
                     	<xsl:value-of select="$DisplayTitle"/>
                	</a>
                </td>
                 <td valign="top" style="width:25%;">
                   	<xsl:value-of select="@Customer_x005F_x0020_Name" />
            	</td>
	            <td  valign="top" style="width:25%;">
                   	<xsl:value-of select="@Country" />
            	</td>
            	<td valign="top" style="width:25%;">
                   	<xsl:value-of select="@Phone" />
            	</td>
            </tr>
          </table>   

  </xsl:template>
Here is the result,

When I presented this solution to my manager he said “Let’s group the docs on Country” :). Now I don’t want to dig more in customizing xsl so decided to write custom C# code for the same. It’s going to be my next article 🙂


				

Business Connectivity Services (BCS) with SQL Server using SharePoint Designer 2010

The most easy way to use Business Connectivity Services (BCS) is to use SharePoint designer 2010. However, SPD is limited to use only with SQL Server, .NET Type and WCF Service.This article is going to demonstrate how easy to use BCS with SharePoint designer 2010.

  • Start SharePoint Designer 2010, Open your SharePoint site, Go to External Content TypesNew External Content Type

  • Click “Click here to discover external data sources and define operations” option ,

  • Click “Add Connection” button and select “SQL Server” as a data source.

  • Provide required credentials to connect SQL Server database,

  • Once connected you should able to see the SQL Server database,Expand Tables and Right click on the table which you want for BCS and choose Create All Operations. It will create CRUD operations for this table. If you don’t want all the operations then choose based on your need. Follow the wizard and click Next in Operations Properties window.
  • Set Parameters Configuration and click Finish
.
  • Once done you should see something like this, Save your changes.
  • Go to Central Administration – Application Management – Manage service applications and click Business Data Connectivity Service. Select the content type and set the Permissions. In case if you missed this step you will get “Not authorized” error in your BCS library.
  • Create new External list and select External Content Type
  • Here is the result, Use SharePoint list operations to verify CRUD functionality.