Show Multiple WebParts in Tab in a SharePoint 2013 Page

Introduction

For any site home page content organization is always difficult for organizations and developers. We always need to take care of the look and feel of the home page. If there is too much content on the page entered directly then it creates a vertical (or horizontal) scrollbar. Normal users like to see the content with a very good look and in the least number of clicks. This leads to the idea of creating Tab Controls that help content owners to deliver the content in a more user-friendly way.

This article explains how to customize your SharePoint Home page using a Tab Control.

To create a tab control web part Out-Of-Box (OOB) we need to use the following procedure.

Step 1: Create a Document Library named JSLibrary.

Step 2: Add folder Tab.

Step 3: Add three Jquery.min Jquey-ui,jquery-ui.min files inside the Document Library Folder.

Step 4: Open site in SharePoint Designer.

Step 5: Open Site Page.

Step 6: Add an aspx page by right-clicking on the right panel.

Step 7: Modify the code as below:

<%@ Page Language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"

MasterPageFile="../_catalogs/masterpage/default.master" Title="MyTabPage" meta:webpartpageexpansion="full"

meta:progid="SharePoint.WebPartPage.Document" %>

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"

Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls"

Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="cc2" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register TagPrefix="ListWP" Namespace="AS.SPD.ListWP.ListWP" Assembly="AS.SPD.ListWP, Version=1.0.0.0, Culture=neutral, PublicKeyToken=0ad98201a0b5e35b" %>

<asp:content id="Content1" runat="Server" contentplaceholderid="PlaceHolderMain">

<WebPartPages:SPProxyWebPartManager runat="server" id="ProxySPWebPartManager">

</WebPartPages:SPProxyWebPartManager>

<ul>

<li><a href="#tab-1"><span>Country</span></a></li>

<li><a href="#tab-2"><span>State</span></a></li>

<li><a href="#tab-3"><span>Company</span></a></li>

<li><a href="#tab-4"><span>Product</span></a></li>

</ul>

<WebPartPages:WebPartZone id="g_ABDF1003120448C49C08000C6F40EEB5" runat="server" title="Zone 1

<ListWP:ListWP runat="server" ListName="Country" Description="My Visual WebPart" Title="ListWP" __MarkupType="vsattributemarkup" __WebPartId="{3f8f327e-86fe-4610-8f66-820b6a2b6eab}" WebPart="true" __designer:IsClosed="false" partorder="2" id="g_3f8f327e_86fe_4610_8f66_820b6a2b6eab"></ListWP:ListWP>

</WebPartPages:WebPartZone>

</div>

<WebPartPages:WebPartZone id="g_6F24E0B648C44467A24948C7C67D3EF5" runat="server" title="Zone 2">

<ListWP:ListWP runat="server" ListName="State" Description="My Visual WebPart" Title="ListWP" __MarkupType="vsattributemarkup" __WebPartId="{b7b15812-4923-43ad-9b7d-ef027517ba98}" WebPart="true" __designer:IsClosed="false" partorder="2" id="g_b7b15812_4923_43ad_9b7d_ef027517ba98"></ListWP:ListWP>

</WebPartPages:WebPartZone>

</div>

<WebPartPages:WebPartZone id="g_F4D87570C76D4CC28D458FDB12F49FE7" runat="server" title="Zone 3">

<ListWP:ListWP runat="server" ListName="Company" Description="My Visual WebPart" Title="ListWP" __MarkupType="vsattributemarkup" __WebPartId="{d07f3072-892d-4856-8d3d-aa3c42b11015}" WebPart="true" __designer:IsClosed="false" partorder="2" id="g_d07f3072_892d_4856_8d3d_aa3c42b11015"></ListWP:ListWP>

</WebPartPages:WebPartZone>

</div>

<WebPartPages:WebPartZone id="g_1C783BE3E6524B3ABD5C4E9F3C766681" runat="server" title="Zone 4">

<ListWP:ListWP runat="server" ListName="Product" Description="My Visual WebPart" Title="ListWP" __MarkupType="vsattributemarkup" __WebPartId="{6d47c8fe-1c86-4b7e-b22c-4ea148f76fea}" WebPart="true" __designer:IsClosed="false" partorder="2" id="g_6d47c8fe_1c86_4b7e_b22c_4ea148f76fea"></ListWP:ListWP>

</WebPartPages:WebPartZone>

</div>

</asp:content>

<asp:content id="Content2" runat="server" contentplaceholderid="PlaceHolderAdditionalPageHead">

$(document).ready(function () {

$("#tabs").tabs();

});

</script>

</asp:content>

Summary

In this article we have explored step-by-step how to add web parts in a tab using jQuery.

5 Comments

Join the conversation! Your thoughts help the community grow.

Sirisha K10y ago
good one
Mangat Ram11y ago
i got the error "Could not load file or assembly 'AS.SPD.ListWP, Version=1.0.0.0, Culture=neutral, PublicKeyToken=0ad98201a0b5e35b' or one of its dependencies. The system cannot find the file specified. ". Any suggestions
- Abhay Shanker11y ago
  It seems you have replaced all the code of aspx page with given code.So Change the code from <,asp:content.Don't replace the all code block
Abhay Shanker12y ago
Thanks...
Lakshmanan Sethu Sankaranarayan12y ago
Useful article!