Advanced Promoted Links

SharePoint 2013 includes a special type of link app called “Promoted Links”, where Metro style icon tiles can be added to a web page, each with a background image. Microsoft use Promoted Links for the “Getting Started” panel commonly seen on the welcome page of a newly created site. Although Promoted Links add a modern and stylish look to a web page, they are not that versatile. This blog post explains how you can install and configure a free alternative to Promoted Links where you can adjust the size, colour and position of individual icon tiles.

  1. First visit the spjs blog site to download the necessary files to get started: http://spjsblog.com/2013/11/13/sharepoint-2013-style-tiles/
  2. Download two files shown:


3. Next download JQuery files shown:
   
Download the compressed, production jQuery 1.11.3 or
Download the compressed, production jQuery 2.1.4 (will not work with IE6, 7, or 8)

4. Add a “Script Editor” Web Part to the SharePoint page. Use the “INSERT SNIPPET” option to add the following code:

<div id=”spjs_tiles_placeholder” style=”margin:10px;float:left;clear:both;”></div>

<link href=”https://portal.contoso.com/sites/HR/SiteAssets/font-awesome-4.4.0/css/font-awesome.css” rel=”stylesheet”>

<link type=”text/css” href=”/sites/HR/SiteAssets/SPJS-Tiles.css” rel=”stylesheet”>

<script type=”text/javascript” src=”/sites/HR/SiteAssets/jquery-2.1.4.min.js”></script>

<script type=”text/javascript” src=”/sites/HR/SiteAssets/SPJS-Tiles_min.js”></script>

<script type=”text/javascript”>

spjs.tiles.init(“spjs_tiles_placeholder”,”MyTiles“);

</script>

You must change the css file href and the script src to point to your local files (SiteAssets).

When you save this code, and reload the page, you should see this banner:


5.  Click to create the SPJS-Tiles configuration list. It will be placed in the same site as you triggered this script. You should be redirected to the list after it has been created. If this fails, you can find the list in “All site content” as “SPJSTiles”.

6.  SPJS Tiles v1.2.2 and above includes support for “FontAwesome”. The above script (step 4) includes reference to local copies of the downloaded FontAwesome files. To download the files go to: http://fontawesome.io/icons/ More details are also provided on the spjs blog site – see http://spjsblog.com/2013/11/19/sharepoint-2013-style-tiles-change-the-size-and-color-of-the-tiles/

The downloaded files need to be added to the site’s “Site Assets” library also:


7.  Ensure the script (step 4) correctly references the URL location of the font-awesome.css added to the “Site Assets” library.

8. My sample SPJS-Tiles configuration list looks like:


Ensure that the Title contains the value added to the script (Text 4 highlighted) e.g. “MyTiles”. The Text appears inside the promoted link tile and includes MUI support, e.g. {“1033″:”English value”,”default”:”default value”}. You can add all the languages you have installed language packs for. Use “default” as a fallback if the language the user has selected has not yet been configured for the tile.

The Description appears when the mouse hovers over a promoted link tile. The Image column references a URL of an image if you optionally wish to display a background image in the promoted link tile. The FontAwesomeIcon column can optionally contain one of the available fonts from the http://fontawesome.io. web site. For example, for a Word Document image, the “file-word-o” class becomes “fa-file-word-o” text in this column. The FontAwesomeStyle determines how the icon appears. It follows the standard format of the HTML in-line Style tag. E.g. color:#ffffff;font-size:70px;padding-left:38px;padding-top:15px;

The BgColor can contain colour names to change the background colour of the promoted link tile. The TileSize determines how large the tile appears on the page. The URL defines where the promoted link tile links to.

The RefreshParent column is set to “Yes” for icon tiles. The Index column determines the order the tiles appear. On my example, the “00-00” defines a heading, “00-01” through to “00-03” defines three tiles on the first row, and “01-01” defines a tile on a second row.


9.  You can create custom promoted links based on how you configure the SPJS-Tiles configuration list. Here’s a couple of examples:

Without headings and with variable tile sizes:


 

With headings and with variable tile sizes:


Here is the SPJS-Tiles configuration list example for the above: