Changing Site Contents from a Grid to a List

This is something that has been bugging me for a while, and something that has clearly been bugging my users (as they keep saying they can never find anything).

The problem with the tile view is that you have to scan both left-right as well as up-down to find the item you are looking for. With a large number of lists this quickly becomes extremely painful to find what you are looking for.

The standard "Site Contents" view .. in all its nasty tile-layout glory

So I thought, how could you turn it back?

Well, the good news is that the Site Contents view is actually all formatted using CSS with unique IDs and classes, which makes it a snip. the sample I've done below is in jQuery (because it is easy to pin a JavaScript file to every page and it works with Office 365 just as well).

So first off we need ourselves a function to reset all of the

function HideTiles() {
  $("#applist .ms-vl-apptile").css({ "display": "block" });
  $("#applist .ms-vl-apptile").css({ "min-height": "50px" });
   $("#applist .ms-vl-appinfo").css({ "min-height": "50px" });
  $("#applist .ms-vl-appinfo").css({ "width": "500px" });
  $("#applist .ms-vl-appimage").css({ "height": "50px" });
  $("#applist .ms-vl-appimage").css({ "width": "50px" });

  $("#applist #apptile-appadd .ms-vl-appimage").css({ "width": "96px" });

  $("#applist .ms-vl-appimage a.ms-storefront-appiconspan").css({ "height": "50px" });
  $("#applist .ms-vl-appimage a.ms-storefront-appiconspan").css({ "width": "50px" });
  $("#applist .ms-vl-appimage a.ms-storefront-appiconspan").css({ "line-height": "50px" });

  $("#applist img.ms-storefront-appiconimg").css({ "height": "50px" });
  $("#applist img.ms-storefront-appiconimg").css({ "line-height": "50px" });
  };

Then we need to actually make sure this gets executed. The problem here is that the Site Contents is rendered on-the-fly using JavaScript so we have to resort to a little Script on Demand to get this working.  

$(function () {
  ExecuteOrDelayUntilScriptLoaded(HideTiles, "sp.ui.allapps.js");
});

Then the only thing needed is to make sure this script gets dropped onto the page and I've done this using a Custom Action (I could have used a delegate control with CSS style tags but that doesn't work in the Sandbox, i.e. Office 365)

<CustomAction
  ScriptSrc="~SiteCollection/_layouts/15/MJH.JSLink/MJH.AddCss.js"
  Location="ScriptLink"
  Sequence="20">
</CustomAction>

So if you set this up it looks something like this.



New formatting (in a single alphabetical list)

Now I admit, the formatting is pretty crude and it could do with a certain amount of smartening up, but the principle is sound and at least the owners of sites with large numbers of lists get an easier to navigate list which is alphabetical, instead of having to scan a page of dozens of tiles.