Personalize Your SharePoint Home Page with Masonry

Posted by: Mark Rackley on May 03, 2016

Personalization, we get requests for it every day. “I only want to see the content that *I* care about.” “I don’t want my Home Page cluttered with information that doesn’t relate to me.” It should be simple? Right?

There’s actually quite a bit you can do to personalize a site in SharePoint. Some personalizations are more difficult than others. You can Audience web parts so that only certain people or groups see them. You can also Audience navigation. This works well, but can be a pain to maintain, especially if you have a lot of different audiences to contend with.

If you want to go for something more powerful, you can use development techniques to programmatically determine who the current user is and what groups they belong to and then take some action based upon that information. This method, however, can cause performance issues and can be difficult to maintain over time.

Search and Office Graph are other options to help you surface information to users that is more personalized and relevant.

The amount of personalization you can achieve really depends on your time, budget, and skillsets.

Which bring us to this blog post.

Over the years I’ve created a lot of blog posts to enhance SharePoint and make it more usable, and it seems every time I go to speak at a conference that a few people will come up to me and tell me how grateful they are that I created this content. I get it, budgets are tight. People have work that needs to be done and they don’t really know where to begin. One of the awesome things about SharePoint though is you can build out little chunks of functionality that add a lot of value, sometimes without a lot of effort. So, as I get an idea here or there I’ll turn it into a blog post that walks people through using it. Some of my most popular are:

And I thought, why not do something around personalization and another one of my favorite libraries: Masonry.

In this blog we’re going to create tiles that you can use as links to other pages, sites or external links.

clip_image002_thumb

You may be thinking “Hey, that looks a lot like promoted links, why not just use promoted links?” Great question! Well, Masonry gives us a few advantages over using promoted links. Among them are:

  • Dynamic Tile sizes
  • Responsive layout
  • Multiple rows of tiles (without customization anyway).
  • More visual options

Plus, you can use Masonry with a Content Search Web Part or Display Templates making it much more multi-purpose than promoted links.

The Solution

So, let’s get to it. The process to implement this solution is as follows:

  • Create a List called PAITApps
  • Within this list create the following fields:
    1. Link as a HyperLink field
    2. Picture as a Picture field
    3. Order as a Number field
  • Create entries in this list for the different pages/sites you’d like to link to.
  • Upload the following script to your Site Assets library:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/masonry/4.1.0/masonry.pkgd.min.js" ></script>
<script type="text/javascript" src="//markrackley.net/scripts/PAITGroup.AppLauncher.1.0.min.js" ></script>

<link rel="stylesheet" href="//markrackley.net/scripts/PAITGroup.AppLauncher.css">

<div id="PAITApps"></div>

<script type="text/javascript">
$().PAITGroupAppLauncher({
tileWidth: 100,
tileHeight: 100,
showTitle: true
});
</script>


  • Create a page or use an existing page and open the page in edit mode
  • Add a Content Editor Web Part to this page where you want the tiles to appear
  • Link the Content Editor Web Part to the script you uploaded to your Site Assets Library

You should now see the Masonry Tiles on your page. Pretty simple, eh?

Adding the Personalization

The next step is to add the personalization so that users only see the tiles that belong to him/her. To accomplish this, apply item level permissions to the list items in the PAITApps list.

Now, I’m not typically a fan of item level permissions nor do I encourage their use. It’s too easy to encounter maintenance nightmares or suffer from reduced performance. But in this instance where your list is much less likely to have a lot of entries it should fit out needs nicely.

After applying item level permissions so that only users or groups have access to the specific tiles, users who view the page will only see the tiles that are relevant to him/her.

Confused?  No need to be, the following video will walk you through the entire process:

As you can see, adding a touch of personalization to you SharePoint page can be as simple as creating a list and adding a web part to a page. Want to get even more out of SharePoint experience? Contact us today at info@paitgroup.com and see how we can help you take your SharePoint to the next level.

 

Topics: SharePoint, SharePoint Solutions

    Recent Posts

    Categories