In this article I have explained how you can create a basic
Master Page. But in fact you can do lot of stuff with this Master Page. On one
of my recent projects I had to create a Master Page which had tabs, 3 or 4
navigation menus and they wanted the Search control without the default
dropdown for Scope. So, I would like to present some tips on customizing the
Master Pages.
Adding menu system to launch external websites: This could
have been easy with the local navigation. But they wanted it separate from
local navigation as it was already used up. I came up with using the ASP:Menu
control provided by ASP.NET 2. If you look closely the Navigation menu SharePoint:ASPMenu
control is actually inherited from System.Web.UI.WebControls.Menu. I used the ASP:Menu
control on my SharePoint Master Page. Below are the steps involved in adding
your own Navigation menu.
Step1: At the appropriate place add the asp:menu control.
The syntax could be as:
Listing 8
<asp:Menu runat="server" id="Menu1" width="100%" DataSourceID="ExternalLinks"
StaticSubMenuIndent="10px" Target="_blank">
</asp:Menu>
Step 2: Now we need to assign the asp:SiteMapDataSource for
the above DataSourceID=Externallinks. The sitemapdatasource can be declared as:
Listing 9
<asp:SiteMapDataSource runat="server" ID="ExternalLinks" ShowStartingNode="False"
SiteMapProvider="MyMenuProvider"/>
Step 3: Now we have defined MyMenuProvider as the
SiteMapProvider. But we need to let it know where to get the sitemap file. So,
we need to add this in the Web.Config file under the SiteMap->Providers
section in Web.Config file.
Listing 10
<add name="MyMenuProvider"
type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.3600.0,
Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" siteMapFile="Menu.sitemap"/>
Javascript: I wrote lot of Javascripts in the current Master
Page to do lot of formatting stuff. The main formatting was the look and feel
of tabs. The tabs had to be controlled by our Javascripts. I also modified the
Search Control completely. By default, the search control was displaying the
Search Scope dropdown list box, text to enter search and the magnifying glass
image. The client wanted to replace the magnifying image and remove all the
items from the dropdownlist box except for the Directory. The following is the
Javascript which I wrote on the Master Page to accomplish it.
Below is the Listing to remove the scopes from the dropdown
and just list the Directory option.
Listing 11
ddlSelects = document.getElementsByTagName('select');
for (var i = 0; i < ddlSelects.length; i++)
{
if (ddlSelects(i).title == "Search Scope")
{
var count;
var diroption;
for (count = 0; count < ddlSelects(i).options.length; count++)
{
if (ddlSelects(i).options(count).text == "Directory")
diroption = ddlSelects(i).options(count);
}
ddlSelects(i).options.length = 0;
ddlSelects(i).options.add(diroption);
}
}This is the listing to change the magnifying icon glass at
run time only for this Master Page.
Listing 12
var ahrefs;
ahrefs = document.getElementsByTagName('a');
for (var i = 0; i < ahrefs.length; i++)
{
if (ahrefs(i).title == "Go Search")
{
ahrefs(i).innerHTML =
"<img title=\"Go Search\"
onmouseover=\"this.src='/_layouts/images/button_go_02.jpg'\"
onmouseout=\"this.src='/_layouts/images/button_go_01.jpg'\" alt=\"Go Search\"
src=\"/_layouts/images/button_go_01.jpg\" style=\"border-width:0px;\" />";
ahrefs(i).href = "javascript:SearchLink();"
}
}In short, there are various things you can do to the Master
Page. In fact, the stuff you could do on ASP.NET applications master page can
also be done on the SharePoint Master Page.
