Microsoft Word provides a very smart way to manage documents and related data such as metadata and personal information in a separate view: The backstage view. The ribbon bar contains commands for working in a document and the backstage view provides options and commands to do to a document.

From a UX (user experience) point of view, the backstage view is very interesting. The user can focus on a specific task such as saving the document. A usual dialog box doesn't hide the document and doesn't provide as much space that is available in the backstage view.

In this project, a sample backstage view is implemented and opened when the user clicks on the ribbon FILE menu.

MVC: Replace the file menu with a backstage view menu

The following Javascript disables the original file menu in order to attach the backstage view on clicking the FILE menu:

TXTextControl.addEventListener("ribbonTabsLoaded", function (e) {
// remove the original file menu
$("#fileMenu").remove();
// open the new menu when the FILE menu is clicked
$("#tabFile").on("click", function () {
animateBackstage(0);
});
animateBackstage(1);
});
view raw tx.js hosted with ❤ by GitHub

The backstage view itself consists of simple DIV elements and an unordered list for the vertical menu:

<div id="backstage" class="backstage">
<div class="menu">
<a onclick="animateBackstage(1)" href="#"><img src="~/img/back.png" /></a>
<ul id="menu">
<li><a id="View1" onclick="switchBackstageView('View1')" href="#">View 1</a></li>
<li><a id="View2" onclick="switchBackstageView('View2')" href="#">View 2</a></li>
<li><a id="View3" onclick="switchBackstageView('View3')" href="#">View 3</a></li>
<li><a id="View4" onclick="switchBackstageView('View4')" href="#">View 3</a></li>
</ul>
</div>
<div id="title" class="title"></div>
<div id="stage" class="stage"></div>
</div>
view raw tx.html hosted with ❤ by GitHub

When a menu link is clicked, the function switchBackstageView is loading an MVC partial view dynamically:

function switchBackstageView(view) {
$('#menu li a').each(function () {
$(this).removeClass("active");
});
// add the title
$("#title").html("<h1>" + view + "</h1>");
$("#" + view).addClass("active");
// load the partial view dynamically
$("#stage").load("/home/getview", { viewName: view });
}
view raw tx.js hosted with ❤ by GitHub

This blog entry will be part of a series that shows how to add several tasks to a backstage view such as loading, saving and printing documents. Stay tuned!

Download the sample from GitHub and test it on your own.