It is better to use a pay layout template to customize the web part page, we can use this template to properly put each webpart into different web part zone. we then can use this page layout template to create the new page.
We can use the following step to complete this task.
1. go to Master Page Library by selecting the site setting from Settings icon on the top right corn.
2. click on the Master Page And The Page Layout to access the Master Page Library
3. download a copy of welcomePageLayout.aspx
4. Rename the Welcome Layout Page to TabPage.aspx
5. Open the TabPage.aspx with Visual Studio Code. and paste the following code after the Library Registration Section. Which will add javascript file reference and enable Tab in the Document.ready event.
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" runat="server"/>
<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme -->
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" />
<!-- Reference jQuery on the Google CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Reference jQueryUI on the Google CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<style type="text/css">
.ms-bodyareaframe
{
padding: 0px;
}
#tabs {
background: none;
border: none;
}
#tabs .ui-widget-header {
height: 40px;
background: none;
border: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
<PublishingWebControls:EditModePanel runat="server">
<!-- Styles for edit mode only-->
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %>"
After="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %>" runat="server"/>
</PublishingWebControls:EditModePanel>
</asp:Content>
6. put this snippet of code in the Main PlaceHolder to get the Web Part Zone Layout Configuration in place.
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
<div class="">
<!--<PublishingWebControls:EditModePanel runat="server" CssClass="edit-mode-panel title-edit">
<SharePoint:TextField runat="server" FieldName="Title"/>
</PublishingWebControls:EditModePanel> -->
<div id="tabs">
<ul>
<li><a href="#Sales-Dasboard">Sales Dasboard</a></li>
<li><a href="#Sales-Report">Sales Report</a></li>
</ul>
<div id="Sales-Dasboard">
<div class="ms-table ms-fullWidth">
<div class="tableCol-100">
<div class="cell-margin">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Header%>" ID="Header"/>
</div>
<div class="ms-table ms-fullWidth">
<div class="cell-margin" style="width:49.9%;display: table-cell;">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterLeft%>" ID="CenterLeftColumn1" />
</div>
<div class="cell-margin" style="width:1%;display: table-cell;">
</div>
<div class="cell-margin" style="width:48.9%;display: table-cell;">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterRight%>" ID="CenterRightColumn1" />
</div>
</div>
<div class="cell-margin">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Center%>" ID="Middle1"/>
</div>
<div class="cell-margin">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Center%>" ID="Middle2"/>
</div>
<div class="ms-table ms-fullWidth">
<div class="cell-margin" style="width:49.9%;display: table-cell;">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterLeft%>" ID="CenterLeftColumn2" />
</div>
<div class="cell-margin" style="width:1%;display: table-cell;">
</div>
<div class="cell-margin" style="width:48.9%;display: table-cell;">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_CenterRight%>" ID="CenterRightColumn2" />
</div>
</div>
<div class="cell-margin">
<WebPartPages:WebPartZone runat="server" Title="<%$Resources:cms,WebPartZoneTitle_Footer%>" ID="Footer"/>
</div>
</div>
<SharePoint:ScriptBlock runat="server">if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty();}</SharePoint:ScriptBlock>
</div>
</div>
<div id="Sales-Report">
<WebPartPages:WebPartZone runat="server" Title="loc:CaseStudies" ID="CaseStudies" FrameType="TitleBarOnly"><ZoneTemplate>
</ZoneTemplate></WebPartPages:WebPartZone>
</div>
</div>
</div>
</asp:Content>
7. Upload the tabPage.aspx to the Master Page Library.
- Selected Page Layout from Content Type section dropdown list
- Selected Page Layout Content Type from Content Type Group Dropdown list
- Select Welcome Page from Content Type Name dropdown List.
8. Go to Page library and Create a new page by Selecting
TabPage.aspx from the list box under Page Layout section.
9. when you click your newly created page. you will see your tab like this
Tab One Web Part Zone Layout
Tab Two Web Part Zone Layout
No comments:
Post a Comment