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!

Wednesday, 11 December 2013

SharePoint 2013 - Hide Root Node Link in Global Navigation using CSS

The other solutions I've found regarding this involve javascript/jquery.  Was unable to find any CSS that resolves the issue nicely.

This seems to have resolved the issue for me so far without compromising any other areas of the site.  It hides the initial link and then goes back to displaying the rest of the navigation as per normal:

<style type="text/css">
.ms-core-listMenu-horizontalBox li.static > a{
display: none !important;
}
.ms-core-listMenu-horizontalBox li.static > ul a{
display: block !important;
}
</style>