Here’s the 14th post in our series of guest posts by Microsoft Most Valued Professionals (MVPs). Since the early 1990s, Microsoft has recognized technology champions around the world with the MVP Award. MVPs freely share their knowledge, real-world experience, and impartial and objective feedback to help people enhance the way they use technology. Of the millions of individuals who participate in technology communities, around 4,000 are recognized as Microsoft MVPs.
This post is by David Wesst, who is an Internet Explorer MVP.
David here. As the saying goes, “A picture is worth a thousand words,” yet in software development we usually resort to text-based descriptions when defining features. The Visual Studio team has given us the ability to move from text-based to picture-based descriptions by leveraging one of the most common tools in the software development toolbox: Microsoft PowerPoint.
In this post, I’m going to walk you through defining a feature using the new storyboarding features of Visual Studio 2012 and PowerPoint. By the end, you’ll see how your analysts can define features by using tools they are familiar with and make them easily accessible to the developers by injecting them directly into Team Foundation Server.
If you want to follow along and get started on your own PowerPoint storyboarding adventure, you are going to need a couple of things:
The last two items are optional because you don’t need to attach storyboards to a TFS project to use them. Linking storyboards to TFS work items is definitely a great feature, but that doesn’t mean that storyboards are useless on their own. We’ll dive into that later, but for now let’s get started on making some storyboarding magic!
New tools, same PowerPoint
Let’s start by going to the newly added Start Menu item with the name PowerPoint Storyboarding, which will open up PowerPoint and jump the ribbon right over to the new Storyboard tab and open up the sidebar of new Storyboard Shapes.
The new ribbon tab gives us all the tools we need to make a great storyboard, including some of the more advanced features we will be talking about later on. It also shows/hides the Storyboard Shapes sidebar with a toggle button.
Now we have the tools we need to make a great storyboard, so let’s get started on our storyboarding quest.
Your first storyboard
Making a storyboard in PowerPoint is not that much different than making a regular PowerPoint slide. You simply take shapes and drag them onto the slide, which will eventually make up a great storyboard. Our new PowerPoint add-in has provided us a number of shapes to get us started, including backgrounds and specific controls for SharePoint, Metro, and Windows Phone.
At Imaginet, I deal with a lot of SharePoint user interfaces, so I am going to start out by selecting the SharePoint background from the Storyboard Shapes sidebar.
The SharePoint background is a great way to start creating my storyboard. Because the background shape is just a bunch of regular PowerPoint shapes grouped together, we can select the individual pieces and customize them. For starters, I’m going to update the text fields and make it feel more like the SharePoint project for which I am storyboarding features.
Now it looks more like the SharePoint site that we are trying to build. Next, I’m going to add the “Send Us Feedback” button to the Quick Launch bar.
With that, I now have a storyboard that I can show my developers, which will ensure they know what this new feature will look like on the home page. The next part is storyboarding the behaviour that happens when the user clicks the button: bring up a modal popup for feedback.
The PowerPoint add-in doesn’t have a feedback modal control for me to use, which means I’ll need to make my own. PowerPoint natively gives me the power to do that by using PowerPoint shapes and grouping them together. I can combine the PowerPoint and Storyboard shapes to create very rich customized shapes for my storyboard.
With my new modal popup shape, my screen looks like this:
Tip: Saving custom shapes If you end up making a number of custom shapes that you know you will want to reuse, all you need to do is highlight the group of elements that make up your custom shape and click on “Add to My Shapes” in the ribbon. PowerPoint will then add it to your Storyboard Shapes sidebar, and you will be able to use it again. You can also export your custom shapes to use them in future storyboarding adventures! Microsoft has also provided us with the Storyboard Shapes Authoring Tool which allows us to import and build storyboard shapes from your command line.
If you end up making a number of custom shapes that you know you will want to reuse, all you need to do is highlight the group of elements that make up your custom shape and click on “Add to My Shapes” in the ribbon. PowerPoint will then add it to your Storyboard Shapes sidebar, and you will be able to use it again. You can also export your custom shapes to use them in future storyboarding adventures!
Microsoft has also provided us with the Storyboard Shapes Authoring Tool which allows us to import and build storyboard shapes from your command line.
At this point, my storyboard is ready for developers to review and build into the project. To make it easy on the development team, I am going to attach the storyboard to a work item in TFS, so they can see it using their own tracking software. Since I saved my PowerPoint Storyboard file on a network shared folder (or SharePoint site), my team can easily access it along with TFS. In the Storyboard ribbon tab, I just need to click the “Storyboard Links” button, connect to my TFS instance, and browse to my project.
There, I can find the work item that I want to link this storyboard to, and then my developers will have a pictorial description they can access easily and are familiar with.
And as the saying goes, a picture is worth a thousand words. My developers should now have a very clear vision of what they need to build to make my SharePoint project a success.
Now you have the foundation to work with storyboards in Visual Studio 2012 and Team Foundation Server 2012, but you have only scratched the surface of its potential.
Microsoft has provided us with the tools to not only export our custom shapes for our own purposes, but to share them the entire Visual Studio community. They have a number of shape collections that you can add to the Storyboard Shapes sidebar in PowerPoint.
All that and more can be found here in the Visual Studio Gallery.
You can also check out these links on the MSDN to get more details about how to leverage storyboarding inside of Visual Studio 2012:
This is very cute, but the storyboard is still just a file attached to a work item.
The work items itself doesn't show you any pictures.
The work item description is still (html) text and blather - there is no easy way to use the storyboard inside the work item.
There does not seem to be a way to point to a particular part of a storyboard to say that "this work item is about building the form on page 3" and have the picture of the form show up in the work item.
I think we'll stick with our home-brew solution using word documents and web-views in work items
I created www.windows8templates.com as a tool for wireframing and prototyping modern UI themed Windows 8 and Windows Phone 8 apps. Windows8Templates come with a library of over 200 customizable Storyboard Shapes in PowerPoint.
Each UI element can be hooked up to action buttons and slide transition to build an interactive prototype right in PowerPoint with no coding.
You can also find them on the Visual Studio Gallery here: visualstudiogallery.msdn.microsoft.com/0221df12-b844-4cf2-9ccd-feb0fc1d2b01