Adding a code snippet to page content on SharePoint 2013

Note: this post is written specifically for SharePoint 2013.

Sometimes it is necessary to add a snippet of code to just one page. Examples could be:

  1. Alternative CSS for just that page, i.e. to style a specific element
  2. Add a snippet of HTML and/or JavaScript, such as for a Google Maps or Youtube embed
  3. Add a piece of CSS to hide the left navigation on specific pages
  4. Add the Open In Explorer Link to a page

There are technically a number of ways to achieve this:

  1. Paste the code directly into the page contents (does not work)
  2. Paste the code into the the HTML source of the Content Editor Web Part (can work, depending on SP version and code)
  3. Use the Embed command  (can work, situational)
  4. Save the code in a text file, save it somewhere on your SharePoint site collection and call the text file via the Content Editor Webpart (my preferred method)

Option #4 is my favorite for a number of good reasons:

  • You can save the code centrally and then call it from multiple places without needing to replicate it
  • By saving it centrally, you only need to update it once if there are changes or updates
  • By saving it in the content database, you can access it from SharePoint Designer or similar, meaning you do not need to keep downloading-updating-uploading
  • It works consistently across all versions of SharePoint from SharePoint 2007 up to Office 365

For this example, I will be using a simple JavaScript which shows copyright information, in this case from 2010 to the current year. This allows the copyright to be kept up to date:

<p>All right reserved  &copy;
<script>
var cur = 2010;
var year = new Date(); 
if(cur == year.getFullYear()) year = year.getFullYear(); 
else year = cur + ' - ' + year.getFullYear(); 
document.write(year);
</script>
</p>

Option 1: Paste the code directly into the page content

You can paste the code directly into the page content.

code-a

However, once you save the page and view it, you will see that SharePoint does not realize that it is code it needs to render in some way.

Conclusion: do not place code directly in the page content as it does not work.

Option 2: Edit source in rich text area / CEWP

In most content editor webparts and all rich text areas, there is a button in the ribbon called “Edit source”. This is great for quick fixes when content has gotten out of hand. In older versions of SharePoint, you could also use it to embed extra code.

Edit Source

You can easily paste your code straight into the Edit HTML window.

However, once you save, SharePoint lets you know that the code that it does not approve of has been stripped.

code3

In this case, some of the embedded code has been stripped out.

code-b

Sometimes SharePoint will strip out all of it and sometimes it will only strip out parts which can cause an odd result. When it doubt, check back into the HTML source to see what has happened with your code and if it is still 100% intact.

Conclusion: while this used to work under some older SharePoint versions, it is generally not a reliable solution for SharePoint 2013.

Option #3: Using the Embed command

SharePoint 2013 includes an Embed command in the ribbon which can be great for adding code snippets to your page:

code4

After clicking the command, you are prompted to insert your code and given a preview:

code-c

SharePoint creates a Script Editor webpart on the page for you. It even includes an “Edit Snippet” button, so you can go back and edit the code later.

code-d

The JavaScript is being displayed correctly in the webpart and also on publishing the page.

Conclusion: in my experience, this works but is dependent on the complexity of the code. Test well before using.

Option 4: save as a text file, call via CEWP

I have saved the JavaScript into a file called copyright.html. The file extension can help SharePoint determine how to parse the code when it is called, but you may need to experiment depending on your code – I have had good results from using txt, html and js extensions in the past.

Here is the file in Notepad++:

code-e

In this demo, I uploaded the HTML file to the document library on the same site as the page we are working with.

code-g

Tip: I tend to use the following rules of thumb as to where to upload these kinds of files:

  1. Think about if you want to save it in the standard Document library, or if you want to create a dedicated document library called “Scripts” or similar
  2. If the file will be called from just one single site, save it on the site
  3. if the file will be used across just one site collection, consider saving it at the root of the site collection or in the Style Library of that site collection (i.e. Styles/Scripts)
  4. If using across multiple site collections, choose the most logical place for it, i.e. on a root site collection

Next, place a Content Editor Web Part (CEWP) on the page and edit the webpart settings. At the top, add the link to the file and click “Apply” to save the changes.

code-h

The content should immediately display in the CEWP on the page.

code-i

Tip: if  you wish to use the same webpart in many places, you could export the configured CEWP and import it as a custom webpart. You can then place it on a page and it will already be configured for you.

Conclusion: this is my favorite method due to the central storage of the files, ease of editing the files and reusability.

Adding an image + link via calculated column on a list with HTML (Directory List Solution)

I was working on a document management system, where each client had its own site collection and projects were subsites under that site collection. I needed a way to show a list of available site collections from a main landing page.  This needed to show all site collections, no security stripping and search rollup was not an option at this time. The easiest way then is to create a list that acts as a directory – just add the sites to the list manually.

The problem was the link to the sites. How best to do this?

Option 1: Hyperlink site column

Adding a hyperlink site column is easy. You get a clickable result in your field display.

The tricky part is dealing with the fact that a hyperlink column consists of two fields: the web address and then the description.

clientsite1

If you do not fill in a description, the URL is displayed when you view the item.

clientsite2

This approach has a few issues:

  • Showing a text like “Link” is not very nice looking.
  • When an end-user fills in the item, they may not be consistent with the result. You could add a description to the field, but this is still not foolproof.
  • Even though the link is blue, not everyone will realize that you need to click the text to open the site – many people will still try to click the title and then just open the item.  This leads to frustration.

Option 2: Creative use of calculated column

You can use a calculated column to display the link as an image, i.e. an arrow or something that is very obviously a link – how about something like this?

clientsite6

By choosing to use a calculated column, we have ensured that anywhere the column is used, the arrow will be displayed. This means that it will work in any view, any webpart, etc.

*** Update 2017-07-21: This worked on SharePoint 2013 and SharePoint Online until sometime this spring. When using SharePoint Online, it now only works in classic mode – it has been disabled in the new mode.

clientsite4

To replicate, follow these steps. The column names are not important, they are just suggestions.

  1. Upload an image to SharePoint, i.e. in your site assets library
  2. Create a new (site) column of the type “single line of text”, and call it “Site URL
  3. Create a new (site) column of the type “calculated column” and call it “Site Link” or similar
  4. Use the formula as stated below, adjusted for your site and column names –
  5. Change the output of the column from “single line of text” to “number”
  6. Save the column and enjoy

clientsite5

Formula

The formula I used is as follows:

=IF(ISBLANK([Site URL]), "URL Missing", ("<a href="&[Site URL]&" target='_blank' alt='Open site in new window'><img src='/SiteAssets/link.png' style='height:20px; width:20px;' /></a>"))

Broken down, it has a few interesting elements:

  • IF(ISBLANK([column name]), “URL Missing” – if the column with the URL is empty, it will show this text. If you leave off this structure, then the calculated column will simply be empty. You can also change the “URL Missing” text to whatever you would like, i.e. “Please fill in a URL”.
  • A hyperlink is created based on the value of the Site URL column
  • The link opens in a new window (this is specific to my example, as I expect a new window to be more useful for these users)
  • Link to the image
  • Set the image height – I found 15-20 pixels fit nicely into the column. You could also include a class from your CSS.

Tip when editing formulae in calculated columns: use Notepad++, as it will help you see when brackets are closed.  Just make your changes in Notepad++, then copy them into the edit column window each time – this will make it far easier to work with.

clientsite3

Display as HTML

One of the coolest things about this solution is that generally, calculated columns cannot be rendered as HTML. Technically speaking, the contents of the column should just be displayed as plain text. Yet, here we are, with an nice arrow image being displayed and the link working beautifully. The trick is changing the returned datatype from single line of text to number. Once you do that, then the contents are rendered as HTML.

Credit for this solution goes to Danny Engelman at ICC – HTML in a Calculated Column / Field of a SharePoint View.

Site columns and content type hubs

In the real world solution, both the Site URL and Site Link columns were site columns, attached to a content type called Client Directory. The columns were also reused for a similar construction in a Project Directory custom list, which showed the subsites under each client site collection. Using a content type hub, these columns were replicated to each site collection and we were able to build a similar Project Directory in exactly the same way: simply fill in the URL, display Site Link column. This made the solution incredibly flexible and reusable.

Sources

HTML in a Calculated Column / Field of a SharePoint View

Creative use of the Reusable Content option for styling on SharePoint

I have rarely seen clients use the Reusable Content option. Occasionally it will be used to add a disclaimer to a page – but often that’s best placed in a page layout for a specific page type anyway. There just doesn’t seem to be much of a use for it, though I’ve always wondered if there could be a really useful application.

In a recent project, Daniel Gustafsson found two really cool uses for it: adding a floating image to page content and adding numbered bullet points which are highly styled. These are by far the most interesting uses I have ever seen for the Reusable Content, which is why I asked Daniel if I could share them with you here.

Continue reading

Creative use of the Reusable Content option

I have rarely seen clients use the Reusable Content option. Occasionally it will be used to add a disclaimer to a page – but often that’s best placed in a page layout for a specific page type anyway. There just doesn’t seem to be much of a use for it, though I’ve always wondered if there could be a really useful application.

In a recent project, Daniel Gustafsson found two really cool uses for it: adding a floating image to page content and adding numbered bullet points which are highly styled. These are by far the most interesting uses I have ever seen for the Reusable Content, which is why I asked Daniel if I could share them with you here.

This example is done using SharePoint 2013, but should work for all versions. Be careful with the HTML5 on older versions of SharePoint, though. You will need to add your own CSS.

This article will discuss how to handle an image with float left:
reusablecontent3

And it will also handle numbered bullet items:

reusablecontent5

What is Reusable Content?

Reusable Content allows end users to save snippets of commonly used text or HTML which can then easily be put onto a page.

All Reusable Content is saved into one list per site collection, always saved at the root in the list Reusable Content.

reusablecontent1

Reusable content can be anything you might need to reuse:

  • Byline
  • Disclaimer text
  • Standard piece of HTML
  • “About me” text

Once a piece of content has been added to the Reusable Content list, it can be added to a page by clicking the Reusable Content button in the ribbon and then choosing the item from the list.

reusablecontent2

Reusable Content items come with an interesting feature called “Automatic Update”. If you turn this on for an item and update the content, it will update everywhere the Reusable Content has been placed. this can be extremely useful in many places. In the following two examples, it must be turned OFF for the functionality to work correctly.

Image float left

Image float left inserts an image with text possibilities into the page, floated left:

reusablecontent3

The default image is configured as a basic placeholder, giving the user something to click. Once the image is selected, you can choose a new image via the Replace Image option in the ribbon.

reusablecontent4

The texts can be replaced just by clicking on them and changing them to whatever the user needs. The texts also keep their formatting, as long as the user doesn’t delete too much of the reusable content item.

Configuration in Reusable Content List

Note: automatic update must be set to no.

Reusable HTML (remember to edit HTML source when editing):

<figure class="float-left box-story"><img alt="image" src="/Common-Image-Library/placeholder.jpg" _moz_resizing="true" style="width: 300px; height: 300px;"/><figcaption>
<header>Header for box story</header>
<p>“Box story body text”</p> </figcaption> </figure>

Bullet points with header

Sometimes the default unordered list in SharePoint is overly boring, even after styling it. The developers in this project came up with a much cooler way to display the content:

reusablecontent5

It’s a little fiddly in the implementation and later changes – adding something in between the current header 2 and header 3 is difficult, for example. However, when you are looking for a very stylized front-end website, it may very well be worth it.

This content actually consists of two pieces of Reusable Content: first, the Numbered List Item Wrapper is placed. Afterwards, the Numbered List Items can be placed into that wrapper.

Numbered list wrapper

Note: automatic update must be set to no.

Reusable Content HTML:

<div class="numbered-list">MARK TEXT and add reusable content numbered list ITEM</div>

When this is placed on the place, it simply shows the text shown in the div. To use it properly, select the text and then choose the numbered list item from the Reusable Content.

Selecting the text simply ensures that the actual list items are placed inside the list wrapper div.

Numbered list item

Note: automatic update must be set to no.

Reusable Content HTML:

<div class="numbered-list-item">
   <div class="numbered-list-item-content">
      <header>Numbered item with header</header>
      <p>Body text for numbered list item</p>
   </div>
</div>

Add this Reusable Content item to the wrapper as described below, simply adding more bullets until there are as many as you would like that. Afterwards, edit the headers and texts to match what is required.

CSS for the numbered list reusable content

/* ------------------------------------------ */
/* NUMBERED LIST CSS */
/* ------------------------------------------ */
.numbered-list {
    counter-reset: numlist;
    border-top: 1px solid #CBC7C2;
}

.numbered-list-item {
    border-bottom: 1px solid #CBC7C2;
    padding: 15px 0 4px 1px;
}

.numbered-list-item:before {
    counter-increment: numlist;
    content: counter(numlist);
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    width: 10px;
    height: 10px;
    padding: 8px 10px 12px 11px;
    background: #b4a76c;
    color: #fff;
    text-align: center;
    font: bold 14px/1 HelveticaNeueSerif, serif;
    font-size: 1.16667rem;
    float: left;
    margin-top: -5px;
}
.numbered-list-item-content {
    margin-left: 42px;
    padding: 0 0 0;
}
.numbered-list-item-content header {
    font: bold 15px/1.2 HelveticaNeueSerif, serif;
    color: #404040;
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0 0 10px 0;
}
.numbered-list-item-content p {
    margin-top: 0;
}

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