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.
The backstage view itself consists of simple DIV elements and an unordered list for the vertical menu:
When a menu link is clicked, the function switchBackstageView is loading an MVC partial view dynamically:
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.