Portal Engine Questions on portal engine and web parts.
Version 5.x > Portal Engine > Custom Breacrumb? View modes: 
User avatar
Certified Developer v7
Certified  Developer v7
Nathoushka - 1/13/2011 10:55:02 AM
   
Custom Breacrumb?
Hi, I have tried using the breadcrumb webpart, but it is far from what I need...

First, the breacrumb generate the html as follow:

<a class="CMSBreadCrumbsLink" href="index.aspx">fr</a>
<span class="CMSBreadCrumbsCurrentItem">mycurrentpage</span>


But there are a lot of things that are not correct.

First, I need my own CSS Classes to be used, not the CMS default classes.
Second, I need to use <ul> and <li>
Third, The "home" link that is generated is not even a valid page (should be something like "en/index.aspx").

I need something that looks like:

<ul id="breadcrumb">
<li class="first"><a href="en/index.aspx">Accueil (RootPage)</a></li>
<li><a href="en/items/index.aspx">Available items (ParentPage)</a></li>
<li class="active">DVDs (CurrentPage)</li>
</ul>


To resume, I don't think it is possible using the existing breadcrumb (I've looked a bit around), so I think I'll create my own. To start off, I need a way to get all sub nodes' page name and the index page url.

Example: if I am in page "mysite.com/en/folder1/folder2/page1.aspx", it should return me:


<ul id="breadcrumb">
<li class="first"><a href="en/index.aspx">Accueil</a></li>
<li><a href="en/folder1/index.aspx">Folder 1</a></li>
<li><a href="en/folder1/folder2/index.aspx">Folder 2</a></li>
<li class="active">Page 1</li>
</ul>


I know it seems a bit complicated, I just want to know if there's a workaround possible to do something like that.

User avatar
Certified Developer v7
Certified  Developer v7
Nathoushka - 1/13/2011 1:27:41 PM
   
RE:Custom Breacrumb?
I might have found a way but I wanted to know:

Is there a way to get the DocumentName (or any other value such as "GetValue("MyValue")") like I could do on the "CurrentDocument"?

Cause if I have "mysite.com/my-folder/my-page.aspx", I would like to get the folder title with the url "mysite.com/my-folder".
Something like "Class.GetValue("MyValue", mysite.com/my-folder)" that would return "My Folder Title" so I can use it into my custom breadcrumb.

Yes, I'm trying to build up my own breadcrumb from A to Z and if I can access the page properties from the url, that would save me a bunch of work.

Thanks!

User avatar
Certified Developer v7
Certified  Developer v7
Nathoushka - 1/13/2011 4:04:26 PM
   
RE:Custom Breacrumb?
In fact, I created a custom document type "Custom Folder" in which I added 2 properties:
- the URL of this folder main page (it won't always be index.html)
- the name of the folder (document name is the URL, so I added a custom propertie for the right formatting)

I've also built all of my custom breadcrumb but only one thing is left... I need to know how I can get those properties using the only thing I know: the URL of that folder. Is there a way I can do that?

User avatar
Certified Developer v7
Certified  Developer v7
Nathoushka - 1/14/2011 10:40:52 AM
   
RE:Custom Breacrumb?
I finally got something working, maybe not the most awesome-looking code, but it works perfectly. I'll put my code in case people wanna try this.

The backside of this is that it will only work with a site that has the same components:
- A custom folder as parent for all page that needs the breadcrumb (including all parents' folders). Only pages right after the language node doesn't need a folder.
- A sub-page as the index of the folder
- A language node as first child node of the site (ex: "mysite.com/en/...")

Of course, this code can be customized to fit what ever needs you have.

To start, I created a new custom Folder called "Breadcrumb Folder" with 2 properties:
- FolderDisplayName (to be displayed on breadcrumb link)
- FolderMainPage (main page of the folder (since the folder is not a valid page))

Then I created a new webpart that links to a usercontrol I created as follow:

breadcrumb.ascx.cs
protected void Page_Load(object sender, EventArgs e)
{
// The breadcrumb HTML container
StringBuilder breadcrumb = new StringBuilder();

// Get site root (custom method to get "http://mysite.com")
string root = SiteUtils.GetSiteRootUrl();
root.Trim();
breadcrumb.Append("<ul id=\"breadcrumb\">");

// Create the first element (main page) with a ressource string
breadcrumb.Append("<li class=\"first\"><a href=\"" + root + "\">" + SiteUtils.GetString("accueil.text") + "</a></li>");

// Get relative URL of current document
string url = CMSContext.CurrentDocument.DocumentUrlPath;

// Remove first slash and page name with last slash
url = url.Substring(1, url.LastIndexOf('/') - 1);

// Split into folders
string[] folders = url.Split('/');

// Get folders' count
int foldersCount = folders.Length;
// Track the amount of folders that can be viewed in a loop
int currentFolder = foldersCount - 1;
// Keep track of the loops count remaining
int folder = foldersCount - 1;

// Build the Breadcrumb (excluding the language)
string currentURL = string.Empty;
for (int z = 0; z < foldersCount; z++)
{
// Set amount of folders remaining to loops through
currentFolder = folder;

// Set current url (ex: "/my-folder-name/second-folder")
currentURL += "/" + folders[z];

// Init the vars that will contain the folder properties
string folderDisplayName = string.Empty;
string folderMainPage = string.Empty;

// If it is not the first level of child (the language node)
if (z != 0)
{
//Get the current node
CMS.TreeEngine.TreeProvider tp = new TreeProvider();
CMS.TreeEngine.TreeNode currentNode = tp.SelectSingleNode(CMS.CMSHelper.CMSContext.CurrentSiteName, CMS.CMSHelper.CMSContext.CurrentAliasPath, CMS.CMSHelper.CMSContext.CurrentPageInfo.DocumentCulture);

// As long as the node is not empty, loop through the parent
while (currentNode.NodeParentID != null)
{
// If there is still a folder and a loop remaining
if (currentFolder > 0 && folder > 0)
{
// Get the parent node and reduce folder count
currentNode = tp.SelectSingleNode(currentNode.NodeParentID);
// Reduce the folder count
currentFolder--;
}
// Otherwise, set the vars with the properties of the current folder obtained with loop
else
{
folderDisplayName = (string)currentNode.GetValue("FolderDisplayName");
folderMainPage = currentURL + "/" + (string)currentNode.GetValue("FolderMainPage");

// Reduce loop count
folder--;
break;
}
}
// Add the page to the breadcrumb if it is not the main page of the folder
if (folderMainPage != CMSContext.CurrentDocument.DocumentUrlPath)
breadcrumb.Append("<li><a href=\"" + root + folderMainPage + ".aspx" + "\">" + folderDisplayName + "</a></li>");
}
}

// Add the current page title to the end of the breadcrumb
breadcrumb.Append("<li class=\"last\">" + CMSContext.CurrentDocument.GetValue("DocumentPageTitle") + "</li>");
breadcrumb.Append("</ul>");
ltlBreadcrumb.Text = breadcrumb.ToString();
}


breadcrumb.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="breadcrumb.ascx.cs" Inherits="Controls_common_breadcrumb" %>
<asp:Literal ID="ltlBreadcrumb" runat="server" />