Adding rows to SharePoint 2013's Promoted Links

I have to say, I quite enjoy the ... a hem ... Windows 8 style that SharePoint 2013 brings with the Promoted Links list.  I do however feel it can get a little dull, rather quickly.  Here is a little something I put together to jazz it up a bit. 

 

I'm using the Promoted Links as a Navigation tool and to give my Home Page a little style. 

 

So I've created an out of the box Promoted Links list in SharePoint 2013.  I added some links, 9 to be exact, with some nifty background images.  Here is what i have:

 



Now let's add a web part to a page and see what we get out of the box:

 

 

So with the space I've allocated in my page layout for these links, I can only display about 5 tiles wide.  The web part was nice enough to give me a little scroller at the top so I can see the rest of the links.  It cycles through the next 5 links:

 

Not bad... but not what I'm looking for.  Especially for a navigational tool, it isn't very user friendly.  What I'm looking for is to display all of my links, but to have multiple rows within my web part.  So with a quick view with our Developer Tools, we can see HTML the structure that the web part is rendered with:

  

Looks pretty reasonable; looks like all we have to do is add an extra Table Row to the main table, and move some of the Promoted Link DIV's to that new row.  Whip up a little jQuery that looks something (or exactly) like this:

 

$(document).ready(function () {

 

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

var numberOfLinksPerRow = 5;

 

// 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

        currentRow++;

 

        // 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

    $('.ms-promlink-body > .ms-tileview-tile-root:nth-child(' + (numberOfLinksPerRow + 1) + ')').appendTo($('#promlink_row_' + currentRow));

    // increment the number of links in the current row

    numberOfLinksInCurrentRow++;

  }

}

});

All you have to do is change the value of numberOfLinksPerRow to the number of links you want to display on a row, and your good to go!

 

This is what my page looked like when I was done:

 

 

Enjoy! 

Getting ready for SharePoint 2013 with a little "napa"

I, probably very much like most of you reading this, have been rather preoccupied by the latest release of Microsoft's of SharePoint Server 2013 Preview or the Office 365 Preview. 

I've got my Office 365 2013 Preview account setup.  SharePoint is up and running and now I want to start creating some Apps!  But How?  We need to add the "Napa" app to our SharePoint environment. 

If you Search for the Napa app on your Pre-Provisioned SharePoint Site Collection, you'll find it, but you won't be able to add it.

 

The "Napa" App needs to run on a developer Site Collection.  So let's log into our O365 Preview Admin Portal and provision us a new Site Collection. 

Click New and add a new Private Site Collection.  we need to provision a "Developer Site" collection for the Napa app to be available for install.  Configure your Site Collection and provision it.

Once it's complete you'll see it in your Site Collection list:

Let's navigate to the site collection.  You'll see the Start page is a bit different than a team site.  Click on the Metro "Get tools to build apps" Tile.

You should get re-directed directly to the "Napa" Office 365 Development Tools app.  It's Free! So let's Add It.

Trust It... It's Microsoft why wouldn't you?

Once it's installed you will see it under your Site Contents.  Click on it to start building your first app.

There are 4 different types of Apps you can build.  I, obviously, choose an App for SharePoint.

You get presented with a Web Based source code editor, with a pre-defined project shell and some default code snippets. 

Now your off to building your first SharePoint App, and so am I.  However that's for another post.  Till then, happy SharePoint previewing!