SharePoint 2010/2013 web part that displays links in Metro Tile Grid format. Just like Windows 8. Includes 215 images in 7 different sizes. Or use your own.
Like Windows 8? Love the new Metro Grid (or whatever they are calling it now)? Love SharePoint 2013's Team Site landing page? Then this is your lucky day! Introducing the new SharePoint Metro Grid web part.This project has moved to the AMREIN Engineering product page found here. The product is still free, with a planned paid/enterprise version in the future. Thanks for all the feedback!
Sandbox solution with source code, for SP2010 and SPOnline. Includes MetroGrid web part and separate feature for tile images.
- New Update 3/5/2013: jQuery loading can be skipped (via web part properties), so an alternate version of jQuery can be used, like in the master page, another web part, or a SharePoint Content Editor Web Part (WARNING: this web part may not be compatible with older/newer versions of jQuery and jQuery UI, skip loading at your own risk).
- New Update 3/5/2013: Updated jQuery used by web part to 1.9.0.
- New Update 3/5/2013: Web part now works on anonymous web site.
- New Update 3/5/2013: Moved jQuery loading to bottom of DOM, to make it less aggressive loading jQuery. If another web part on page loads jQuery first, it will try to use that first.
- New Update 3/5/2013: Updated CSS class names to be more unique, so that they do not conflict with built-in SharePoint web parts (or other products).
- Click on description text in tile will open tile link too.
- Web part can be added to subsites in a site collection.
Sample for MetroGrid.wsp (MetroGridImages.wsp also requires installation via STSADM.EXE or Powershell). This assumes STSADM.EXE is added to your "PATH". Next, open a site collection, activate the site collection features.
STSADM.EXE -o addsolution -filename "MetroGrid.wsp"
STSADM.EXE -o execadmsvcjobs
STSADM.EXE -o deploysolution -name "MetroGrid.wsp" -immediate -allcontenturls -allowGacDeployment -allowCasPolicies -force
STSADM.EXE -o execadmsvcjobs
SharePoint Metro Grid Web Part (samples)
Compare, SharePoint 2013 Metro Grid (out-of-box)
Compare, Windows 8 Metro Grid (out-of-box)
- Slick jquery ajax interaction, including dragging and sorting (using jQuery UI).
- 251 metro-ish icons included in 7 different sizes (32px, 48, 64, 80, 96, 112, 128).
- Use your own icons too, by entering image URL with preview
- Choose any image that is same size as grid square (default is 150px) and get a high res tile instead of a metro-like tile
- Saves links in SharePoint List auto created during feature activation (in SharePoint Root Web)
- Move web part to another page in site by adding new metrogrid web part and then using web part properties to share the existing web part ID
- jQuery modal dialog window for adding, editing, deleting metro grid tiles
- Easy to use interface for adding and editing grid tiles, with instant feedback of colors, image sizes, background images
- Packaged in two SharePoint Solution packages (WSPs), 2 site collection features:
- MetroGrid: metro grid web part (without built-in images)
- MetroGridImages: 251 icons included as SharePoint module, optional install if you want to use your own icons, only 4.75MB for all icons.
- Metro Grid tiles are resizeable, default is 150px (via web part properties)
- Metro Grid tiles automatically wrap to container, so use web part properties or page layout to set the width of the metro grid web part (container) to change grid tile layout (ex. 3x3, 4x2, 3x1, etc.)
- Only web/site/site collection admins can create, update, delete, re-arrange grid tiles.
- or, SPContext.Current.Web.UserIsSiteAdmin
- or, SPContext.Current.Web.UserIsWebAdmin
Inspired by Windows 8 Metro UI and SharePoint 2013 Team Site metro grid tiles.A product by Ben Steinhauser, brought to you by B&R Business Solutions, www.bandrsolutions.com.
- Built for MOSS, SharePoint 2010, and SharePoint 2013
- Only requires free SharePoint version (like Foundation 2010), not paid/enterprise
- Uses jQuery and jQuery UI for dragging, sortable, modal windows (dialogs)
- Site collection features (2 features, 1 for images, 1 for web part)