Archetonomy Mega Drop Down Review

Having usable and accurate navigation is essential to the success of your SharePoint site. SharePoint’s default navigation can be used to create concise main navigation menus, and can even support taxonomy via Managed Navigation. Visually & functionally, however, you’re limited to a simple 4-level deep flyout/dropdown menu for the main navigation. In the side Quick Launch menus, hierarchy can be implied with simple indenting of the text links.

In both of those main navigation areas of SharePoint, the out-of-the-box experience does have some definite UI and UX constraints.

The Mega menus concept

Now, mega menus are probably well familiar to anyone and everyone by now- it was an up and coming design trend back in the late 2000’s. Old hat – but let’s review the fundamentals of this design pattern first:

Typically, a mega menu:

  • is a single drop-down that appears on hover
  • shows all the options in one large panel
  • groups options into related categories
  • uses icons or other graphics to help the user.

They can succeed because:

  • They offer a good compromise between simple and expanding menus.
  • They are easy to use and should suffer fewer accessibility problems.
  • They can condense a lot of information architecture artifacts into a small amount of screen real estate

Mega menus done right
Mega menus gone WRONG
Mega menu best practices
Mega menus in Ecommerce – design Trends from 2011 vs 2014

Now, in the SharePoint world, there arose a number of solutions to be able to implement mega menu-style navigation systems in response to the growing demand. Some examples:

SharePoint Mega Menu from a DVWP and a List
BindTuning – How to use BindTuning’s Mega  Menu
Mega Menu for SharePoint

Finally, here’s a gallery of some SharePoint sites using mega menus, which are either custom coded or leveraging commercial mega menus:
SharePoint sites using mega menus

There are a plethora of other articles, posts and products relating to mega menus & SharePoint, for sure this particular links list could be a couple screens long. The vast majority do require a good knowledge of Javascript/CSS custom code, so in this review i’m focusing on the one commercial product I know of that offers a good compromise between ease of use and technical functionality.

The Archetonomy Solution

mdd2-pro-search

The Archetonomy Mega Menu system is a farm solution for on-premise SharePoint 2010, 2013 & 2016, and has the broadest feature set of  any 3rd party solution that I know of in this vein for SharePoint. After positive experiences with the product, I figure it’s time to give it a review.

Pros

  • Comprehensive What-You-See-Is-What-You-Get administration/design interface
  • Styles can be applied ad-hoc, with inline or formalized CSS, or a combination of both
  • Import/Export of menu configuration as an XML file eases transitioning to different environments
  • Design workflow flexibility: Power users & less technical stakeholders can do initial mock-ups with the visual designer directly in the GUI, and then hand it over to a front-end developer to formalize CSS later

Cons

  • While the drag and drop and visual design surface (which shows real-time X/Y coordinates of menu elements) increases efficiency and overall ease of use, it’s tedious to get everything to line up pixel-perfect when doing manual designs. What would really help is the ability to select multiple elements and align them left/right/top with one click, as can be done in programs like Visio, Photoshop etc.
  • Archetonomy Megamenus are currently only for on-premise SharePoint. Office 365 SharePoint Online is not currently supported. I did hear that a SharePoint Online version might be in the works but have not seen an update about that.

Dynamic Content

  • Links & content in the menu can be displayed dynamically, either individually or in sections, based on:
    • Content search queries, for example:
      • query selects the top 10 most downloaded documents from the HR department
      • selects results based on what logged In user is currently viewing the page (e.g. the last 10 documents I personally accessed)
    • Managed Metadata tagged content: the hierarchy of words that reflects organizational structure, business units & concepts can be reflected in the menu
    • Managed Navigation (TermStore): The specialized portion of Managed Metadata that is focused on site navigation, can be used. This gives special advantages like being able to use “friendly” URL’s.
    • SharePoint list managed navigation (with folder grouping): Standard SharePoint Lists can be used as the place where links are added. This gives the special advantage that the admin can assign certain user permissions to edit that list, allowing isolation of edit rights for the overall menu:
      • For example, the admin could add a section of links in the Marketing Department section of the main menu, which draws its data from a SharePoint list in the Marketing Departments site collection. A user in Marketing with basic training on how to work with SharePoint Lists, could be delegated access to be able to add/edit/remove links from that SharePoint List. This user would not be able to edit anything else in the main menu system other than the links generated by their specific SP List.
    • Three-level hierarchy (List Panels): It’s possible to maximize “screen real estate” and offer a richer selection of content, by adding an interactive Panel bar section. When a user clicks on a horizontal link section, the related content area displays in the same dropdown. In this way we can multiply the amount of content that can be displayed in single, fixed size menu dropdown area:
    • Publishing Pages: When this section is added to menu, it will automatically display all pages in the current Sites Publishing Pages Library, which is the standard place where SharePoint Publishing Pages are created. This makes it simple to render the most typical type of SharePoint CMS content.
    • Audiences, which are predefined groups that users can be added into, for example a typical use case could be “New Hires”, whereby any user in that group is shown menu content & links focused on onboarding topics.
  • Search input boxes can be added anywhere inside the dropdown menu, with the search boxes optionally sending users to specialized search results pages. For example, a search input box inside a HR Department menu dropdown, could send the user to a search results page focused only on HR-related content

Design & Ease of Use

  • Standardized CSS can be used, for example as part of a Branding Solution. In this way, when one adds a new links or content, it can already by default inherit the overall corporate branding styles.
  • Content and site designers can design and create menus directly in the browser without needing to write HTML or CSS
  • Although designing and building menus with Mega Drop Down for SharePoint is not difficult, building highly functional menus requires several skillsets. While the same person can represent many of these skillsets, identifying these roles upfront will further increase your menu’s adoption rate:
    • Information Architect – Responsible for understanding what content exists within your site and defining what options are available for accessing content.
    • UI Designer – Responsible for designing an intuitive and effective interface.
    • UI Developer – Responsible for implementing the design. This person is typically responsible for building the HTML and CSS.
    • Menu Administrator – Responsible for managing the links and updating navigation content.
      • Menu Sub-Administrators– Users in the organization who are granted selective access to add or edit only certain portions of the menu, such as a user in the Marketing Department given access to edit just links & content in that section of the menu

License Manager Installation Guide
Mega Drop Down Installation and User Guide
Product Release Notes
Video Tutorials

 

Conclusion

Although it’s a shame there’s not a SharePoint Online version of this, it’s still a powerful menu system for those with on-premise SharePoint. The ability to visually design the menu layouts and content is a big win, especially for rapid prototyping – although one needs to consider carefully how much the design should be controlled by manual activities vs how much should be put on rails by creating formal CSS rules.

Being able to add complex controls like Search Inputs, or deliver link content based on Content Search queries can help create truly useful navigation systems. With mega menu powers, comes mega responsibilities: putting everything including the kitchen sink into a menu navigation system also can create it’s own user experience issues, so one has to to be mindful that underlying usability is paid attention to.

 

View Source Chart for IE

Thought i’d share that there’s an IE port of a valuable plugin i’ve used in Firefox for a while, View Source Chart:

Steps to get beautiful, visually sensible HTML source viewing in IE9:
1. Copy the script below and paste it into a new browser bookmark.
2. Click the bookmark from any page to view its source chart.

For other browsers, check the first code block on this page.

About View Source Chart

Cross-browser bookmarklet now available at viewsourcechart.com

A PICTURE SAYS A THOUSAND WORDS
Eyesight is the most efficient way for the human brain to process information. By placing visual boundaries where they already exist invisibly, Source Charting enables you to take in DOM structure and hierarchy as fast as your brain possibly can.

IT’S BETTER BECAUSE…
When mentally building tag boundaries by reading a tag name, then using manual actions like clicking, finding and scrolling, we experience forced breaks in cognitive processing. As the DOM becomes more complex, more productivity is lost. It doesn’t take long before mentally navigating the DOM becomes impossible.

Source Charting eliminates the need for processing any other way but the fastest: visually. It provides an instant and complete visualization of hierarchical nesting of any tag in the view port.

SUMMARY
Source Charting…
* Defines HTML Tag Boundaries (so you don’t have to)
* Defines DOM Structure and Hierarchy (so you don’t have to)

Case In Point: The Misapplication of Flowchart-style UI for DOM Inspectors
DOM inspectors and Folder Viewers have historically (and mistakenly) used flowchart-style GUIs to help users navigate hierarchies. The problem is that this type of GUI is intended to convey sequential movement or flow, not structure.

Because sequence and flow is measured one step at a time, the lines connecting elements in a flowchart-like GUI span only one generation (parent-child). When used to depict complex hierarchical structures like the DOM, the user is forced to inefficiently and inaccurately measure hierarchical nesting levels using white space indentation. (See image #3 above)

It is precisely this subtle but monumental mistake that View Source Chart overcomes.

The only way to visualize structure accurately is to measure hierarchical nesting. This is done simply by pictorially delineating element boundaries, which results in a manifestation of document structure.

For a full de-bugging How-To, visit http://viewsourcechart.com/what-why-how

Cross-browser bookmarklet available at http://viewsourcechart.com/get-the-bookmarklet

Telerik acquires Fiddler

Great news, the greatest little open source web debugger, Fiddler, has now been aquired by the great vendor of .NET controls, Telerik. Expect some nice upgrades to Fiddler soon, and yes, it will remain free.

Full story:
http://www.telerik.com/automated-testing-tools/blog/christophereyhorn/12-09-10/here-we-grow-again-telerik-acquires-fiddler-what-s-next.aspx

“We have some very exciting news to share with the Telerik community. Telerik has just acquired Fiddler! Even more exciting is that Fiddler’s brilliant creator Eric Lawrence will come over from Microsoft to join the team fulltime. For those of you who don’t know, Fiddler is a web debugging proxy which logs all HTTP(S) traffic between your computer or device and the Internet. In other words, it is an essential tool for any web, desktop or mobile developer. The popularity and sophistication of Fiddler is hugely impressive considering this has been Eric’s informal side project for more than 8 years. With Eric joining the team he will be able to deliver on his vision for Fiddler with the full financial and resource backing of Telerik.

It might be apparent why Eric would jump at an opportunity to turn his side passion project into a full time position, but what might not be readily obvious is why Telerik would need a product like Fiddler in our portfolio.

Our strategy has always been to acquire when it makes sense and to use the new technology to improve our core products for the benefit of our customers. In the case of Fiddler, this was a natural extension because Fiddler is already in use as the core technology behind Test Studio’s load and performance features. Additionally, we gain a formidable competitive edge over other tools as both Eric and Fiddler join the Test Studio product family. The collaboration for enhancing Fiddler is already underway as well as discussions to further expand our portfolio and extend support for our customers.

The Fiddler community is very important to us. We have learned from the mistakes of others who have acquired free tools only to turn the tables on the community and monetize them at a later date. We admire what Fiddler has delivered to the community and want to expand that value by investing in things like expanded platform support, user interface improvements and a first class website with extensive community and support features.

That is why, as part of our commitment to keeping Fiddler free and making further investments into the tool, we have launched a poll on the Fiddler website asking the community to vote on the first improvements we will target. Whether you are an avid or occasional Fiddler user we would love to get your opinions on what you would like to see happen first.

To give you some insight into how popular Fiddler really is here are some stats, year to date. On average Fiddler receives over 9,000 installations EVERY DAY, and when I say average that is including weekends. That number jumps to over 10,000 for weekdays. The website has received more than 5 million unique visitors this year alone with over 80% of them being first time visits. Needless to say that the Fiddler community is not just big, it’s HUGE.

So please help me in welcoming Eric and the Fiddler community into the Telerik family. Great things are ahead for Fiddler as we continue to invest in and build an even better tool and community. To see how Fiddler is already powering Test Studio’s load and performance features download a trial today.”

CSSRegistrations and ScriptRegistration in SP 2010

The CssRegistration control adds each of the style sheets to an internal collection in the SPContext and the CssLink renders each of them in alphabetical order before rendering the primary, default, and alternate CSS links. If you want one of them to appear after core.css, set the DefaultUrl property of CssLink.

CSSLink Example:

<Sharepoint:CssLink runat="server" DefaultUrl="<% $SPUrl:~SiteCollection/Style Library/en-us/Core Styles/Style.css %>"/>

CssRegistration Example:

<SharePoint:CssRegistration Name="<%$ SPUrl:~sitecollection/Style Library/en-us/Core Styles/Style.css %>"
After="corev4.css" runat="server" EnableCssTheming="true"/>

It’s very easy to get confused by this because the CssRegistration controls are after CssLink, but they don’t render the links, CssLink does!
One advantage that the publishing definitions have over the SharePoint default.master is the $SPUrl expression that allows dynamic creation of the URL for sites under the root web that use the root web’s master pages. Unfortunately, while CssRegistration is part of the core Microsoft.SharePoint.dll, $SPUrl requires the publishing features to be turned on.

For a JS reference, it’s important to note that ScriptLink doesn’t support the expression builders like . If the script available in top-Level site, you can use:

<SharePoint:Scriptlink runat="server" name="~SiteCollection/Style Library/en-us/Core Styles/JS/script1.js" 
language="javscript" />

If the script avaialble in the current site, we can use:

<SharePoint:Scriptlink runat="server" name="~Site/Style Library/en-us/Core Styles/JS/script1.js" 
language="javscript" />

SP 2010 List Cell Vertical Alignment

There seems to be a trait associated with the Multi-Line Text list column type in that it floats the <p> element containing the text in the middle of the cell. Why this is, I know not. I do know that most people like their table values generally vertical-aligned to the top of the cells they reside in.

The vertical alignment not being butted up to the top is a symptom of the out-of-the-box SP 2010 Multi-Line data value class. I corrected it by applying the following CSS class to my custom branding:


.ms-listviewtable p
{
margin-top:0px;
}

All your Multi-Line list column values should now appear with the <p> element wrapping them aligned to the top of their table cell.

SharePoint 2010 Get Current Username / Logged in User

Have been exploring the SharePoint Client Object Model and in particular the Javascript Object Model

While there are methods to get the current user info, you can also simply borrow the logged in username from the top right of the screen:


<script type="text/javascript">// <![CDATA[
 var Username = document.getElementById("zz16_Menu").innerHTML ;
 var end = Username.indexOf("<");
 var nameOnly = Username.substring(8, end);
 document.write(nameOnly);

// ]]></script>

This technique is a little complex for my liking however, so here’s a snappier way to grab the current login name (using Jquery):


var Username = $("#zz16_Menu").text();
document.write(Username);

Note that the #zz16 identifier will vary based on your Master page. Use the Firefox Web Developer tools or Internet Explorer F12 tools to find out what the ID should be on your SharePoint site.

Using this type of technique is definitely more brittle than actually using a CAML query however in my mind would be more performant than actually doing a lookup in the DB. Would love to know if someone knows the scoop on that..

Update 05/12/2011

As my colleague Colin pointed out – the name that appears on the top right can really be anything and can change – for example if a user gets married and their name changes. A better approach would be to retireve the value programmatically using SPServices ( http://spservices.codeplex.com/wikipage?title=$%28%29.SPServices.SPGetCurrentUser ). As of version v0.6.1, you can also request the ID of the user by specifying fieldName: “ID”.  Much more stable to use in most scenarios:

$().SPServices.SPGetCurrentUser({
	fieldName: "ID",
	debug: false
});