SharePoint 2013
introduces Promoted Links list and the web part is unbelievable hit with my
client users. Anyone who has seen it wants it in their team/portal sites.
With increase in
usage comes new requirements. And so the requirement did come, for reducing the
size of promoted link tiles just so it fits into a web part zone of a custom
page layout that was being used. User was adding 3 tiles and the third tile was
displayed only partially and a header with scroll buttons was displayed for
navigation. Users would prefer to see full 3 tiles in the row. If there are
more than 3 items in the list, then they would prefer that the tiles be wrapped
to the next row.
Picture below shows
out of the box Promoted Links output. There are 6 items in the list. Notice
that the Green tile is truncated:
To display the 3 full tiles in a row within the web part zone required that the tile size be reduced. Promoted links are rendered using Client Side Rendering Template (CSR): SP.UI.TileView.js. The tile size is hard coded as 150px within the script. The script has the logic to display the header div with the navigation if there are more items than that can fit. Research on the Internet brought up couple of different implementations for wrapping and sizing the tiles. While these posts gave me good lot of information, on analysis, were limiting in one way or other. I wanted an approach that would let TileView.JS render the HTML and later modify that HTML using a CSR Template. My quest resulted in the CSR code below. Using the CSR gives me the advantage of the context, which, I can use to find the WPQ value, and build selectors with respect to that WPQ. This way I do not have to hard code for a WPQ, making the script reusable without having to modify and I can support multiple instances of the list/web part on a single page.
To learn about
Client side rendering with JS Link feature of SharePoint 2013 see: SharePoint2013 JS Link Tutorial.
JavaScript template
code is as below. Notice that JavaScript file does not render the content like,
hmm, may be other CSR JS files that you might have come across. Instead, I want
SharePoint to do the rendering and then manipulate the HTML.
The JavaScript
starts with CSR overrides to take care of MDS enabled sites. MDS feature stores
a list of JavaScript files that are already executed and on subsequent page
refresh MDS will not execute it again. This will cause the web part to look
different from the one when the page was first loaded. For more information on
MDS enabled sites and the effect it would have on JS file, see Sridhara's blog
"RegisterCSR-override on MDS enabled SharePoint 2013 site".
Override
registration section is pretty standard
except that there is no template generating HTML markup. I have a "post
render handler" and that is where all the actions happen. I register for
ListTemplateType of 170 which represents Promoted Links.
CSR JS Template code:
JavaScript template property settings:
Advantage of CSR is the context that is passed along. I make use of the context within "post render handler" to get the WPQ number of the web part. The selectors are built with respect to that WPQ. This way I do not have to hard code for a WPQ, making the script reusable without having to modify and I can support multiple instances of the list/web part on a single page. Selectors are used to get a reference to appropriate elements and adding additional rows if need be. If your requirement is to wrap the tiles to new rows, then stop after the if block (//END: Rearrange the tiles).
About Me: I am an Architect/Consulting Manager at Lighthouse Computer Services - Microsoft Technology Group. I have over 20 years of experience in Software Development and recently wrapped up Architecture/Designing an Intranet Portal with SharePoint 2013 in O365 for a large retail client. Lighthouse Computer Services - Microsoft Technology Group specializes in Microsoft Technology with extensive experience in Information Architecture, SharePoint Governance, Architecture, Design, Implementation, Installation, and Deployment.
Advantage of CSR is the context that is passed along. I make use of the context within "post render handler" to get the WPQ number of the web part. The selectors are built with respect to that WPQ. This way I do not have to hard code for a WPQ, making the script reusable without having to modify and I can support multiple instances of the list/web part on a single page. Selectors are used to get a reference to appropriate elements and adding additional rows if need be. If your requirement is to wrap the tiles to new rows, then stop after the if block (//END: Rearrange the tiles).
The
tiles effect is brought about by overlapping with details box. In my
case I had to reduce the tile size to 140px to fit 3 tiles into a single row of the
web part zone to display all 3 tiles completely. "Tile root" sets up the
spacing between the 2 tiles. By default this is 10px more than the tile
width. And so I have made necessary adjustments to tile root, padding,
margin etc., so the text and the details box fits nicely with the
readjusted tile size. Fire bug or IE developer tools comes very handy to
investigate and make necessary adjustment to get the final result as
desired.
Now
if my JS file is not rendering the content then what is! As I mentioned earlier, I wanted the
tiles to be rendered by SP.UI.TileView.js. The key to make this work is
piping the JS Link files. Edit the Promoted Links web part and set the
JS Link property as below:
sp.ui.tileview.js | ~sitecollection/_catalogs/masterpage/MyJSFiles/PromotedLinksTileManagement.js
Notice the piping, which is supported by JS Link. This will download
and run SP.UI.TileView.js before downloading and applying the custom
CSR JS file for the promoted links web part. In my case, I created a
folder "MyJSFiles" within Master page gallery to store all of my JS
Templates. Change this per your needs and reflect the changes within the script as well.
Enjoy your newly arranged promoted links!
Promoted Links Web Part with custom CSR JS Link:
About Me: I am an Architect/Consulting Manager at Lighthouse Computer Services - Microsoft Technology Group. I have over 20 years of experience in Software Development and recently wrapped up Architecture/Designing an Intranet Portal with SharePoint 2013 in O365 for a large retail client. Lighthouse Computer Services - Microsoft Technology Group specializes in Microsoft Technology with extensive experience in Information Architecture, SharePoint Governance, Architecture, Design, Implementation, Installation, and Deployment.
If I wanted to wrap the Promoted Link boxes based on browser size (via media queries or otherwise), would there be a way to make the "var tilesPerRow = 3;" responsive?
ReplyDeletePaul, my initial thought was that this might not work well because of the way MS is rendering Promoted Links. While writing my reply, I thought of a possibility so I will try this out this week and update here. Interesting thought!
DeleteHi, thanks for the post. I've uploaded the js file to my site collection specifically
ReplyDelete/sites/NS/_catalogs/masterpage/MyJSFiles/PromotedLinksTileManagement.js. I have successfully linked this file to a promoted links list that contains 5 items which are displayed in tile view.
The js file is affecting the display of the promoted link items which is good as it's a sign that the two are linked up correctly. However, instead of getting the tiles to wrap, the js file seems to be causing the tiles to be displayed as list items.
Do you have any idea why this might be happening? I'm using SarePoint Online. Thanks in advance.
Andrew, check if "Server Render" option is checked (Edit page -> Edit Promoted Links web part -> Miscellaneous section -> Server Render.
DeleteLet me know how that goes, may be we can do a screen share and see what is happening. Thank you.
thanks for the reply Suresh. If I uncheck the "Server Render" option I do get a tiled view which is good. The thing is I still get no wrapping.
DeleteOn further inspection I found that in the console I was getting the following error:
ReferenceError {stack: (...), message: "$ is not defined", popStackFrame: function}
I don't suppose you know what's going on here. I was thinking that maybe the firewall at work was stopping the JavaScript files from loading and that's why I was getting this error... Next step is to check if I get the same error connecting from home.
Thanks for the offer of a screen share, I may need to take you up on this.
The $ sign is a jQuery syntax. In the script, I have used JQuery selectors to access the DOM elements. You could add a reference to jQuery in your master page. If your implementation makes use of a different java script library then you could follow that syntax. Hope that helps.
DeleteAndrew, How did it work out for you? Do you need help?
DeleteI seem to have the same problem as Andrew.
ReplyDeleteWhen I am in edit mode of the page, everything is rendered correctly. When I press SAVE to save the page, the list view is loaded. If I press EDIT PAGE again, the tiles are shown. I can't seem to get the tiles to show when I save the page. Any idea?
That is interesting. Have you unchecked the "Server Render" property of the web part?
DeleteRun the browser debugger (and/or Fiddler) and see if "sp.ui.tileview.js" as well as your .js file is coming down successfully.
Justin, we used to have this problem during our implementation of a intranet portal in Office 365. We could not find a reason why it would seem ok in the edit mode but not in the view mode. We used to delete the web part from the page, add it back and configure it again! And that used to work.
DeleteYou might want try that. Have you customized your master page? If so, is other web parts working fine?