Creating Flash navigation menus driven by your SharePoint site content

Navigation menus are one of the central points of any site. Since SharePoint is now more than ever being used to drive public sites – popular navigation techniques including Flash menus are now a topic for discussion when integrating components to SharePoint driven site. End result: users would see nice Flash menus instead of a standard links and tabs generated by SharePoint.

Needless to say that those menus have to be driven by the content within SharePoint and items have to be dynamic just like out-of-the-box. In my scenario, client already had several types of menus that are essentially Flash objects and can be easily placed on any webpage including SharePoint master page using an <object> tag. Once our Flash is placed on the page and executed – we need to access SharePoint to extract actual object representing SharePoint menu items. In our example here we will list all of the sub-sites under our top level site and consume them within our Flash object.

So let’s see what we’re looking at here. Since Flash is not capable of accessing SharePoint object model directly – one of the ways we can extract the names and URLs of our sub-sites is to use SharePoint web-services. Depending on the type of the data we need to extract from SharePoint – there are different web-services we will be working with. In this case we’re looking at

http://<server-url>/_vti_bin/webs.asmx

to extract sub-sites.

If you tried accessing SharePoint web services from other than .NET environment, such as a static web page – you probably already know that de-serializing your data and extracting pieces you need will require quite a bit of manual work. The benefit here is that you have access to many of the properties available in the object.

In our scenario – we just need a URL of the sub-site and its title. Once we have that information, we can create menu items in our Flash and display them. To extract just those two properties, URL and sub-site title, we could use an alternative solution below.

The alternative is to create a SharePoint custom layout page (resides under http://<server-url>/_layouts) that will return simple delimited or XML structured data such as title of the site and URL. This option is only available if you are allowed to deploy custom layout pages to the environment. Considering the fact that you will be modifying the master page of the site – this shouldn`t be a problem.

So let`s take a look at what the custom layout page which extracts our sub-sites is going to look like:

<%@ Assembly Name=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>

<%@ Page Language=”C#” MasterPageFile=”~/_layouts/application.master” Inherits=”Microsoft.SharePoint.WebControls.LayoutsPageBase” EnableViewState=”true” EnableViewStateMac=”false” %>

<%@ Import Namespace=”Microsoft.SharePoint” %>
<%@ Import Namespace=”Microsoft.SharePoint.ApplicationPages” %>
<%@ Import Namespace=”Microsoft.SharePoint.Administration” %>

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

<%@ Register TagPrefix=”Utilities” Namespace=”Microsoft.SharePoint.Utilities” Assembly=”Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>

protected override void OnLoad(EventArgs e)
{
try
{
using(SPSite oSiteCollection = new SPSite(“http://<siteurl>”))
{
SPWebCollection collWebsites = oSiteCollection.AllWebs;
Response.WriteLine(“<subsites>”);
foreach (SPWeb oWebsite in collWebsites)
{

Response.WriteLine(“<subsite name=’{0}’>{1}</subsite> “, oWebsite.Url, oWebsite.Title);
oWebsite.Dispose();

}
Response.WriteLine(“</subsites>”);
}
}
catch (Exception ex)
{ throw new Exception(“Problem retrieving menu data data. ERROR 1 ” + ex.Message); }
}

</script>

<asp:Content ID=”Main” ContentPlaceHolderID=”PlaceHolderMain” runat=”server”></asp:Content>

<asp:Content ID=”PageTitle” ContentPlaceHolderID=”PlaceHolderPageTitle” runat=”server”></asp:Content>

<asp:Content ID=”PageTitleInTitleArea” ContentPlaceHolderID=”PlaceHolderPageTitleInTitleArea” runat=”server”></asp:Content>

Pretty straight forward stuff here, we’re accessing all of the sub-site under the current site collection and displaying their URL and title creating an XML structure. If we executed this layouts page by hitting it from http:///_layouts/ .aspx we would get out URLs and titles as a simple webpage.

We are not required to create XML structure to consume it in Flash, in fact we can delimit out objects however we like as long as we can easily de-serialize them later.

Now that required information is available in a simple format, all we need to do is to request this page from our Flash clip and render menu objects with respective URLs and site titles.

Let’s take a look at such sample Flash code (ActionScript):

var myXML:XML = new XML();
myXML.ignoreWhite=true;
myXML.load(“http://<server>/_layouts/<page_name>.aspx“);
myXML.onLoad = function(success) {
if (success) {
var myWeb = myXML.firstChild.childNodes;
for (i=0; i< myWeb.length; i++) {
var webNumber = i+1;
var webName = myWeb[i].attributes.title;
var webURL = myWeb[i].firstChild.nodeValue;
trace (“My web number “+webNumber+” is titled “+webName+” and its URL is “+webURL+”.”)
}
}
};

That is the core of it, now you can tweak your ActionScript to feed data into the presentation of your menu items.

If you’re into experimenting, you can probably see variety of application here already which don’t have involve menus; you can build various Flash components that grab their dynamic content from your site and not only.

Here are some good references for starters:

http://www.republicofcode.com/tutorials/flash/xml/
http://msdn.microsoft.com/en-us/library/ms543497.aspx

Good Luck!

Search

Creating Flash navigation menus driven by your SharePoint site content