Wireframing SharePoint with Axure and Balsamiq

I was recently asked to make mockups for a new SharePoint environment so that the client had a better idea of what we were talking about.

What are wireframes? 

If you’re reading this article, I’m going to assume you already know what wireframes are. However, there are so many misconceptions and different definitions that I’d really like to make my position clear.

The emphasis in the following quote is mine.

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like.

Source: Website wireframe @ Wikipedia

Wireframe

A wireframe can take the form of a sketch on a napkin, on a whiteboard, PowerPoint or a program such as Axure or Balsamiq.

When asked to do a SharePoint wireframe, we’re usually most concerned with the main page as this requires the most customisation. At this point, we include elements from:

  • Master page (global layout, top navigation, quick launch, footer)
  • Page layout (page level layout, webparts, field controls)
  • Basic content decisions (which webparts? where? approximately what content will they include?)

As stated above, it is important to keep questions such as fonts, colors and/or graphics out of the question at this point: wireframes are concerned with functionality and basic layout, not design.

Comparing Axure and Balsamiq

It had been so long that I wasn’t even entirely sure what to use anymore.  I’d heard quite a bit about both Axure and Balsamiq, so decided to look into them. I know that some people do use Visio (see Jasper Oosterveld’s SharePoint 2010 Wireframes), but I don’t like using Visio for this purpose.

The best resource I found was Axure vs Balsamiq prototyping by Calvin Pedzai – he does a good comparison of the two products. In his conclusion, he states:

Which one to use is purely situational. Both are supported by strong community-generated components and widgets so the range of work one can do is quite wide. Axure is more expensive and suited for medium-to-large scale projects. Its annonating functionality means that the resulting prototype has useful notes on interactions for developers as opposed to creating seperate documentation. However because Axure RP offers more features than Balsamiq it takes longer time to learn and its HTML prototyping can be time consuming. Balsamiq is for smaller projects and rapid prototyping. Its prototypes are not as interactive as Axure RP but PDF mockups can be created. Very small learning curve and its lack of features is not such a show stopper either.

I’ve used Axure previously and it’s a powerhouse of a product. Particularly masters, which allow you to create things like navigation which are repeated over multiple pages and the ability to add functionality such as onClick are wonderful. You can create an entire prototype and create HTML pages which can be shared with the client. I also really like the functionality that allows you to comment on elements and create a specification from these comments in Word. Axure brings wireframes to a whole new level. However – I think it’s overkill for a lot of wireframing situations.

After having used Balsamiq, I can say it’s very simple. Occasionally, it feels too simple after having worked with Axure, but the simplicity pays off when I just need to make wireframes.

Balsamiq mockups/templates

Balsamiq lets you create mockups, which are basically templates. You can use the entire template or just copy/paste the elements you want to use out of it.

Flucidity – SharePoint 2013 team site mockup

Material SharePoint – SharePoint 2010 Balsamiq Mockup Wireframe Template

Balsamiq Mockups to Go – SharePoint Elements (I ended up tweaking a few of these a bit, but it was a good learning curve)

Balsamiq has a Mockups to Go site, where people can share their mockups; there are many useful general elements available here.

SharePoint page types: text layouts

SharePoint 2010 and 2013 have two main page types: page layouts and text layouts. In this article, I will look at the text layout functionality.

Using this option dynamically changes the page’s layout quickly and easily and is available in the following places:

  • Site Pages library on a team site
  • Wiki library (not the Enterprise Wiki)

You can find the option to change the layout of the page by going to the Format Text tab of the ribbon and then choosing “Text Layout”:

layouts1

Note that when you choose a different layout, the content never gets lost!

One of the nicest things about using the text layouts is that they’re easy to use and they meet 95% of all requests. They arrange themselves depending on the used content, which is great.

layouts6

I personally have never seen a reason to actually change these. However, you can change this on a page-by-page basis by editing the page in SharePoint Designer – I wouldn’t advise it, because it will create a maintenance and standardisation issue.

Comparing the wiki library and the wiki enterprise site template in SharePoint 2013

I had planned to write a blog post about the differences between the wiki library and the enterprise wiki site template. It turns out that Bernado Nguyen-Hoan over at Bernado Nguyen-Hoan’s Blog – Coding Stories from an IT Mercenary has beaten me to it!

Differences between Enterprise Wiki and Wiki Page Library in SharePoint 2013

Here’s a quick summary:

Wiki Library Enterprise Wiki
Description A library created under a site, next to the existing Pages or SitePages library A site collection template with a Pages library
Content type Locked Available
Page type Text layout Page layouts
Metadata While you can manually add metadata to Wiki Page Library, you can’t add the fields to the text layouts. This means users would have to edit the content of the page, then separately edit the properties of the page to enter metadata, which is not good for encouraging metadata entry. You can enable rating for the Wiki Page Library, but again, the only way for users to rate a page is to go to the View All Pages view of the library. With Enterprise Wiki you get Categories and Rating OOTB. These are placed on the OOTB page layouts,
Misc Shows “updated pages” on left navigation Reusable content, add a page from site actions menu

Both types of wikis are useful – it’s just a question of deciding which one to use in which situation.

Testing the publishing feature on a team site in SharePoint 2013

In the past, it was generally a bad idea to turn the publishing feature on within a team site. It could cause some very strange errors and it was confusing. It also points to that someone hadn’t really thought about how a site was going to be used and chosen the correct template accordingly – team sites and publishing sites are very different beasts.

However, I was curious how well this worked and was implemented in SharePoint 2013.

Testing the team site

I created a new site collection based on the team site template – I’ll use the relative URL of /test1 in the rest of this post.

The default landing page was /test1/SitePages/Home.aspx – this is using the standard Site Pages library which is default for team sites.

Turning on publishing

To turn on the publishing functionality:

  1. Turn on the site collection feature “SharePoint Server Publishing Infrastructure”
  2. Turn on the site feature “SharePoint Server Publishing”

The biggest thing that happens is that you now have two page libraries in the site contents:

  • SitePages (team site pages)
  • Pages (publishing pages)

teamsite1

Testing the effect of the publishing feature

Now that the publishing feature was activated, I wanted to see what effect it had.

  • Site Actions -> Add a Page creates a page in the SitePages library
  • The homepage for the site is still /SitePages/Home.aspx

Conclusion: simply turning on the features made no change, besides creating a new Pages library.

Changing the homepage

SharePoint allows you to set a different page in your library to be the “homepage” – this is the page that SharePoint sends you to when going to the basic URL. Currently, if using “/test1”, the browser will go to /test1/SitePages/Home.aspx.

I created a new page in the Pages publishing library and set that to the Homepage.

teamsite2

Now, when going to /test1, the browser redirected me to /test1/Pages/test.aspx.

Conclusion: you can change the default homepage from a page in the the SitePages to a page in the Pages library.

Changing the Add a Page type

On a team site, when using the Add a Page option via the Site Settings, you will create a new page in the Site Pages library. Even after enabling the publishing feature, the Add a Page option still creates a new page in the Site Pages library.

To create a page in the Pages library, you will need to go to the Pages library and do it via the ribbon.

teamsite3

Conclusions 

It is certainly possible to turn on the publishing feature on a team site. I did not encounter any strange issues.

However, I still think that it is too confusing for users and unnecessary: simply make a good decision on which site template to use and stick to it!

Lessons learned: branding SharePoint 2013 team sites

I was asked to do a simple branding for a client as part of a SharePoint Online/2013 project. I jumped into it thinking it would be like the difference between MOSS 2007 and SharePoint 2010 – some small changes, but generally the same. It wasn’t – though there are some neat new things.

Background

The premise for this project was fairly simple: the client needed a central administration site with sub-sites for each project.

branding1

The biggest caveat on this project was that the project sites would be created from a SharePoint site template (“save site as template”), which is notoriously complicated combined with team sites and branding.

Change the look

There are a few ways to change the design package or “look” in SharePoint 2013.

branding2branding3

This brings you into a screen where you can choose from a number of default Looks or edit your current Look:

branding7

When you choose a look, you end up on the configuration screen for that Look where you can change the background image, the colors (theme/color palette), site layout (master page) or fonts (font scheme). You can see a live update in the middle of the screen:

branding4

This is great for end-users: it allows them to have far more control over their environment and to customise things to fit their own needs. It allows the users to use pieces of a branding solution.  It also allows branders to supply them with better options, i.e. by creating color palettes which the end users can then choose.

Composed looks

The “Change the look” allows the user to select a premade template and then change the options that create the look. You can also create a Composed look for your environment that includes all of the elements. The user can select it and then have everything automatically look correct.

You can find the Composed looks on each site settings, under Web Designer Galleries:

branding5

Composed looks is nothing more than a list with a number of different columns which point to different resources. If you edit an item in the list, you will be able to edit all of these different properties:

branding6

Creating a new Composed Look is easy; simply create a new item in this list. 

Note: the master page must be created via a HTML page, even if you don’t make any changes to it, before it will be available in a Composed Look. You will not be able to select the master page as a layout option in the Change the Look screen otherwise.

Composed Look elements

SharePoint 2013 has a number of design elements which are combined in the Composed Look:

Element Description Lessons learned
(HTML page) SharePoint 2013 creates master pages from HTML templates Make all of your changes here, if possible
Master page Created from the HTML – try and avoid editing the master page directly in SharePoint 2013 Is automatically created from the HTML page as soon as there is a new version of the HTML page
Theme Also called color palette, is responsible for colors Download a pre-existing template and update as needed. Choose one main color to replace, then replace it with “replace” in an editor – this will keep the coloring consistent. Just changing one color was enough to make a big impact for my client.
Background image Used for the background image on pages, automatically repeats SharePoint assigns CSS transparency of 85% to this image – make sure that it is fairly dark, otherwise, you will not be able to see it
Font scheme Helps to control all the different fonts in the environment

I was very impressed with how easy it was to update things like the color palette – you need some basic branding knowledge and an understanding of check-in/check-out. That’s it, and changing these things can make your environment look very differently.

Branding inheritance with team sites

I really wanted to reuse the same master page on each of the different team sites; I had put the Open in Explorer link from my Using the “Open in Explorer” link on SharePoint 2013 mini project right about the left menu.

Here’s what I learned while trying to accomplish that:

  • Edit the HTML master file for the layout, not the master page. If you only edit the master page, for some reason it is impossible to select this master page as a layout in Change the Look. Plus, there is no reason not to – SharePoint updates the master page with the changes in the HTML on the fly.
  • Master pages are not shared over different sites (without the publishing feature) – the master page that I created for the client was not available on one of their project sites. I also edited one of the default master pages – the change was not visible on a subsite. This means that the master page changes are limited to a site scope, not site collection.
  • Color palettes are available over different sites. I did not test font palettes.
  • If you save a site as a template, the same Look is applied to the new sites created from that template. In my project, this meant that the color palette and the background are automatically applied to new sites.

Resources

Benjamin Niaulin: Step by Step: Create a SharePoint 2013 Composed Look

Using the “Open in Explorer” link on SharePoint 2013

A client recently had the request to add the “Open in Explorer” link for a specific document library on a site. It’s understandable, considering that finding the Open in Explorer link requires understanding of the ribbon and knowing where to look for it; this site would be targeted at users with minimal SharePoint knowledge.

Browser considerations

Microsoft says that IE 7+ is required to use Open in Explorer. However, Microsoft also says that only IE 8+ is supported for SharePoint Online. Your mileage may vary.

I tested it in Chrome, which did not work. I have heard rumors that it works in Firefox, but that sounds unlikely to me, considering it is tapping into Windows functionality.

Troubleshooting Open in Explorer functionality

The functionality seems to be a bit sensitive and the conditions need to be just right for it to work.

Note #1: “Open with Explorer” may not work if you have the  64-bit version  Internet Explorer and/or the  64-bit version of Microsoft Office installed.

Note #2: There are some issues with IE 10 and this functionality; I got it working with IE10 (32-bit) with the “keep me signed in” trick – see below for more information.

Typical error messages:

  • “Your client does not support opening this list with Windows Explorer.”
  • “We’re having a problem opening this location in File Explorer. Add this web site to your Trusted Sites list and try again.”

Solutions:

  • Ensure that the WebClient service is started (this is preconfigured on modern versions of Windows)
  • Ensure that you are using a supported browser (IE 8+)
  • Add “https://*.sharepoint.com” to Local intranet site or trusted zones in your IE settings
  • Sign in to the SharePoint Online site by using your Office 365 credentials, and make sure that you click to select the Keep me signed in check box.

Microsoft: How to use the “Open with Explorer” command and how to troubleshoot issues with this option in SharePoint Online

Creating the link

The Open in Explorer link in the ribbon is nothing more than JavaScript. We can quite easily build our own.

The basic format is as follows, for the URL https://example.sharepoint.com/template/Shared Documents/:

<a onclick="NavigateHttpFolder('https:\u002f\u002example.sharepoint.com\u002ftemplate\u002fShared\u0020Documents', 'blank');" href="#">Open in Explorer</a>

The NavigateHttpFolder function resides in the core.js file and is usually called automatically. It was a non-issue on SharePoint Online with (mostly) default branding.

Note that you need a \u002f for a backslash, and a \u0020 for a space.

In my example further on, I’ve made the link relative – it works both ways.

Making the link dynamic

The thing is, the cilent wanted a link that could be used on a site template for different projects. Each project has its own Shared Documents library, which I want to link to without having to change URL by hand. This is where I started to make it a little bit prettier:

<br /><script type="text/javascript">// <![CDATA[
var CurrentSiteURL = document.location.pathname.split("/").slice(1,2).toString();
var ExplorerViewURL = "\u002f"+CurrentSiteURL+"\u002fShared\u0020Documents";
var LinkText = "Open Shared Documents in Explorer View"
// ]]></script><br /><br /><a onclick="NavigateHttpFolder(ExplorerViewURL, 'blank');" href="#"><br /><script type="text/javascript">// <![CDATA[
document.write(LinkText);
// ]]></script></a> <br /><br />

I knew that the client would never have more than one level of project sites, i.e. a root site with underlying project sites. So, I grabbed the current URL, split it into an array based on where the forward slashes are and then just grabbed the site information, i.e. “template” from my previous example.

I used the CurrentSiteURL variable to build the URL for the document library. It made sense to make it relative, in case the base URL ever changes.

I put the link text into the variable LinkText, just to make it look nice when building the actual HTML link. It would also allow for a potential dynamic link text.

Link placement/usage

The client also wanted this Open in Explorer link in the quick launch navigation. When I tried this on SharePoint Online/SharePoint 2013, I got a nice error:

openinexplorer1

It turns out that there’s new security in the newer versions of SharePoint and you can’t add JavaScript to the menu anymore. At least, not without using real code, features and stuff that was beyond the scope of this project.

So I did the following:

  1. Put the entire script into OpenInExplorer.js in the Style Library, including the HTML
  2. Place a content editor webpart (CEWP) on the page and call the JavaScript via the webpart.
  3. Clean up the webpart settings a bit, i.e. Title = “Open in Explorer”, no visible Chrome, etc.
  4. Export the webpart and then import it via the webpart gallery so that the client can reuse it as often as they want.

openinexplorer2

Full code in OpenInExplorer.js

<script type="text/javascript">
<!--
Created by Hannah Swain, April 2013
https://sharepointhannah.wordpress.com
http://wp.me/p3pUZD-G
-->

var CurrentSiteURL = document.location.pathname.split("/").slice(1,2).toString();
var ExplorerViewURL = "\u002f"+CurrentSiteURL+"\u002fShared\u0020Documents";
var LinkText = "Open Shared Documents in Explorer View"
</script>

<a onclick="NavigateHttpFolder(ExplorerViewURL, 'blank');" href="#">
<img style="height: 24px; width: 24px; border: 0px; padding-right: 5px;" alt="Open in Explorer" src="/Style Library/client/folder_yellow_explorer.png" />
<script type="text/javascript">document.write(LinkText);</script
></a>
<span style="padding-left: 34px; font-style: italic;">Requires Internet Explorer 7.0+ and Active-X controls</span>

Credits

The following articles/forum threads helped me to figure this out:

ItemStyle issues after SharePoint 2013 upgrade (?)

I have a client who is running SharePoint Online, the 2010 version. She sent me an email saying “Help! None of our content query webparts work!” I took a quick look and it was that standard error that the CQWP cannot be displayed. I thought that maybe someone had messed with the ItemStyle.xsl – that’s usually the first place to start troubleshooting.

blogxslt

I tried to log into the environment using SharePoint Designer 2010, considering that’s what I’d always used for this client. She hadn’t gotten the upgrade email from Microsoft yet, but it turned out that I suddenly needed SharePoint Designer 2013 to log in.

That ItemStyle.xsl that I thought had been messed with? It hadn’t been touched in six weeks and the last person to do anything with it was me.

I traced the issue to a section that was being used to aggregate blog posts within the environment. There turned out to be two issues: the strip HTML template I was using was throwing errors and a variable wasn’t working properly.

@Body variable

I saved the template problem for later and tried to figure out why I suddenly wasn’t actually getting any input from the @Body tag.

I made sure “Body” was actually filled into the slot in the CQWP – it was.

I checked to make sure the field really was named “Body” by checking the URL – it was.

I defined it in the XSL so I could call $Body instead of @Body but that didn’t help.

Finally, I used Heather Solomon’s snippet to see which variables were actually being passed to the CQWP:

<xsl:for-each select="@*">
 P:<xsl:value-of select="name()" />
</xsl:for-each>

It turned out that it suddenly Body was called body. That makes a difference in XSLT. I replaced @Body with @body and suddenly I had data to work with again.

Remove HTML template

I finally traced the issue to a template I was using to strip the HTML from the Body field. I had used Ben Prins’ Remove HTML markup in Content Query Web Part, which had worked fine – until it suddenly didn’t.

I replaced the “removeMarkup” template with the one from Maulik Dhorajia’s Removing HTML tags using XSLT. And suddenly it all worked.

I went through the code of the two templates and I can’t really see much of a difference – it seems to come down to the order and structure of how things are called in the code. Then again, I’m not really a developer.

Lessons learned

  • I think Microsoft has done some underwater upgrades to some SharePoint Online environments which suddenly require the use of SharePoint Designer 2013
  • There must be some differences in the XSLT rendering between SharePoint 2010 and SharePoint 2013

SharePoint and the disappearing webparts

I have noticed something odd with placing list view webparts: they disappear at odd times. I place them on the page and do something such as editing the webpart, etc. and then they’re just suddenly gone. I’ve seen this on SharePoint 2013 as well as SharePoint 2010/2013 Online, with IE9, IE10 and Chrome.

missing2

When I go to re-add the webpart to the page, I suddenly get “Wiki [2]” as a webpart title, which means that the webparts aren’t completely disappearing – they’re still there, somewhere.

By going to the webpart maintenance page (add ?contents=1) to the end of the URL), I can see that the webparts is open on the page. But… I can’t see it.

missing1

I found Jennifer Mason’s blog on SharePoint 2010, Office365: Why does my web part randomly disappear?!? which also looks at the webpart maintenance page. She has a really good tip: close the webpart via the maintenance page, then re-add it to the page via Add Webpart -> Closed webparts. Voilá – it was back on the page.

However, the webpart disappeared as soon as I tried to save the page. It even disappeared when I hit “Edit Webpart” – I had the edit webpart dialogue but no webpart.

I started checking the HTML source of the zones, to see if the webpart code changed at all to cause this issue. Long story short – the problem doesn’t seem to be there.

At one point, since I was working with simple wiki pages, I edited the webpart without editing the page first. And suddenly it all worked perfectly.

So, when you’re bashing your head against the wall or are just very tired of configuring list webparts that won’t hang around, do the following:

  1. Add the webpart(s) to the page. 
  2. Save the page
  3. Edit the webparts without editing the page first