Thursday, August 22, 2013

Tiles view with CQWP

SharePoint 2013 includes a new list (App) "Promoted Links" that displays links in a tile based visual format.


My goal was to create a Promoted Links list but with some kind of filtering like Expiry on Announcement list. The prompted links doesn't provide with this option in the web part settings
or in the Tiles view:

I used the good old Content Query Web Part (CQWP) to achieve the tile view. The following are the steps:
1. Create a List with title, expiry, description and image columns
2. Update the ItemStyle.xsl file with following sample code: (fix the inline styles)



4. Update your stylesheet with below


5. Insert a CQWP, select your list, the above Item Style set your expiry filter and update the presentation fields.

You get the following:


3 comments:

  1. which style sheet does step 4 refer?

    ReplyDelete
  2. @Peter: your custom style sheet.

    ReplyDelete
  3. I have implemented the modifications and am able to show the tiles in the CQWP but the images are not displaying. The img src value is being populated correctly. Here is a snippet of the rendered page source (beginning tags modified to allow pasting):

    [div style="width: 150px; height: 150px;" aria-haspopup="true" class="ms-tileview-tile-content">[a href="https://myServer/sfmVRS/">[img height="150" class="ms-positionRelative" style="visibility: visible; right: 219px;" src="https://myServer/SiteAssets/Site%20Images/Checklist.png, Checklist Image" />

    ReplyDelete