Monday, November 5, 2012

Windows Store App (Metro UI) Design in SharePoint 2010


Objective

We want to implement the Windows Store App (Metro UI) themes in our SharePoint 2010 pages.

Steps

We are not going develop the CSS and pages from scratch. We will try to implement the code project solution file for CSS and design.

Site Link

http://www.lifeinsharepoint.co.uk/2011/12/03/metro-ui-sharepoint-2010-masterpage-solution/

CodePlex Link

http://lifeinsharepoint.codeplex.com/releases/view/78033

First download the WSP file and install it in the SharePoint Server. We can use the PowerShell command to simplify the process.

Add Solution

Add-SPSolution c:\solutionpath\LifeInSharePoint.Metro.wsp

Deploy Solution

Install-SPSolution -Identity LifeInSharePoint.Metro.wsp -WebApplication http://myprojectsite -GACDeployment

Once it's successfully deployed, we can check the deployment files in 14 hive path as mentioned in the following path.
Install-SPSolution –Identity-LifeInSharePoint.Metro.jpg

Go To -> Site Collection Administration -> Site collection Features; we can see the installed feature with the name "SITE.LifeInSharePoint.Metro"

SITE.LifeInSharePoint.Metro.jpg

Before we activate the feature, we will see the following design for sites and pages.

activate-the-feature-Windows-Store-App.jpg

Site Collection Admin page looks like the following page:

Site-Collection-Admin-page.jpg

Activate the feature, make sure site collection's publishing feature is already activated in the site collection.

SITE.LifeInSharePoint.Metro1.jpg

As soon as the feature has activated, we will immediately make the design (UI) changes.

Site-Collection-Administrator.jpg

The entire site's design has changed to that of a Windows Store App (Metro UI):

sites-design-changed-to-Windows-Store-App.jpg

Summary

Creating a SharePoint site in Windows Store App (Metro UI) is fun. Still we are using the CodePlex tool; we will understand the basic design principles behind the scene.

UI Design Principle

http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx 

2 comments: