Tag Archives: design

Showing users’ profile pictures in a SharePoint list

Special thanks to Joann for the question!

A common use case is to have a list of people in a list in SharePoint, maybe they’re members of a project, contacts for a department, your favorite people to talk to, whatever it may be, you have a list. This example is a listing of my teammates:

slalom people list

Now I’d like to spice it up a little and see their pretty little faces. In my example, I’m just using the Title field to store their names (well, the Title field renamed to Name, regardless, same scenario). This won’y fly. We need to add a people picker to the list. I added one called Account Details. You could name yours Photo, Pic, Face, etc.

Add a people picker to the list, and add the correct values:sharepoint list with names

You can edit this view in Quick Edit mode, and copy/paste the Name column into the Account Details column.

Now let’s configure it to show their picture! (yes you could’ve done this with the above step, but for illustration purposes I add more steps)

When you edit the People Picker Field, check out the Show Field property.

edit people picker

See the few options at the bottom? Picture Only, select one. In my example, I selected 72×72

people pictures in sharepoint

BLAM! Profile pictures!!

Now I’ll let my team know I’m sharing their pretty faces.

‘Til next time, Happy SharePointing!


Bringing SharePoint Public: Using SharePoint Online for your web site

I am very pleased to share that I will be presenting at this month’s Boston Office 365 user group, on August 21st.

I will be sharing about using SharePoint Online public website, which you get with your Office 365 tenant, to host your web site. We’ll cover some techie stuff but I will mostly cover the more important aspects of a public web site, like search engine optimization, mobility, performance and more.

More details on the Boston Office 365 User Group web site. Hope to see you there!

Before you make SharePoint Public – 2 more times

I wanted to quickly share on two more options for you to listen in on my session Before you make SharePoint Public.

SP24 is reairing all of their sessions, this Wednesday and Thursday, May 14th – 15th. My session will be run Wednesday night, at 9pm EST. I hope you can make it. Check out the wrap up from my first session here.

I am also presenting this session live at the Connecticut SharePoint User Group on May 15th. CTSPUG is hosted at 100 Pearl Street in Hartford, CT, check out their site for more details, www.ctspug.org

I hope to see you there!

24-Hour Devathon for a Cause

I am very proud to share that our team at Slalom is taking 24 hours out of this beautiful New England weekend for a SharePoint/Office 365 dev-a-thon to benefit local non profit Junior Achievement of Northern New England.

From www.janewengland.org:

The mission of Junior Achievement (JA) is to inspire and prepare young people to succeed in a global economy. Using hands-on experiences, JA helps to prepare young people for the real world by teaching skills in financial literacy, workforce readiness and entrepreneurship. Junior Achievement trains community volunteers to deliver curricula, and to incorporate the sharing of personal and professional experiences with students. The hallmark of Junior Achievement efforts, these mentors inspire students by transforming the JA lessons into relevant messages that connect what is learned in the classroom to real-world situations.

I am a big fan of this organization. Financial literacy and workforce readiness is very important, with the rise of debt from school loans and credit cards, we have to teach the younger generations more and more about how to best manage their money and be ready to get sustainable jobs. JA reaches 38,000 students in annually!

This weekend a small contingency from Slalom Consulting Boston is putting in 24 hours to create a portal for JA’s board of directors, hosted on Office 365. Some of the key requirements include:

  • Calendaring including RSVP.
  • Custom newsfeed on the homepage highlighting important details from the portal (not what is followed).
  • Branding to match the JA brand.
  • Mobile device friendly, with a heavy focus on the iPad.
  • And other portal stuff like document libraries,

We are employing our best SharePoint and User Experience architects and developers to accomplish something great. I am really looking forward to working with my team as a whole. As consultants we are all spanned across multiple projects and clients, it’ll be a blast to work with the team, together, busting out a sweet project.

Why do I share this with you? One, to show off how much I love my job. Slalom loves promoting community efforts among its employees, really helping us do what we’re passionate about. #SlalomProud. Secondly, to tell you a little about JA, and hopefully you’ll check them out. They are a great organization, one definitely worth the look.

Finally, I wanted to give you a heads up as we’ll be sharing some of the code we create and walk throughs on what we built. I’m excited to build something great and being able to share it with the SharePoint community.

‘Til then, Happy SharePointing!

My Users Don’t Like SharePoint Because It’s Just Ugly!

This is Part 4 of my series on ‘My Users Don’t Like SharePoint…

“Can you make it not look like SharePoint?”

Sorry, I can’t use the Mustang metaphor on this one, it’s too beautiful.

Ugly SharePoint 2010

SharePoint can be a little rough to stare at day after day. It’s basic, and a little boring. The 2010 interface was a huge improvement over 2007’s, and the 2013 is an improvement over 2010’s. Eventually, they’ll be hatred for the 2013 design I’m sure. I don’t remember the last SharePoint gig I was on where branding wasn’t a part of it, in some manner. It’s ugly, it is, but it is functional.

Fortunately SharePoint can be branded/themed/designed, whatever you want to call it, to look like anything but SharePoint. Don’t believe me? Check out TopSharePoint.com, an entire site dedicated to showcasing awesome SharePoint sites. Small disclaimer: these sites listed are publicly facing marketing sites and not intranets for a company. Making your SharePoint look like one of these might be an unrealistic expectation. However, it is a great start for getting ideas for cleaning it up and removing the SharePoint look and feel.

Branding SharePoint can be a basic task (change a color or two, layout, etc.) using a custom CSS file to a large project (new master pages, page layouts, full styling, images, etc.) which can engage a team of designers and developers. Branding can be setup to automatically handle mobile devices, giving a richer user interface to SharePoint for iPads, tablets and phones.

If you have the money, pay for a team to come in and brand SharePoint until it’s not recognizable anymore. Go to town and make SharePoint look like anything but SharePoint.

If you’re like most, budgets don’t allow for a full redesign. I’m going to walk through taking a SharePoint site and doing some basic tasks to spruce it up a little. My CSS file is linked at the end of the walk

Before we dive in. True design takes into greater consideration the user experience (UX) along with the user interface (UI). Not only should it look good, but is it functional. Up to now, my other posts have been about improving UX, and though this post might be about UI, it should really be considered in tandem with UX. If you make it look pretty, but users still can’t do anything, what’s the point?

With that said, let’s make SharePoint look a little prettier.

Change the theme. Pretty easy, go to Site Settings > Site Theme (under Look and Feel). Pick your desired colors. If you’re using SharePoint Server, you have the option of taking it a step further and customizing your colors as well.

I’ve picked a new theme, Construct. When you do, you’ll notice it’s a slight change, but definitely still looks like SharePoint.

Use a custom CSS file. This isn’t tough. A Site Owner can do apply a custom CSS file, no need for SharePoint Designer or custom master pages, with the Publishing Site Feature enabled. If not, you’ll need to modify your master page to link to your CSS file.

To really make a noticeable difference, I decided to set the page fixed width (see Lesson Learned: Using Fixed-Width Layouts in SharePoint. Explore whether or not your SharePoint design should flow with the browser or be set to a fixed width.). And since the page is fixed width, I threw in a background color. Notice I took out the large image. A caveat with fixed width is that content can spill over and make the page look bad. I went ahead and removed that image.

Disclaimer, I’m terrible at matching colors, which is why I leaned towards an almost monochromatic theme.

Let’s rework the left quick launch a little bit, adding a little depth and style by bolding the section headers and indenting the links.

Change the site logo to your company’s logo. If the logo isn’t a solid square (most aren’t), make sure its background is transparent so it will fit nicely. Save it to the Site Assets folder, and then set the logo in Site Settings > Tile, Description and Icon.

Now let’s take the top link bar, add a little custom styling, and modify the left quick launch to add some gradient. Check out the Ultimate CSS Gradient Generator for a great free tool for creating gradients that even work in IE9.

It’s coming along isn’t it?  Using the same gradient tool, and a little more styling to the background and web part titles, here’s my finished result.

Not bad eh?

This is all in one CSS file, which you can download here. This took me about 20 minutes to do, spent most of the time playing with colors.

Upload the CSS file to your Site Assets folder, and then specify this as your custom CSS file (Site Settings > Master Page > Alternate CSS URL). If you don’t have the Master Page option, you’ll need to enable the Site Publishing feature. If you can’t enable this, or don’t want all of the other stuff that comes with it, you can link to your CSS file by editing your master page in SharePoint Designer.

Where to go from here. There is so much more you can do with branding, and if you’re feeling adventurous, you can start diving into editing your master page and moving stuff around, adding cooler elements, JavaScript/jQuery, HTML, etc. Keep in mind, the more you add, the greater chance you have of slowing down the pages. Adding jQuery minimum alone adds approximately 93kb to the page. Keep this in mind as you’re improving your design.

There are a ton of resources online for how to customize your master page, apply a custom CSS and do some pretty cool stuff using jQuery. Here’s a few I’ve booked marked along the way:

Til next week, Happy SharePointing!