This project has moved and is read-only. For the latest updates, please go here.

Show Tiles with rows and columns with text info

Apr 17, 2014 at 3:32 PM
Hi All,
       I have 9 tiles and i required to show the tiles in rows and columns which I am able to achieve that with below snippet of jquery script.But i required to show information as "outlook"  before third row as mentioned in below example .Can any one help me how can I achieve this 
Tile1 Tile2 Tile3
Tile4 Tile5 Tile6
Tile7 Tile8 Tile9
<script type="text/javascript" src=""></script>

<script type="text/javascript">

$(document).ready(function () {


// Update this value to the number of links you want to show per row

var numberOfLinksPerRow = 3;


// local variables

var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";

var post = "'></div></td></tr>";

var numberOfLinksInCurrentRow = numberOfLinksPerRow;

var currentRow = 1

// find the number of promoted links we're displaying

var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;

  // if we have more links then we want in a row, let's continue

  if (numberOfPromotedLinks > numberOfLinksPerRow) {

    // we don't need the header anymore, no cycling through links

    $('.ms-promlink-root > .ms-promlink-header').empty();

    // let's iterate through all the links after the maximum displayed link

    for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {

      // if we're reached the maximum number of links to show per row, add a new row

      // this happens the first time, with the values set initially

      if (numberOfLinksInCurrentRow == numberOfLinksPerRow) {

        // i just want the 2nd row to


        // create a new row of links
      $('.ms-promlink-root > table > tbody:last').append(pre + currentRow + post);

        // reset the number of links for the current row

        numberOfLinksInCurrentRow = 0    }    
// move the Nth (numberOfLinksPerRow + 1) div to the current table row

    $('#promlink_row_' + currentRow).append($('.ms-promlink-body > .ms-tileview-tile-root:eq(' + (numberOfLinksPerRow) + ')'));    
// increment the number of links in the current row

    numberOfLinksInCurrentRow++;  }



Apr 17, 2014 at 6:30 PM
As with your other thread, this isn't an SPServices thing at all. I'd suggest using a different forum.

That said, why not just use fixed markup?