Monday, July 11, 2011

Top link bar Custom Navigation using Visual studio 2010

This article describes how to create the Sharepoint 2010 top link bar in 3 levels using Visual studio 2010, not SharePoint Designer. This will devide in to three sections:
1. Creating the Master page
2. Creating the Custom navigation datasource
3. Bind Custom navigation datasource to the top link menu bar.

1. Creating the Master Page

Start new project in Visual Studio 2010, Select 'Empty SharePoint Project' and name as 'Master'.

Right click on 'Master' and add new item, Choose Module leave the name as 'Module1'
It will create 'Elements.xml' and 'Sample.txt' files in side 'Module1'

Rename ‘Sample.txt’ to ‘Sample.master’.
I'm not going to write code to the master page, rather open the site in SharePoint Designer and go to 'v4.master' page.
Copy the content and paste in 'sample.master' file.
Open the 'Element.xml' file and change the file path, etc as follows.

xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

<Module Name="Module1" List="116" Url="_catalogs/masterpage">

<File Path="Module1\Sample.master" Url="Sample.master" Type="GhostableInLibrary" IgnoreIfAlreadyExists="FALSE" />

<File Path="Module1\Books.xml" Url="Module1/Books.xml" />

<File Path="Module1\sitemap.xml" Url="Module1/sitemap.xml" />

Module>

Elements>


You have developed the master page and you can deploy it.

It will go to masterpage gallery.



To activate sample.master as your master page:

Right click on ‘Feature1.feature’ and select ‘Add Event Receiver’

Add following methods:

public override void FeatureActivated(SPFeatureReceiverProperties properties)

{

SPSite curSite = (SPSite)properties.Feature.Parent;

SPWeb curWeb = curSite.RootWeb;

Uri masterUri = new Uri(curWeb.Url + "/_catalogs/masterpage/sample.master");

curWeb.MasterUrl = masterUri.AbsolutePath;

curWeb.CustomMasterUrl = masterUri.AbsolutePath;

curWeb.Update();

}

public override void FeatureDeactivating(SPFeatureReceiverProperties properties)

{

SPSite curSite = (SPSite)properties.Feature.Parent;

SPWeb curWeb = curSite.RootWeb;

Uri masterUri = new Uri(curWeb.Url + "/_catalogs/masterpage/v4.master");

curWeb.MasterUrl = masterUri.AbsolutePath;

curWeb.CustomMasterUrl = masterUri.AbsolutePath;

curWeb.Update();

}


Set ‘Feature1.feature’ s scope to site

Once you deploy it sample.master will be your master page.

2. Creating the Custom navigation datasource

Right click on ‘Master’ and select ‘Empty Element’ name it as ‘NavigationDeligate’

Change your Elements.xml file as follows:

xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

<Control Id="TopNavigationDataSource" Sequence="50"

ControlClass="System.Web.UI.WebControls.XmlDataSource"

ControlAssembly="System.Web, version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a">

<Property Name="ID">topSiteMapProperty>

<Property Name="DataFile">sitemap.xmlProperty>

Control>

Elements>

You need to place the 'sitemap.xml' file in ‘Module1’

Right click on ‘Module1’ and select ‘Empty Element’ name it as ‘sitemap.xml’

Add the navigation in source ‘sitemap.xml’ as follows:

xml version="1.0" encoding="utf-8" ?>

<siteMap>

<siteMapNode url="http://sharepoint-pc:3395" title="HOME" description="Home"/>

<siteMapNode url=" http://sharepoint-pc:3395" title="Education">

<siteMapNode url="" title="Postgraduate" />

<siteMapNode url="" title="Undergraduate" >

<siteMapNode url="" title="Curriculam" />

<siteMapNode url="" title="Course Syllbi" />

siteMapNode>

siteMapNode>

<siteMapNode url="" title="Staff" />

<siteMapNode url="" title="Research" />

<siteMapNode url="" title="About" />

siteMap>

This will be your navigation data source.

3. Modify AspMenu

Open ‘Sample.master’ file and find the

You will find a code like this:

<SharePoint:AspMenu

ID="TopNavigationMenuV4"

Runat="server"

EnableViewState="false"

DataSourceID="topSiteMap"

AccessKey=""

<%$Resources:wss,navigation_accesskey%>

"

UseSimpleRendering="true"

UseSeparateCss="false"

Orientation="Horizontal"

StaticDisplayLevels="2"

MaximumDynamicDisplayLevels="2"

SkipLinkText=""

CssClass="s4-tn"/>

<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">

<Template_Controls>

<asp:SiteMapDataSource

ShowStartingNode="False"

SiteMapProvider="SPNavigationProvider"

id="topSiteMap"

runat="server"

StartingNodeUrl="sid:1002"/>

Template_Controls>

SharePoint:DelegateControl>

Replace the above code with following code

<SharePoint:AspMenu

ID="TopNavigationMenu"

Runat="server"

EnableViewState="false"

DataSourceID="DemoXmlDataSource"

AccessKey="<%$Resources:wss,navigation_accesskey%>"

UseSimpleRendering="true"

UseSeparateCss="false"

Orientation="Horizontal"

StaticDisplayLevels="1"

MaximumDynamicDisplayLevels="2"

DynamicHorizontalOffset="0"

SkipLinkText=""

CssClass="s4-tn">

<DataBindings>

<asp:MenuItemBinding Depth="0" DataMember="siteMapNode" NavigateUrlField="url" TextField="title" ToolTipField="description" ValueField="title" />

<asp:MenuItemBinding Depth="1" DataMember="siteMapNode" NavigateUrlField="url" TextField="title" ToolTipField="description" ValueField="title" />

<asp:MenuItemBinding Depth="2" DataMember="siteMapNode" NavigateUrlField="url" TextField="title" ToolTipField="description" ValueField="title" />

DataBindings>

SharePoint:AspMenu>

<%----%>

<asp:XmlDataSource runat="server" ID="DemoXMLDataSource" DataFile="Module1/sitemap.xml" XPath="/*/*">asp:XmlDataSource>

Done!!!



No comments:

Post a Comment