SharePoint 2013 style tiles: Change the size and color of the tiles

Change log
June 8. 2014
Updated to v1.2.4 with these changes:

  • Fixed reversed TileHeight and TileWidth in the description for TileSize. Se below for instruction on how to update the list with the correct description.
  • Added ALT attribute top the image (if you use images for the tiles and not fontawesome).
  • Tidied up the code with JSLint and compressed it using packer by Dean Edwards.

December 7. 2013
Updated to v1.2.2 with these changes:
Added support for FontAwesome.io icons. Either go to the FontAwesome.io site and download the appropriate CSS file, or link it from bootstrapcdn like I have in this example:

<div id="spjs_tiles_placeholder" style="margin:10px;float:left;clear:both;"></div>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<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>

The setup list is automatically updated when you load the updated code. Refer the setup list field description for details on the setup and use of the FontAwesome icons.

November 23. 2013
Updated to v1.2.1 to support SP2013 publishing pages.

This post describes the updated version that has these new features
  • Variable tile size.
  • Custom tile color.
  • Option to refresh parent page when the dialog closes.
Variable tile size

IMG

Variable tile size with headings

IMG

Configuration list

IMG

No tiles configured

IMG

Upgrading from previous version

IMG

Update the configuration list

To force an update of the configuration list, add this to the URL in a page where you have the solution set up

…/site/default.aspx?SPJSTiles:UpdateList=1

*********************************************************************
Let me know if you like the solution, or you have feature requests.

Alexander

176 Comments on “SharePoint 2013 style tiles: Change the size and color of the tiles”

  1. Pingback: SharePoint 2013 style tiles « SharePoint JavaScripts

  2. Could you tell me where you got the images for the tiles from?

    Also, I cant seem to make the tile text have the shaded background, could you explain how to do this?

    Thanks

    1. Hi,
      These images are “borrowed” from SP2013. You find them in the “/_layouts/15/images” folder.

      Regarding the shaded background: I have used the “rgba” CSS3 style which is not available in IE8 and below. You can fix this by adding the following to the class “div.spjs-tile-detailsbox”:

      background-color:#000000;
filter:alpha(opacity=60);
opacity:0.6;

      Please note that browsers supporting both methods will apply both. Remove the rgba color to prevent this. The CSS3 method will be prettier, but the opacity / filter:alpha method works, but also applies the transparency to the text so that the background color bleeds trough.

      Alternately, you can set a solid fall-back color like this:

      background-color:#828282;

      I have updated the CSS file for v1.2 to support the fallback color.

      Alexander

      Alexander

      1. Alexander that’s great thanks… could you host the images somewhere as I don’t have access to a 2013 instance?

  4. Hi! I’ve applied the update but had to again amend the js file on
    line 228
    to
    b.push(“<img style='left: 0px; top: 0px; position: absolute; max-height:"+z[1]+"px;'
    in order for the images to resize with the tile sizes.

    Looks great!

    Did I miss something, though. I'm not clear what BgColor and RefreshParent do, as they don't affect my tiles (although I'm having to use IE8 for this)

    Thanks again
    Bill

    1. Hi,
      I do not think stretching the image to fill the tile is the best option. You should either create an image with the exact size, or use an image with transparent background.

      The reason you do not see the effect of BgColor is because you have stretched the image so nothing of the background is visible.

      The refresh option is used to refresh the parent page when the dialog is closed.

      You find an explanation for all the fields in the field description in the list.

      Alexander

  8. Hi Alexander,
    great job , but if i apply the solution the script create the SPJSTiles for example

    http://spserver2013/sites/TestSite/Mila/Lists/SPJSTiles

    i define some tiles but nothing will show. I noticed that when i return to my HTML Form i have only this message “There are no tiles configured for “MyTiles”. Go to the list SPJS-Tiles to add items” then if i click the link he return this link:

    http://spserver2013/Lists/SPJSTiles

    and not this

    http://spserver2013/sites/TestSite/Mila/Lists/SPJSTiles
    So they continue to show me the same message and no tile…

    “There are no tiles configured for “MyTiles”. Go to the list SPJS-Tiles to add items”
    Any idea?

  11. Hi Alexander,

    Thanks for the excellent solution. I’m running into one problem. I have converted this into a visual webpart whose width is according to resolution of the screen and i dont want to hardcode the size of tiles. i have added another column ‘colspan’ in the list.

    Max number of items to be shown in a row :: 4 is hardcoded.
    after that i am calculating the value of the each tile size by getting the (Webpartwidth/4)*colspan. now i want to calculate the margin between each tiles. how can we do that?

    1. Hi,
      I’m sorry, but when you modify the code it is hard to help you, but if I remember correctly I have 4px margin in the original code. You should look at the section in the code where you find 

      switch(tileSize){
...
...
...
}

      Alexander

      1. Hi Alexander,

        Excellent solution, I am also going through the same issue that Saurabh has reported, I would like to make the tile size dynamic (based on parent element’s size).

        I tried updating the code to use % based width, but that is not helping me.

        I have 4 columns (30%,20%,30%,20%) width and i want the tiles to adjust to the available size.

        Would you be guide me in this.

  12. Hello Alexander,

    I am running into an issue with referencing jquery. The master page I am using already has a version of jquery being referenced. We have a MegaDropDown solution that relies on this being there.

    When I add your solution to the page via the HTML Form web part, I can’t get it to work if I don’t include the line referencing the main jquery library. However, once I did reference it it breaks the other solution. I imagine this is because two jquery libraries are being loaded. I’ve tried pointing the HTML Form web part for the tiles to the same jquery the master page is referencing, and the tiles work, but it still breaks the MDD.

    Is there any way I can get the Tiles solution to use the jquery already being loaded from the master page?

    Thanks,

    Brent

      1. Here is the error:
        Object doesn’t support this property or method – SPJS-Tiles.js, line 11 character 3

        If I run the debugger and continue past the fist error, a pop-up with the following error displays:

        [SJPS Tiles]

        The containter “spjs_tiles_placeholder”, specified in the call to “spjs.tiles.init” does not exist. Please verify that you have a container with this ID in the page.

        Brent

      3. Thanks Alexander. I’ve got an inquiry in with the vendor to determine why the jquery referenced in the master page isn’t available to other content on the page.

        Regards,

        Brent

  13. Hi Alexander,

    First of all let me say that this is a great tool and you deserve all the positive feedback from us.

    I want to remove the overlay that comes up on you hover the mouse but just for one tile. Can this be done?

    Thanks in advance for your help.

    1. Hi,
      You cannot prevent it from showing on mouseover, but you can have it initially off the tile by setting the third number in the 5 number array the same as number 2:
      150,150,150,36,15

      It is of course possible if we modify the script, but it is not an option in this version.

      Alexander

      1. Thank you, fro the quick answer. I will use your advise.
        One more question, the background color for this overlay can it be change individually for each tile?

  14. Hi Alexander, im having an issue with the tiles automatically grouping, if I create a tile row 00-01 size 150, then 4 more tiles row 00-02 at size 75, I was expecting them to group into a bunch of 4 smaller tiles like in your screenshot however they are not doing this and are just showing as one large tile with 4 small tiles stacked on top of each other.

  15. I am having same issue as Umberto above however I moved the list and also made sure “MyTiles” were in the Title field. However, I am still getting:

    SPJS Tiles
    There are no tiles configured for “MyTiles”. Go to the list SPJS-Tiles to add items.

    Any Thoughts?

      1. Hope you got my screen shots yesterday…still having some odd results. Thanks.

  16. Hi Alex,

    Nice Solution. Can we have the images center to each of the tile and for a very small tiles images aligned to top left?

    Thanks
    Sanjay

    1. Hi,
      You can control this by changing the CSS file. Use this to center all images:

      div.spjs-tile-content span{
	text-align:center;
}
div.spjs-tile-content img{
	position:relative!important;
}

      Use this to center a specific tile (by index):

      #spjs_tiles_placeholder_01-00 span{
	text-align:center!important;
}
#spjs_tiles_placeholder_01-00 img{
	position:relative!important;
}

      Alexander

      1. I was able to create tiles on my sharepoint site but unfortunately I can’t manage to arrange small tiles on the same line.
        This was my idea:
        Screenshot: http://postimg.org/gallery/cbs9whqc/91786914/
        But on my share point it looks like that:
        http://postimg.org/gallery/6ey2m5ky/3711360e/
        The tiles index is:
        1 big – 00-01
        2 big – 00-02
        3 wide – 00-03
        4 small – 10-04
        5 small – 10-05
        I have already tried different configurations but without any effect. small tiles always moved to the second row.

        any suggestions?

  17. Arek:
    I don’t think you can do this when the tiles are not the same size within the “square” – look at my example and see how the four small icons are indexed.

    I’ll make a note of this and see what I can do with it.

    Alexander

    1. Hey Alex,

      Any chance you are working on a fix for this? Or had an idea how to fix it? The layout of 2 small boxes under a large is something we would really like to have. It would be great if the tiles filled in the spaces if they fit.

  18. I am able to create tiles using your instructions. However when number of tiles in a row exceeds instead of providing horizontal scrollbar tiles are coming to second row. Is there anything I need to change for this.

      1. Yes, the image is a picture and fills the box. Thinking it needs the alt attribute to be WGAC2 compliant?

        Thanks!

    1. Hi,
      In the CEWP: Wrap the div with ID “spjs_tiles_placeholder” like this:

      <div style="width:800px;margin:0 auto;">	
	<div id="spjs_tiles_placeholder"></div>
</div>

      Adjust the width attribute to fit your total tile width.

      Alexander

  21. Hey Alex,

    Another amazing solution. Thanks for all the hard work. Any chance you can add a var allowing the tiles to use a master list off the site collections root?

      1. This is such a great tool. It would be perfect if you could select lists to connect to so you could have more than one within a site collection. Bravo!

      2. You can have as many as you like in a site collection. You just specify an unique “key” in the function call:

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

        and use the same in the title column in the config list.
        Alexander

      3. Can you apply them on the same page in separate webparts tho? I don’t seem to be able to put two on the same page. All the tiles appear on the same webpart. Thanks 🙂

      4. You must change the placeholder ID and add another placeholder in the page (the original is in the top of the cewp code in the example).

        Alexander

      5. You, sir are a legend. I doff my cap. Works perfectly. I love this tool!

  22. Hey Alex,
    Few bugs for you…
    1. The size description says the format is “TileHeight,TileWidth,OverlayPositionFromTop,TextHeight,DescriptionPaddingTop” but Height and Width are reverse in the code.
    2. the line for building the overlay uses the width 2x rather then width and height so rectangles (taller then wide) end up with a space at the end when the box slides up (z[0] for both in line below, snipped for brevity).

    b.push(“<div class='spjs-tile-detailsbox' … style='left:0px;top:"+z[2]+"px;width:"+z[0]+"px;height:"+z[0]+"px;'
    …

    1. side note:
      If you add..
      position:relative;
      filter: alpha(opacity=100);
      opacity: 1;
      to the overlay header text and desc text classes it will prevent the text from being transparent in IE (makes it easier to read on transparent background).

      1. I can get it to work but the icon is so small, even at 5x, it does not look right. I also cannot figure out how to turn it white. Otherwise really happy with your solution!!

  24. Thanks Alexander
    looking for the ALT update, updated both files(.css, .js) for this:

    Added ALT attribute top the image (if you use images for the tiles and not fontawesome).

    On editing the list item (with background image on tile) I can’t see anywhere to add the ALT attribute – am I missing something?

  26. Hi Alex,

    As always another fantastic solution. Quick Q for you, can you use image sliders with your tiles? or a way to use a sliding tile to display images/pages ?

  27. Hi Alex,

    I’ve got two web parts on the same page showing different tiles (webpart1 shows TilesList1 and webpart2 shows TilesList2). I did this by placing the css and js references in a text file, then placed a CEWP at top of page linking to text file. So that jquery and the css is only loading once. Two HTML Form web parts below the CEWP just contain the appropriate and init code lines; each web part references its own web part and the desired tiles’ key. Is this the correct way or should the div id and init lines also go into the text file?

  28. Once you get it then it works just great – used on SharePoint Online…
    The answers lies in the comments so read the comments…it took me aprox two hours to figure out how it works and now I’m fine.
    Might test and use it on SP2010
    Thanks a lot Alexander you are doing a great job and i’v testet several of your solutions with succes…

    1. Tested on SP2010 on prem even on SSE2010 which include SP 2010 Foundation…works just great…

      How do you link to a programme on the client’s PC ie. can I link to notepad.exe ….tried file:///\\system32\notepad.exe which does not work…

      1. Hi,
        I’m not sure this is possible. You might be able to start Office programs using some sort of ActiveX call using IE, but in general I don’t think this is possible.

        Alexander

  29. Hey Alex, I know you are buried in DFFS 4.0 but when you come up for air I have a request for spjs tiles.

    Can you add a field that allows us to set the color of the slider or css for it?

    One design we like is to make the boxes a solid color and the slider different colors to reflect the category the information falls under. We can do it by adding CSS but it is a pain. It would be nice to be able to just set the color in a field.

    Thanks

    1. Trying to group the request for you.

      Feature Request – Master List. We would love to have all our tile configs in a list off the root (one place to manage them). this also helps since we re use some tile bars over and over and having to copy the data from site to site is a pain.

      Issue – If you try to put 2 boxes under a long box you end up with a space (second small box aligns to column 2 instead of under the wide box).
      box 1 – 300 wide – 01-01
      box 2 – 150 wide – 01-02
      box 3 – 150 wide – 02-01
      box 4 – 150 wide – 02-02

      Thanks!

  30. Is there a way to connect one of these tiles to a list and pul in say the top 3 results or something. Basically looking for a solution to create live tiles. This is soooo close to what I wanted.

  31. Hello,

    First: Nice piece of Code. it’s really well usable! Buut I saw that the neweset version is only uploaded as a minimized version. And I wanted to make minor tweaks to some parts of the code (default values in the list etc.) which is now impossible. Is there the possibility to also upload the the uncompressed code?

    kind regards,
    Christoph

  32. I am receiving an nonconsistent error.

    {spjs.tiles.build]
    Unexpected response from server. The status code of response is’403′, the status text of response is ‘FORBIDDEN’.

    Any thoughts?

    1. Actually, the tiles render as expected. It happens when I click a link that goes to a separate .net app. I am pretty positive it is the .net app trying to access the spjs.tiles.build function when it refreshes the parent page.

      I just wanted double check with you, to see if anyone else has reported the issue.

  35. Awesome tool, thanks for sharing. After setting up, I discovered that if a user is not logged in an error is thrown:

    “[spjs.tiles.build] Access denied. You do not have permission to perform this action or access this resource.”

    Anonymous read has to be turned on for all lists and pages – this is a public site. I’ve double checked permissions and they seem OK (anonymous browsing). Ideas? The webpart doesn’t load/appear if a user isn’t authenticated.

    The error disappears if logged in.

  36. Great solution, the one question I have, is there any way to set the tiles to dynamically resize based on the content area. We have a responsive bootstrap masterpage and it would be great if the buttons could shrink on a smaller format screens.

  37. hey. this is really cool stuff. I took your idea and added to it for my purposes. i’m working on creating a version that does:

    1) uses a DVWP to generate the HTML so everything loads much faster. just need to specify the name of the tile groups in “Parameters Binding” in the WebPart configuration section and that’s it.

    2) lets you specify height/width of each tile along with absolute top and left position. i realize this might be a bit more difficult at data entry but it gives me better control of the tile placement. i can do all sorts of things like have empty/blank tiles in the middle, mix and match tile size/location, and have heading tiles anywhere.

    i’m only coding this to work with IE since that is all my organization uses but it should work on any browser (with some CSS mods maybe).

    let me know if you’d be interested in the final code when i’m done.

    1. Hi,
      Yes, I would be interested in the code. You can send me an email when you are done – I might be able to post the code here.

      You find my email in the “About me” tab in the top of the page.

      Best regards,
      Alexander

  38. Hi Alexander

    thanx for this post im using it alot on a 2013 environment.
    just a quick question,

    1. what is the ideal size for images to use on the tiles ?
    2. maybe perhaps as a new feature you can somehow make this live tiles?

    1. Hi,
      1: Use an image that is the same size as your tile so that it fits correctly . Unfortunately I have not had the time to add support for styling the images like you can with the “fontawesome” images.
      2: I have planned this, but unfortunately, I have to much to do already so I cannot tell when this might be done.

      Alexander

  39. I haven’t tested myself, but I was told the tile buttons do not work with touch screens . Computer used was Surface Pro 3. Could this feature be somehow applied to the tiles?

  40. I still love this tiles solution, I used this on a few sites I manage and everybody wants to have the same 😉

    To be able to place a visible lock on tiles to sites not accessible for all users I’d like to combine the image option with a FontAwesome lock icon. So the FA image floats above the tile image. Can this be done?

    1. Hi,
      The best solution I can think of without using JavaScript is to put the “lock” in the tile label using code like this:

      <i class="fa fa-lock" style="font-size:20px;color:#ffd700;margin-right:6px;"></i>This is the label

      This will give you a tile like this:

      Alexander

  41. Nice one..

    One question. I was able to make Tiles work on one of the page. I wanted to show different tiles on different pages.

    from your example above:
    first row tiles on Page 1
    2nd row tiles on Page 2
    etc..

    I see that we can create views to filer/categorize but it was not clear where these views can be used on sharepoint page to accommodate this requirement.

    1. Hi,
      You use the “key” in the Title field in the tiles list to create different tile-sets.

      Set up a tile-set with the key “TilesForPage2”, and use this code to get those tiles:

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

      Alexander

  43. Excellent solution ! One question — how can you add fontawesome “extras” to the tile?

    for example, I am trying to implement the :

    So I have can icons “pulsate”. But where in the Tile solution can you add :
    fa-heartbeat faa-pulse animated

    Works fine in a test html page but cant get it to work on the tiles. Any hints?

      1. Hi there

        Has anyone got FontAwesome animations to work? Using the latest version but no joy adding the CSS to either the FontAwesomeIcon or FontAwesomeStyle fields.

        Cheers

        Gerry

      2. Hi,
        I haven’t tested this solution in a while, but I remember that I have used a spinning icon in a test. How are you adding the icon?

        Ensure the version of fontawesome you are loading has the icon you try to spin.

        Alexander

  44. Hi Alexander,

    First, thank you for sharing your code, it does great work !

    I’m trying to integrate this in a demonstration Site, and I ‘m stuck about a way to modify the style of the div bloc with the id “spjs_tiles_placeholder”. It have inline style with “margin:10px” that I need to remove.

    I’ve browse both your CSS and JS sources and can’t find a way to tweak it…

    Do you have any hints about this ?
    Regards.

  45. When I use content link in CEWP to add the tiles to my page, it works fine but if I edit the content editor, it duplicates the tiles and it keeps duplicating each time the CEWP is clicked. Do you know what could be causing this on SP 13 online

    1. You must either use a HTML Form web part, or if you want to use the CEWP you must use the Content link option to link to a text file with the code.

      The reason for this is that SharePoint appends script generated HTML when you edit the page and have the HTML in the source code of the CEWP.

      Alexander

  46. Hi Alex,

    Again, thanks for this solution – it works brilliantly and is easy to maintain.

    One last question – is there any way to make the tiles arrange “dynamically” ? The reason i ask is in my company we have different areas that do not share the same size monitors/resolutions. So if I make a really nice layout (8+ tiles across), it looks wrong on lower res screens.

    Is there any way to just list them one by one and have them placed out horizontally (based on the order in the config list) and as you resize your screen, they are just “allocated” dynamically vertically/horizontally? (assuming of course people are using tiles of the same dimensions!)

    Just curious!

    1. You should be able to make them “float” by modifying the CSS for the “li.spjs-tile-li” class in the css file. Try removing “display:table-cell” and add “float:left”.

      Not sure this is all you need to do, but try this first.

      Alexander

  47. Hey Alex,

    I am trying to create variable size tiles by adjusting the size, Infact I did create them and setting their positions according to the given instructions

    according to you Its

    R01 – C05
    R01 – C05
    R01 – C06
    R01 – C06

    and in my case its like

    R00 – C03
    R00 – C03
    R00 – C04
    R00 – C04

    In case of R00 – C03 It updates the content and show tiles properly but in R00 – C04 It does not position that well.
    Please suggest!

  48. Hi Alexander,

    Its me Sean Connor here, I have a few questions to ask. I am using SP JS tiles in my sharepoint application and they are looking good but recently our requirements have been changed so here is the points I am going to ask you about.

    1- How to split one Tile in two section, one representing text with Hover and the second represents with some Image

    2- How to set the Text hover height, I don’t want to hover on whole tile but to the half of that.

    Please take my request in consideration and do let me know If it can be done on urgent basis.

    Sean

  49. Is there a way to change the list name from SPJS-Tiles to something else? Because of the name I’m unable to add any more such tiles. I have tried using your update url but all it does is check for any updates….doesn’t allow me to make any changes to the list name.

    1. No need to rename the list. The “ID” for the tiles is set in the function call:

      spjs.tiles.init("spjs_tiles_placeholder_1","FirstTileSet");
spjs.tiles.init("spjs_tiles_placeholder_2","SecondTileSet");

      Please note that the “spjs_tiles_placeholder_1” and “spjs_tiles_placeholder_2” must be added to the page as the example in line 1 of the CEWP.

      Alexander

      1. I need another such SPJS-Tiles list with other links…..how can I change the title of my already created list

      2. I think you misunderstand how it works. You can have an unlimited number of tile sets in the same list. Just specify the unique name of the tile set in the function call.

        Alexander

  50. Is there a way to add this webpart to other subsites? When I tried it asked to add SPJS-Tiles underneath each site even though all of the src urls referred to the original location.

    1. Hi,
      Unfortunately I have not been able to follow up on this solution lately so this is not a built-in option. To achieve this, you must run the minified code trough this tools to make it readable: http://jsbeautifier.org

      Then replace this line with the correct path to the site where the list is placed:

      From this:

      f = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);

      to this:

      f = new SP.ClientContext("/Sites/SiteName");

      Alexander

  51. Hi Alexander,
    First of all, great work!

    One tiny question.
    Is it possible to have multiple headers in a column next to the first?

    So you will get:

    Header 1 Header 2
    Tile1, Tile2 Tile 3, Tile 4

    Hope you can help me.
    Thanks.

    1. Hi,
      I’m not sure how this would turn out, but try adding a table in the header – like this:

      <table style="width:100%">
<tr>
<td valign="top">First header</td>
<td valign="top">Second header</td>
</tr>
</table>

      Alexander

  52. Hi,

    first, thanks for the script! Second, I just stumbled upon an offering named “Quick Links” in the Office store, which seems to be this same script. Since – at least to me – it looks like a rip off of your work, I wanted to mention it. If, on the other hand, it is a legit offer, just forget this…

    Thanks,
    Jari

  53. Hi Alexander, this is a really useful solution to improve the appearance of SharePoint welcome pages.

    Could you let me know how I can space out the tiles so they do not appear too clustered together? I have been experimenting with the settings in the Script Editor snippet and CSS, but have not worked out how to do this.

    Thanks,
    Martin

  54. Hi alexander,
    I’m trying to use the code, and the tiles come up , but after saving and publishing the draft, the tiles stop responding, the shading doesn’t move and the links are not responsive…
    any thoughts ?

    1. Any errors in the developer toolbar (hit F12 > Console)? Are you using the code directly in a CEWP? – if so, change to a HTML form web part or use the content link option for the CEWP to link to the code from a document library.

      Alexander

  55. Does this work in SharePoint Online? Reason I’m asking I followed your installation and no banner of button to configure the list comes up.

    1. I created SPJSTiles folder with files in the Style Library

    2. The added HTML Form Web Part and copied the code below

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

    No banner or button has come up 🙁

    Thanks

      1. I’m having the same issue, can’t make it work on Sharepoint Online 🙁
        After copying the files to a folder, and adding the script to an HTML Form Webpart (also tried external file with CEWP), I’m not getting any banner to configure the list.
        Any idea/workaround?

    1. Thanks Alexander! Actually it was my bad, just opening the dev console I’ve realized that one path to the script was incorrect.
      Now it is working properly on Office 365,
      Thanks again for the tip and your awesome work!

  57. Hi Alexander.

    Massive fan of your tiles, just wondering if there was any future development with these?

    I’m after making the tiles dynamic. i.e to pass through query string information from the page or Item associated where the tiles are on.

    I look forward to hearing your thoughts

    Kindest regards

    Jack

  59. Hi Alexander

    Does this solution work on SharePoint Online/Office 365?

    I tried it and the tile appears, but the text appears underneath the tile not on top of the tile.

    cheers Roz

    1. Thank you it worked by adding to the CEWP (Content Editor Web Part – for those new to this like me).

      And thanks for the quick reply, much appreciated, it looks fab.

      cheers Roz

    2. Hi Alexander

      Just wondering can I use more than one spjs per site ? I was wanting to add different tile lists on various pages.

      cheers Roz

  61. Yes, you can use as many instances as you like – just use different “placeholders” and “identifiers” in the function call:

    spjs.tiles.init("ID_of_PlaceHolder","Identifier_in_config_list_title_field");

    Alexander

  62. Hi Alex,

    Thanks for posting this article. I am newbie to SP and this article is super helpful. I wanted to check if it would be possible to create multiple set of tiles on the same/different page.

    For example one set of tile on Page1 with 3 tiles a,b,c and Page2 has another set of 3 tiles with d,e,f.

    If yes, could you please share the code for the same. thanks a lot!

    1. Sorry.

      Just now noticed your response on the similar questions.

      When I use the existing ID_of_PlaceHolder of first tile & use a new Title id the SPJS-Tiles config file, the new tiles get appended to the old one though the JS snipped is placed in two different sections of the same page. Could you please let me know if I am doing something incorrectly here?
      Thanks a lot!

      1. Hi,
        The key her is to use a different name in the Title field in the “tiles list”. In my example “MyTiles” is the unique key – change this to for example “Tileset1” and “Tileset2”, and call it like this:

        First set:

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

        Second set:

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

        Alexander

      2. Not that I want to take away from what Alex has accomplished and his awesome tiles solution, however, there is a solution based on his that extends the functionality quite a bit and provides for a user interface for size and placement of tiles. I would give it a try. The developer gives credit to Alex and the information can be found at http://nsptiles.js.org/.

  63. Hey Alex,

    Thank for this great solution and registering me to comment on your blog.

    I implemented your solution and it’s working nicely.
    I would like to know, is it possible for you to add Pagination and OOTB Search feature or just a search box by column so that user can search any specific tile.
    Thanks,
    Rishabh

    1. Hi,
      I’m not sure I understand what you are asking. I don’t have any functionality to add a search box above the tiles, but if you want to adapt the code you are free to use this as a starting point and make your own “branch”.

      Alexander

      1. Hi,
        I was asking about pagination for the tiles and also if we can search any specific tile. I am trying to implement the pagination in the script.
        Thanks,
        RS

  64. Hello
    Thanks a lot for this amazing Tool.
    Is it possible to change the format of Tile text (Fonts,Style,Size)
    I have Big Tiles with very small texts :(.
    I want to change the size of Tile texts.

    Thanks in advance
    A-Ben

  66. Hello Alexander
    is it possible to use different shaded backgrounds to different Tiles?
    I tried to use two placeholdrs, 2 names. and 2 css files with 2 different colors of transparent background.
    It didn’t work and I don’t know why :(.
    all tiles take the last change of the last css.

  67. This is how CSS works – the last instructions added to the page will override the previous styles.

    To achieve this, you must use the ID of a tile to apply the styles.

    Use the developer tools in the browser to inspect the tiles and identify the ID, then add CSS like this to the file “SPJS-Tiles.css” or somewhere else in the page (like a CEWP).

    #id_of_your_tile{
    /* add your style info here */
}

    If you put this in a CEWP you must wrap it in a <style> tag.

    Alexander

  68. Dear all,

    i have user this solution v1.2.4 in Sharepoint 2013 and it works perfectly.

    Now i need to add a few more tiles whose links must come not from the custom list but from a Webservice which takes the current user as parameter. (Each user has a different link array)

    Is there a function we can use to generate tiles dynamically?

    The idea would be to complement the existing tiles from the custom list with a few more from the web service.

    Best Regards.

    1. Hi There,

      i managed to generate tiles dynamically with a bit of work.

      But now i need to make sure that the following code renders all html first before i proceed:

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

      If i add new tiles right after the call to the init method will not generate the tiles and the html is not yet rendered.

      Is the a way to ensure that all the html code from ini is rendered in advance?

      Thank you.

  71. Hi,
    There is not built in support for this, but if you edit the file “SPJS-Tiles.css” and add this snippet you should get an hover color:

    div.spjs-tile-detailsbox:hover{
    background-color:red!important;
}

    Please note that I don’t have this solution installed and therefore haven’t tested this snippet.

    Alexander

  72. I have added this code to a CEWP on my SharePoint referencing the FontAwesome CDN however the icon is not displaying on my SPJS Tile:

    /sites/the-library/SPJS/SPJSTiles/jquery-1.11.0.min.js
    /sites/the-library/SPJS/SPJSTiles/SPJS-Tiles.js

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

    I am using this icon code in the configuration for a tile:
    far fa-archive

    https://fontawesome.com/icons/archive?style=regular

    Any ideas what Im doing wrong??

  74. Does this only work with the ‘Web Fonts with CSS’ solution or will it work with the ‘SVG with JS’ solution? As when I use the CSS solution the Console complains about MIME types not being enabled. However when I use the SVG JS solution I then get a flashing exclamation mark that switches to a question mark.

    Any ideas?

    1. Hi,
      I cannot tell what it is by looking at the picture, but hit F12 to bring up the developer console, and then “inspect” the whitespace to see what it is – most likely a left margin or padding of some sort. When you have identified the element, you can modify or add the class in the file “SPJS-Tiles.css”.

      Alexander

Leave a Reply

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