The Inspired Tiles SharePoint Web Part is a great way to promote and show any information in a tiled, metro theme. Inspired by the SharePoint 2013 Promoted Links Web Part. Also, it uses a modern jQuery plugin to automatically arrange the tiles and provide a slick filtering system for the tiles. List driven, point it at a list and then configure the web part properties.

Each Tile includes:

• Title, and optionally a Description
• The description will show on hover, rising from the bottom of the tile sliding/animating to the top.
• Background image, configure its size and location
• Background color: 18 built-in styles (css class names) are included, see below for more information
• Href link when Tile label clicked

Additional Features:

• Lots of configuration operations, can be as simple as displaying a list of tiles with just text, or advanced layouts that include custom backgrounds, hyperlinks to content, custom sorting of tiles, and custom filtering of items returned from list (using CAML where clause).
• If you include a field in your list that contains filter information (like a Category), this will be used to automatically include filter/category buttons at the top of the gallery, and using these filter buttons you can show/hide the matching tiles. Each tile can be in one or more filter categories too.
• 30 day trial period. Purchase a license for continued use. License is good for each front-end server (on premise) or each tenant (online).
• Packaged as a SharePoint Sandbox Solution, can be installed as a Farm Solution or Sandbox Solution on premise or in the cloud.
• Compatible with SharePoint 2010 (Foundation and Server), SharePoint 2013 (Foundation and Server), and Office 365/SharePoint Online.
• Packaged as a Site Collection Feature, activate once per site collection. JS and CSS is available via a list in the root site of site collection. Feel free to tweak and make it your own. Almost all source code is JavaScript, free to customize.

For Farm Solution installation: using either PowerShell or STSADM, add the WSP to the farm (we recommend opening SharePoint PowerShell, then using STSADM within)

STSADM.EXE -o addsolution -filename "AEInspiredTiles.wsp"

Then deploy the solution using Central Administration (System Settings, Farm Solutions), so you can easily target the web application. You can optionally do this step too with STSADM or PowerShell, but we recommend deploying using the Central Admin GUI.

For Sandbox Solution installation, open the Site Collection that you want to add the web part, open Site Settings (must be a site admin or owner to do this), open the Solution Gallery (or Solutions in 2013), add the WSP to the gallery, then activate the solution.

NOTE: Product is contained in a single WSP file for both installing as a Farm solution and Sandbox solution. If installing On Premise then you can install as either Farm solution or Sandbox solution at your discretion. If installing SharePoint Online then Sandbox solution is your only option.

Follow the instructions for installing as a sandbox solution.

• After the solution is deployed (either Farm or Sandbox), you then activate a Site Collection Feature named “AE Inspired Tiles Web Part”. This adds the web part and creates a library in the root site of the site collection.
• Add the web part to a page (Group is “AMREIN Engineering”, web part name is “Inspired Tiles Web Part”).
• Edit the web part properties.
• Enter a license key, or leave blank for a 30 day trial.
• That's it! Your Inspired Tiles Web Part will render the default tiles found in the AEInspiredTilesItems list (in the root site of the site collection).
• UPDATE: Due to a reported SharePoint 2013 and SharePoint Online bug you might need to disable the "Minimal Download Strategy" "site feature" for this web part to work.

The Tiles are retrieved from a SharePoint List using SharePoint JavaScript Object Model code. The web part comes with a default list that includes the out of box tiles, named "AEInspiredTilesItems". This list is found in the root site of the site collection and is created when the site collection feature is activated. The list can be a Library or Custom List. Configure the web part properties to look for the list in the relevant site, and specify the internal field names where the information is saved. You can use any SharePoint List or Library, just point the web part at the list and configure the web part properties so it knows where the list is located and what fields to look for in the list.

Relevant Web Part Properties:

• Site Server Relative Web Url: Server Relative Url of the SharePoint Web Site where List is located, or leave blank to use current web site, ex. '/sites/finance'.
• List Name: Name of SharePoint List where Inspired Tiles list items are located.
• Label Field Name: Internal field name in List where tile label is found, ex. 'Title', 'FileLeafRef'

You can easily point the web part at a document library and it will pull all the files found (recursively in all the folders).
Set the 'Label Field Name' to be 'FileLeafRef' to show file names in the tile.
Set the 'Href Field Name' to be 'FileRef' to link to the file when the tile caption is clicked.
You can continue to configure other web part properties to enhance the tiles, filtering, sorting, categorizing, opening links in new windows, etc.

• License Key: Enter Amrein license key here (see other section for more information).
• Site Server Relative Web Url: Server Relative Url of the SharePoint Web Site where List is located, or leave blank to use current web site, ex. '/sites/finance'.
• Extra CSS Url: Include a url here to a custom CSS file found in your SharePoint site. This file will be added so that it overrides the default styles of the web part.
• Extra Css Inline: Alternatively, you can enter CSS styles here and they will be added to the page and override the default styles, useful for quick changes to the look and feel of the web part.
• List Name: Name of SharePoint List where Inspired Tiles list items are located.
• Label Field Name: Internal field name in List where tile label is found, ex. 'Title' (for document libraries you can use 'FileLeafRef' to get filename)
• Description Field Name: Optional, internal field name in List where description is found.
• Filter Field Name: Optional, internal field name in List where filter/category data is saved. More on this in a later section. This field type can be a single line of text, multiple lines of text, choice, or taxonomy. For instance, a field named 'Department' can be used, and all the 'departments' found in tile list items will be extracted and added as filter buttons to the top of the tile gallery.
• NEW! Default Filter Value: Optional, internal value of filter/category to load on page load, instead of loading the 'Show All' category. Ex. 'Information Technology'
• NEW! Hide 'Show All' Category: Use this to hide the 'Show All' category, should be used with 'Default Filter Value' property.
• Href Field Name: Optional, internal field name in List where link/href data is saved. When a link is found the tile caption can be clicked to open the link.
• Href Open in New Window: If the tile has a link, specify if the link should open in a new window/tab.
• Show Link Arrow in Tile: If the tile has a link, specify if the tile should show an arrow in the top right corner.
• Sort Order Field Name: Internal field name in List for field used to find sort order information. Can be the same field as Label or a different field.
• Sort Order Direction: Choose either ascending or descending.
• Tile Bg Color Class Field Name: Internal field name in List where CSS class name is found, that can be used to style the tile. Out of box styles are included below, values in list item should be plain text like 'sky', 'contact', etc.
• Tile Bg Image Url Field Name: Internal field name in List where background image for tile is found, image will be centered in background.
• Tile Bg Image Size Field Name: Internal field name in List where background size is found, this should be single integer, will be used for both width and height. Default is 64px width and height out of box.
• Assign Random Tile Colors: Choose to load random tile background colors from the set of colors found below (18 colors).
• List Where Clause Field Name: Internal field name in List to filter items returned to web part, used to build SharePoint CAML Query 'where clause'. This field is different from "Filter Field Name", that other field is used to separate out the categories to build the tile filter buttons.
• List Where Clause Field Value: The value to match for the Where Clause query, "equals" condition is used.

When the Inspired Tiles Web Part site collection feature is activated, a list is created in the root site of the site collection named 'AEInspiredTilesItems'. The web part uses this list by default. You can always choose to point the web part to another list. However, let's look at that list and see what fields are present and what they are used for.

• Title: This is the out of box field where the tile label is found, ex. 'John Hicks'.
• TileDescription: This is the field where you can enter a longer description for the tile that shows on hover.
• TileHrefLink: This is the field where you can enter a URL that, when the tile is clicked, the user will be navigated. The option to open a link in a new window/tab is found in the web part properties, and effects all the tiles.
• TileBgColorClass: This is the field where you enter the CSS class name, you can use the out of box styles (see other section), or your own, ex. 'sky', 'contact'.
• TileBgImageUrl: This is the field where you can enter the background image URL where the icon/image is found that you want to appear centered in the tile.
• TileBgImageSize: This is the field where you can enter the background image size, this should be single integer, will be used for both width and height, ex. '64'.
• TileCategory: This is the field where you can enter/choose one or more categories that are used to build the slick filtering used by the tile web part. More on this in another section below. Ex. 'Accounting', 'IT|IS' (using '|' or ';' to separate multiple values)

One of the slick features of the Inspired Tiles Web Part is the dynamic filtering of the tiles when the tiles are categorized. When the web part is configured to look for the filter/category field then all the category values found for the list items returned will be separated and added as buttons to the top of the web part when displayed.

Steps to Configure:

• In the Tile List (assuming you are using the default list), enter data in each list item in the field named 'TileCategory'
• Edit web part properties, set the property 'Filter Field Name' to the internal field name where the category data is found, ex. 'TileCategory'

Category values and field types:

The field that contains the Filter/Category data can be either Text, Note (plain text), Choice (single or multi), or Taxonomy (Managed Metadata) (single or multi). You can enter one or more categories and they will be split and extracted, so that a tile can be included in more than one category (like an Employee being in two different departments, or a link belonging to two separate categories).

• Text/Note: Enter one or more category names, you can separate multiple categories with either '|' or ';' (pipe or semicolon)
• Choice: Using the SharePoint out of box field type 'Choice' you can configure the field to allow single or multiple choices
• Taxonomy/Managed Meta Data: Using the SharePoint out of box field type 'Managed Metadata' you can configure the field to use a Term Set and allow single or multiple selections

Use these CSS class names to automatically style the tiles. Put them in the list field "TileBgColorClass" (found in the default inspired tiles list).

Download the latest version WSP from the AMREIN product catalog

If you are upgrading from another paid version available from the AMREIN product catalog, then you can use the “STSADM –o upgradesolution” to upgrade to the latest version.

If upgrading as a Farm Solution, open “SharePoint 2010 (or 2013) Management Shell”, then use the following command:

STSADM.EXE -o upgradesolution -name "AEInspiredTiles.wsp" -filename "AEInspiredTiles.wsp" -immediate –allowGacDeployment

If upgrading as a Sandbox Solution, open the root site of the site collection you want to upgrade. Open Site Settings, then open the Solution Gallery. You will have to deactivate the solution first, then upload the new solution (replace existing one), then activate again. You will have to upgrade the web part sandbox solution in every site collection separately. This is not applicable for sub sites, just site collections.

After the page is done loading, use your browser to “View Source”, and search for the following string "AEIT_VERSION_NUMBER" or "AEIT_LICENSE_INFO". You will see your version number and license status here. For example:

<div style='display: none;'>AEIT_VERSION_NUMBER: 1.0</div>
<div style='display: none;'>AEIT_LICENSE_INFO: 30 day Evaluation period: 29 days left.</div>
<div style='display: none;'>AEIT_LICENSE_ALERT: n/a</div>

The product is available as a 30 day free trial, per front-end server, or per Office 365 tenant license. You can download and install the web part and evaluate for 30 days before a license is needed for continued usage. After 30 days you will be prompted to license the product.

Each license is valid for each front-end server in your SharePoint Farm (or each Office 365 tenant). The web part can then be used as many times as needed on each server/tenant.

You can enter the license key in two ways:

• Enter license key in web part's "web part properties" tool pane.
• For on premise deployments you can optionally enter the license key in a web.config file. This is the preferred method if you will be using the web part in many locations, so that you can enter the key once and be done. You will enter the license key in an “appSetting” configuration section in the web.config file:

• <appSettings><add key="AEIT" value="{MY_LICENSE_KEY_VALUE}" /></appSettings>

  • For Farm Solutions, use web.config here:

  • C:\inetpub\wwwroot\wss\VirtualDirectories\{YOURSITE}\web.config

  • For Sandbox Solutions, use web.config here:

  • C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\UserCode\web.config *

    * This path is for SP2010, it may be different in SP2013.

The web part’s CSS and JavaScript resources are saved in a list named “AEInspiredTilesAssets” located in the root site of the site collection.

It is important that any user expected to use the web part have at least read permissions to:

• The root site of the site collection (that contains the web part and page it’s on).
• The list “AEInspiredTilesAssets” that contains the CSS and JavaScript resources, located in the root site of the site collection.

Almost all the source code for the application is included in a library in the root site of the site collection named “AEInspiredTilesAssets”. You can make changes to the CSS and JS files here to customize how the web part functions.

• WARNING: you can break the web part by changing the source code.
• NOTE: if you break the web part’s source code, you can delete the contents of this library and “deactivate” and then “activate” again the site collection feature. This will refresh the contents of the library.
• NOTE: if you change the source code, any future upgrades/fixes/releases to this web part will likely overwrite your changes.

• 1.0: Initial Release
• 1.1: Fix how jQuery is loaded in noConflict mode. Fix on siteurl/defaultlistname loading.
• 1.2: Added 'default filter value' web part property
• 1.3: Added 'disable show all' web part property, to be used along with 'default filter value' web part property from prior release1