Friday, 20 December 2013

SharePoint 2013 - Displaying Multiple Rows of Links w/ Promoted Links Web Part

If you're like me and needed to have quite a few tiles in your Promoted Links Web Part, this should come in handy.

I've seen options to install custom solutions, and i've seen options to add a javascript file to the web part to force it to go to a new line.

Custom solutions?  meh.

Seperate 76kb javascript file?  meh.

Use what you've been given my friends; and make it simple for your siblings to see how it works.

It's not entirely a simple solution, but when completed I think it is the most elegant/clean solution.  Create two Promoted Links Web Parts underneath each other and use two separate Tile Views to display everything you need.  The only way I could find to create another Tile view was to use SharePoint Designer.

  • Navigate to list in SharePoint Designer 2013
  • Create new view
  • Copy CAML Query from original Tile View to new Tile view.  Copy This Bit (Make sure you keep the old view name, display name, url):
<XmlDefinition><View Name="{#######-####-####-###########}" Type="HTML" DisplayName="Tile2" Url="/Lists/Promoted Links/Tile2.aspx" Level="1" BaseViewID="1" ContentTypeID="0x" ><Query><OrderBy><FieldRef Name="TileOrder" Ascending="TRUE"/><FieldRef Name="Modified" Ascending="FALSE"/></OrderBy></Query><ViewFields><FieldRef Name="Title"/><FieldRef Name="BackgroundImageLocation"/><FieldRef Name="Description"/><FieldRef Name="LinkLocation"/><FieldRef Name="LaunchBehavior"/><FieldRef Name="BackgroundImageClusterX"/><FieldRef Name="BackgroundImageClusterY"/><FieldRef Name="Row_x0020__x0023_"/></ViewFields><RowLimit Paged="FALSE">6</RowLimit><JSLink>sp.ui.tileview.js</JSLink><XslLink Default="TRUE">main.xsl</XslLink><Toolbar Type="Standard"/></View></XmlDefinition>
  • Modify the CAML Query to select only certain tiles (i used the following, place directly after the opening <Query>):
<Where><Geq><FieldRef Name="TileOrder"/><Value Type="Integer">7</Value></Geq></Where>
  • Save
  • Use!

No comments:

Post a Comment