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.

  • Martin Hatch

    The Custom Action needs to be implemented as a Feature from a Sandbox Solution, so that the script appears on every page in the Site Collection. The only other way would be modifying the Master Page (which generally isn't recommended, this approach is more modular).

    If you can't/don't have the ability to do Sandbox solutions then the only other route is to add the JavaScript into the Master Page

  • Nigel Price

    Hi Martin

    Where does the CustomAction go ?

    In a script webpart ?

    Thanks

    Nigel

  • Rohit

    where did you add this? There is no way to edit site content page (viewlsts.aspx) , right? how do we inject this script on viewlsts.aspx for sharepoint online? I dint get custom action part.