SharePoint 2013 style tiles

Change log
November 19. 2013
Updated to v1.2. Read this article for details.

IMG

If you like the “Promoted Links” tiles in SharePoint 2013, you will love this solution. It lets you create such tiles in SharePoint 2010 and 2013 from a custom list. The text, description, link and even the image can be set up with support for MUI to have it adapt to the selected language. The tiles can be positioned in multiple rows and columns to give the layout you want, and there is a separate CSS file if you want to tinker with the colors etc.

How to set it up

First you need to get the files “SPJS-tiles.css” and “SPJS-tiles.js” from here. Then download jQuery from here. Add these files to a folder created in SharePoint Designer, or to a document library where all users have READ ACCESS.

Add a HTML Form Web Part to the page where you want to have the tiles, and add this code to the source editor:

<div id="spjs_tiles_placeholder" style="margin:10px;float:left;clear:both;"></div>
<link type="text/css" href="/Scripts/Tiles/SPJS-Tiles.css" rel="stylesheet">
<script type="text/javascript" src="/Scripts/Tiles/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/Tiles/SPJS-Tiles.js"></script>
<script type="text/javascript">
spjs.tiles.init("spjs_tiles_placeholder","MyTiles");
</script>

You must changer the css file href and the script src to point to your local files. Do not refer the files from spjsfiles.com as this server is not rigged for serving scripts live.

Argument to the function “spjs.tiles.init”:
The first argument refers to the ID of the placeholder where you want the tiles to be placed. The second argument refer the the Title field in the setup list. You use this “keyword” to filter out the tiles you want to show in this instance. If you omit this argument, you will retrieve all tiles.

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

Click the button to create the 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 find the list in “All site content” as “SPJSTiles”.

The configuration list for my example image looks like this:
IMG

MUI support

The field description in the configuration list describes the format for enabling MUI support:

{"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.

Leave questions and comment below.

Alexander

108 Comments on “SharePoint 2013 style tiles”

  1. Alex,

    Thanks for another great new tool

    I had to add max-height:150px; to line 131 of the js, though to get my tiles to match the size of the div. Let me know if there is a better way (css) of dealing with this

    Cheers
    Bill Young

    1. Hi,
      Thank you for the feedback – is it the image tag you set the max-height on? this is line 131:

      b.push("<img style='left: 0px; top: 0px; position: absolute;' onerror='spjs.tiles.imgError(this);' alt='"+title+"' src='"+image+"'>");

      Alexander

  3. Hi,
    Sorry, but this code uses the JCOM and this is not available in SP2007.

    The code could be adapted for SP2007 but it would require a total rewrite.

    I’m sorry, but I do not think I can take the time to do this.

    Alexander

  4. Hi Alexander,
    I use promoted lists a lot. This is exciting! As follow up to Bill Young’s comment above, can we configure the size of the tiles? e.g. make the smaller to take in more tiles within a row? Also can we have auto wrap so the tiles wrap to the second row automatically based on screen size?

  5. Hi Alexander,

    Excellent solution, I’ve just been testing it and there’s one problem for IE8 and below.
    The onmouseover semi-transparent background doesn’t display on IE8 or IE7.
    IE9 and Chrome works fine. The Text moves up but there is no background color.
    Any ideas what I need to add to get it working for IE7+?

  6. Pingback: SharePoint 2013 style tiles: Change the size and color of the tiles « SharePoint JavaScripts

  7. Can’t get this to work at all. Adding your code to an HTML Form Web Part returns an error stating that SPS “Cannot retrieve properties at this time.” Dropping the code directly into a page in Designer yields nothing on the page (jQuery is present and functioning and the div appears in source code). In either case, SPJS-tiles.js is ‘running’ as I can get it to send comments to the console.

    2. Hi Ezra, if instead of adding a HTML Form Webpart, you press Insert but then choose Embed Code and drop it on the page there, it works partly, the list will be created you can populate it etc but the hyperlinks don’t work for some reason (still working on that one :P)

  8. Hi

    On SP 2010 Foundation I have the code working, it created the list, the images display and I can hover over and click on them, however clicking on the link doesn’t do anything. Any ideas what ive done wrong?

      1. Hi Alexander

        It was down to the fact that I had configured the item on click to open in a dialogue. Once I changed this to new window or current window it worked fine, I determined that it works fine whilst opening in a dialogue only when the link is to a list or library view, if its to a page/web part page then it needs to be opened in a new/current window.

        Thanks

      2. Hi I’m getting error as SCRIPT5009: ‘spjs’ is undefined
        Private Areas.aspx, line 579 character 1.
        This is after I added the script to HTML form webpart.

  11. I have a problem.
    I have a few entrys in SPJS-Tiles newly created list but on my page still standing info: There are no tiles configured for “MyTiles”. Go to the list SPJS-Tiles to add items.
    SPJS-Tiles link in this message leads to root site instead to list on this subsite.
    What is wrong?

  12. You mention that “The first argument refers to the ID of the placeholder where you want the tiles to be placed”.
    Where do you get the id that should be listed here. I’ve tried a number of things, but only the web part title shows up. I feel like I’m missing something really simple. Here’s what I have and I never get the screen that tells me that the list hasn’t been created.

    spjs.tiles.init(“spjs_tiles_placeholder”,”Benefits”);
    </script

    1. Hi,
      This is the id attribute of the container you want the tiles appended to. By default this is a div in the top of the code example.

      You might have something wrong in the setup – try hitting f12 to bring up the developer console and look for errors in the “console” tab.

      Alexander

      1. Thanks for the response Alexander. I was able to get it working last week doing exactly that. I was adding the wrong web part id. User Fail.
        This works great.

  13. Hi,

    when I insert the code to HTML Form Source Editor, the HTML Form webpart won’t allow me to save the changes but says “property not available”. Saving page and reloading page does not work.

    I’m doing something wrong, but I do not know what.

    Code I’m inserting is:
    spjs.tiles.init(“spjs_tiles_placeholder”,”MyTiles”);

    The script files are accessible with above urls.

    Any help appreciated!

    1. Hi,

      previous post code was missing the script-parts… but if I put the code on snippet the “yellow dialog” opens and prompts for list creation, I create a list and input one item. Still, the tiles are not visible but an error message “There are no tiles configured for “SPJSTiles”. Go to the list SPJS-Tiles to add items”.

      I noticed the similar previous post, trouble for me is that I can not input the code to HTML Form webpart, the webpart will not save the changed code. I have also tried external file with CEWP but no success.

      -Kari

      1. Hi,
        Using a CEWP and the content link option should work. Ensure you have the “key” “MyTiles” in the title field in the tile configuration list.

        Alexander

  14. Tried everything, but cannot done the first step. I have tried CEWP, Insert code, but no yellow button the generate the list.

    I am using SP 2013 on-premise SP1

    1. Hi Dennis,
      As we figured this out by email, I deleted most of our conversation her to keep it tidy.

      For others experiencing the same error: it was caused by using the wrong URL to the script file.

      Alexander

  16. Thanks for the great tool. Can we make webpage/webpart page open in a dialog instead of new/current window. Right now, if i try opening anything other than list/library in a dialog it throws an error. Any help appreciated!.. Thanks!

      1. It just says an ‘Unexpected error has occured’ with a correlation id… We dont have access to view the logs here.. so i am not sure whats going wrong when i open it in a dialog..

      2. Are you sure the URL is correct? – what happens if you target it to “Current window” or “New window”? with the same URL?

        Alexander

      3. The url is correct. It opens on a new window or current window. Only if it is a dialog, it throws an error.

      5. Hello, I recognize this error (Unexpected error has occured’ ) when use dialog and link to a SharePoint (.ASPX) page. I think this has to do that you can’t use an .ASPX page in an iframe. I have the same experience.

  17. I simply CANNOT get this to insert. When adding an HTML Form Web Part, clicking on Edit Source in the Ribbon, replacing the highlighted text with the above snippet, making absolutely sure the js paths are correct, I STILL get the “some of your code was stripped out, try using the Embed option” error message… I’m stuck with flipping ugly link promotion layout….

  18. I was able to successfully do everything and it works like a charm… with only one caveat… Every time I refresh the page where I added my custom tiles, the order gets randomized. Even if I put an index to them, it still goes wherever they want. I have tried setting the index in different ways: 11, 01-01, 1-1 and non of them work. Do you know what could be happening?

    Thanks

  19. Thanks a lot for this great solution it works like a charm both on SP2010 Foundation on prem and on O365/SharePoint Online Plan E3.

    Would it be possible to link to a program on the clients computer like notepad.exe, psr.exe or even Word.exe ?

  20. This is great, thank you!

    A newbie question: How can I ensure that the tiles are always centered on my page? They appear to be left justified.

    Thank you!

  22. I love this solution! Thanks for posting. I also had the problem where it would point to the root of the site collection despite it being placed in an HTML form web part. However, creating a CEWP that points to a text file did the trick!

    Is there’s a way to update the tile background to be an image – a dynamic one retrieved from the URL provided in the SPJSTiles list?

    Thanks,
    Helen

  23. Thanks for the solution
    I have it all working and the tiles show however the mouse over functions do not work. The text that should slide up is visible below the tile on page load and stays there even on mouse over.

    I have jquery 2 included as part of a wider farm solution and i have tried adding the 1.x version as per your code. Any ideas on what it might be?

    1. Hi,
      I’m not sure, but this may be an issue with jQuery v2.x. I would not recommend loading both jQuery v1.x and jQuery v2.x in the same page though.

      Do you see any errors in the developer console (hit F12 > Console)?

      If you use the CEWP and paste the code directly in you might get strange results when you edit the page so always use the content link option, or a script editor web part (in SP2013).

      Alexander

  25. Alex,
    Get feature by the way. The promoted links work good, however the tiles are way to big for most sites.
    One feature I would like to see duplicated is the ability to security filtering by audience. Is that possible?

      1. I didn’t target the webPart, but I enabled Audience targeting on the SPJS-Tiles library and added an audience to a couple of tiles, but they still show up on the page for people not in the audience group.

      2. Well, then that will not work. I’m not sure if it is possible to handle audience with JavaScript, but from your test it seems that audience targeting is not actually access restrictions, but rather a filter.

        Alexander

  27. First, thank you for making this beautiful solution available.

    I’ve only just started working with Sharepoint, so I’m probably overlooking something obvious. I’ve got it working on Sharepoint online, with one drawback: it only shows the tiles in page-edit mode, not when I’ve saved the page. What am I doing wrong?

  28. Hi,
    Thank you for the solution, it works beautifully.
    However I had a small bug in the version I downloaded – SPJSTiles.js v1.2.2.
    When it shows the message that no tiles are available, the “SPJSTiles” link points to “/Lists/SPJS-Tiles” thus redirecting the user to the root site and not the current sharepoint site in the collection.
    I have modified it as such: _spPageContextInfo.webServerRelativeUrl +”/Lists/SPJS-Tiles” to make it point to the current site.

    2. It look like v 1.2.4 tried to fix this but I get the same result on all versions (1.2.2 and 1.2.4). The list still points to the root site and cannot find the list on the current site collection?

      1. Hi,
        This issue has not been fixed in v1.2.4, but all you have to do is to go the the site where you set up the solution, go to “All site contents” and you will find the list “SPJS-Tiles”.

        Alexander

    3. Hello Lubi,

      Can you tell me where you made this modification? The version I am working from is the latest (Compressed). I figure you made the change in the js file but I may have to revert to the uncompressed version in order to make the modification(?).

      Thank yo u!
      Tim

      2. Hi,
        Sorry, but I currently cannot find time to look at the code, but isn’t this a problem only on the first setup? – if so, just go to all site contents and find the list there.

        Alexander

  30. Nice tool Alex,
    I set it up and it works except when I click on a tile I get this error message “This content cannot be displayed in a frame. To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame. What you can try: Open this content in a new window” Then when I click on Open this content in a new window I get another error “Sorry, something went wrong. An unexpected error has occurred. when I click on “Go back to site” it then takes me to the intended site. Any idea why?

    Thank you,
    Rene

  31. Does the code that creates the SPJS_Tiles list also change the site collection to force the “Title” field to be required? I know it’s required for the list but wondering how far up it pushes this required field….

  32. Hi Alexander

    Thank you so much for your efforts on this. It worked in my SharePoint 2010 environment, had the same issue as one of the guys in understanding the bit about setting the ID – but got there in the end. We are in the process of moving to SP 2013, so I am making a few updates on our SP 2010 to get the users in the mood with this UI metro style !!!

  33. Hi Alexander, thank you so much for your hard work on this and for making it available. Much appreciated!!

    Please can you give me some guidance on how to add the FontAwesome icons to the SPSJList?

    What is the syntax for adding an icon to the list?

    Thanks
    Gary

    1. Hi,
      Look at this article: https://spjsblog.com/2013/11/19/sharepoint-2013-style-tiles-change-the-size-and-color-of-the-tiles/ in the change log for v1.2.2 you find how to include the fontawesome css file. To use the icons, just enter for example “fa-car” in the “FontAwesomeIcon” field in the config list.

      You might have to update the config list if you do not have this field in your list. Look at the linked article to learn how to update the list.

      Alexander

    1. Hi,
      When calling the script, the second parameter is used to filter the returned items by the Title of the list items – this code will pull in tiles where the title is “MyTiles”:

      spjs.tiles.init("spjs_tiles_placeholder","MyTiles");

      Alexander

  35. Hey.

    First of all – great solution. I have one problem with using fontawesome icons. When setting them up, the icon is placed in top left corner of a tile – how could I place it with a margin to the top and to the left, without affecting pictures, that I use in some of the tiles?

    If the icon is white, and the background is white, it has no border.

  36. Hi,

    this is a very great idea and it works very great.

    I have one question:
    how it is possible to make space within one row?

    for example:
    [ ][ ][ ][ ][ ][ ] [ ][ ][ ][ ][ ][ ]

    [ ]= One Tile.

    Is this possible?

      1. Hi,
        You should be able to “inspect” the tile you want to have the margin around using the developer tools (hit F12).

        When you have the ID attribute of the tile, you can add CSS like this (in a CEWP in the page):

        <style type="text/css">
#spjs_tiles_placeholder_03-01{
   margin-right:50px;
}
</style>

        Hope this helps.

        Alexander

  37. Hi Alex
    This is a brilliant solution and works really well – thank you! One question: the tiles are being displayed vertically, how do I get them to display horizontally?

  38. Thanks a lot for the post Alexander. it works great for me with windows authenticated users. But its not working for anonymous users. It would be great if you can provide us some pointers to make it work for anonymous users

  40. Pingback: Blog. tecivo Limited // Jason Dorsett. IT Consultant – system design, build, project management and technical support - based in Norwich, Norfolk.

  41. Hi Alexander,

    is it possible to have one configuration SPJStiles list centrally at root site (site collection) and share it for all subsites?

    Thanks

    Michal

  42. Hi,
    I haven’t had time to look at this one lately, but I have tried to add support for setting the baseUrl in v1.2.5.

    Read the change log, and PLEASE NOTE:
    I have written this freehand and it has not been tested so it might need another look if it won’t work.

    Alexander

  43. Hi there

    Placing the code snippet in a Content Editor Webpart as a linked file on the 2013 server running under the 2010 interface I get the SPJS Tiles box to appear asking for the SPJS-Tiles list to be created. Clicking on the button to add the list I get an error in the console

    SCRIPT5007: Unable to get property ‘get_web’ of undefined or null reference
    File: SPJS-Tiles_min.js, Line: 201, Column: 9

    Trying it on the 2013 staging server with the same set up I get the error

    SCRIPT438: Object doesn’t support property or method ‘set_formDigestHandlingEnabled’
    File: sp.js, Line: 2, Column: 11933.

    In both cases the list isn’t created .

    Any ideas?

    Thanks in advance

    Gerry

    1. I got the same error as Gerard Graham, with this additional detail (site name sanitized):

      stack “TypeError: Object doesn’t support property or method ‘set_formDigestHandlingEnabled’\n at SP.ClientContext (https://MYSITE/_layouts/15/sp.js?rev=yHHzNc0Ngyb9ksRsrUasMQ%3D%3D:2:11933)\n at spjs.tiles.addOrUpdateList (https://MYSITE/SUBSITE/SiteAssets/SPJS-Tiles_min.js:200:9)\n at onclick (Unknown script code:1:1)”

      I was able to resolve it by using the 1.2.4 version of SPJS-Tiles instead of v1.2.5. Once I did that, the only issue I had was the link to the SPJS-Tiles list when you have no entries was to my top-level site instead of the subsite I was using. I just navigated to the list in Site Contents instead to add my entries and everything worked fine.

  44. Pingback: SharePoint Tips…Extending number of Promoted Links tiles shown – tecivo Blog

  45. I’ve searched through the forum but haven’t found something specific to my problem. I have these tiles working well with Chrome and Firefox but nothing appears at all in IE11. I’ve used the debug utility in IE and there is nothing that is coming up in the console screen. By all accounts it should be working but the webpart is just blank. Scripts are also enabled in IE. Any ideas?

    1. Correction – I do have the following errors in IE 11. But none in Chrome or Firefox and both of those are working fine:

      SCRIPT1010: Expected identifier
      File: jquery-3.2.1.js, Line: 3887, Column: 4
      SCRIPT5007: The value of the property ‘$’ is null or undefined, not a Function object
      File: Home.aspx, Line: 1, Column: 208

      1. Hi,
        jQuery v3.x is not supported in IE if this is running in compatibility mode. Maybe you should load the 1.x branch of jQuery to see if this is the issue?

        Alexander

  47. That worked! Rollover graphic is a bit different than in the other browsers (shows gray) but will continue to play with it. Thanks very much!

  48. Hello Alex,
    I recently found this solution as a very exclusive way to show people on SHP 2013 promoted links.
    1. question – If I want to add several web parts on the same page to show different tiles, it does not work because it’s linked to the same list of SPJSTiles in the Site content.
    Is there a way to do it?
    Thank you
    Steo

    1. Yes
      When calling the script, the second parameter is used to filter the returned items by the Title of the list items – this code will pull in tiles where the title is “firstSetOfTiles”:

      spjs.tiles.init("spjs_tiles_placeholder1","firstSetOfTiles");

      To add more webparts you must change the arguments like this:

      spjs.tiles.init("spjs_tiles_placeholder2","secondSetOfTiles");

      Ensure you have use different

      elements as placeholders for spjs_tiles_placeholder1 and spjs_tiles_placeholder2.

      Alexander

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.