New Storyboard Tool in Visual Studio 2012

I just installed Visual Studio 2012, and was pleasantly surprised to find a new storyboard tool based on PowerPoint! 

When you run the tool, you get regular PowerPoint with a set of shapes preconfigured to work together that represent common user interface elements:

image

Here is an example of the SharePoint background shape:

image

Here is the same background with some common widgets added on to the page:

image

The new Windows 8 UI elements are also represented as well such as the new Charms concept in Windows 8.

Because this is just regular PowerPoint, you can use these shapes to build presentations, walk-throughs, animations, clickable demos, etc. in the same as any other PowerPoint presentation!

Configuring SharePoint 2013 Navigation to Span Site Collections

One of the key limitations in SharePoint 2010 is flexibility in the navigation structure to span multiple site collections.  This isn’t possible without significant custom development in SharePoint 2010 and is one of the more exciting features in SharePoint 2013. 

Here is a typical intranet hierarchy in terms of site collection layout:

image

In SharePoint 2010, the challenge for users is that once they go to a site in Department 1 Site Collection they lose the context back up to the main Communications Site Collection.  Breadcrumb trails also start fresh the moment you switch collections as well.

So can we fix this in SharePoint 2013?   This article shows some some steps to help explore the new managed navigation features in SharePoint 2013.

Here is are two site collections that I created in my Office 2013 preview environment:

  • PublishingDemo3
  • CollaborationDemo

When I created the PublishingDemo3 Collection, I selected the Publishing Portal Site Collection template and for the CollaborationDemo I selected the Team Site Site Collection template.

 

image

We want this to work with a navigation structure that works like this:

image

From a navigation perspective, we would want the navigation to provide a seamless drill down from the communications intranet into our collaboration sites.  So let’s see if we can create this in SharePoint 2013.

Creating the Sites

So in each collection, let’s create our site hierarchy.  We need three sites in our Publishing Site Collection and two sites in our Collaboration Site Collection.  To create a new site, go to Site Contents under the Settings menu and create a new site:

image

image

When we create the collaboration sites, there is a navigation setting that allows you to show the sub-site in the parent navigation – let’s turn that on for now for each of our new sub-sites:

image

Note that this is only available in the Collaboration Site Collection, not in the Publishing Collection.

So now that we have created our sub-sites, let’s see what the default navigation looks like in SharePoint 2013.  In our Publishing Site Collection, there is no tree on the left hand navigation and by default the navigation is set to Managed Navigation (more on this later).  There is also no breadcrumb available:

image

The only way to navigate to our sub sites is through the settings menu under Site Contents.

In our Collaboration Site Collection, the default behavior is to display a left hand navigation with lists, document libraries, etc. and then to have sub-sites underneath the Subsites menu item and are listed on the top navigation bar:

image

There is no breadcrumb trail in this template by default either.

Another interesting note – by default, the logo link goes only to the home page of the current site – it doesn’t go to the top of the collection.

 

Integrating the Navigation

For our integrated navigation, these are the requirements we want ideally:

  • Clicking on the left hand logo or “Home” in the left hand navigation should go to the top of the Publishing Site Collection, even if we are in a collaboration site (e.g. to our single “home page”)
  • The top navigation should have a constant set of global links.
  • The left hand navigation should show the parent site (even if that’s in another site collection), items within the site and then sub-sites.

Challenges with Changing the “Home” Page

By default, the home page logo points to the home page of the current site.  So for example, in our Finance Home Page site, clicking on the logo links to the Finance Home Page, not the top level page.

You can change the logo graphic, but there is no option to change the URL!

image

It seems crazy that in order to change this behavior you would need a custom master page, but this seems to be the case…

Managed Navigation

We want to have a different top navigation and have it static while providing a dynamic left hand navigation.

For the top navigation, let’s always have it be:

  • Home Page
  • Finance Home Page
  • HR Home Page
  • IT Home Page

We can do this easily in our Publishing Site Collection by switching to Structural Navigation for the global navigation:

image

But the challenge is what if we want to have a different arbitrary navigation for our global navigation.  For example, lets imagine that we want to have our collaboration site home page on the global navigation.  We can do that by using managed navigation, but here is the key problem:  there is only ONE navigation term set for a site that is shared across both the left navigation and global navigation.  You can have a managed navigation hierarchy for both global navigation and left hand navigation, but they both point to the same navigation hierarchy. 

When you create a navigation term, the only option you have is to show or hide a term in either the left or global navigation.  So you have to create a navigation tree that combines both terms and show and hide them to have different navigation trees.

I created a custom navigation term set that looks like this:

image

We can set this to be our navigation for our Publishing Site Collection under the navigation settings:

image

Now our left and top navigation are both driven by the term set.  For each term, we have selected the URL to our sites including the collaboration site home page.

Let’s now add our news and events page to our site.  When we create these pages, SharePoint 2013 automatically adds these to our term set and they show up in both the global and left navigation:

image

If you delete these pages, SharePoint 2013 will also delete these from the navigation term set automatically.

We can hide the pages in our global navigation – click on “Edit Links” and click on the hide button to hide the link.

image

NOTE: If you click on X to delete the link, it removes it from the term set entirely and it will disappear entirely on both left and global navigation menus.

So we now have a left hand navigation that shows pages and a global navigation that just shows sites.  In both cases, we can link to our collaboration site.

Creating Pages One Level Down

We can create a page and move it down one level in our hierarchy.  Here is a page we created called Finance News and let’s move it under Finance within the hierarchy.  If you click on Edit Links you can drag the link under Finance:

image

Clicking on Finance News takes you to the newly created page and the left hand navigation works as expected – it shows an updated navigation drilled down one level down:

image

Note that our page is actually physically still located in the main publishing site – it didn’t create it physically within the finance site.  All the pages you create are put in the same top publishing site even though the navigation shows the hierarchy as if these pages are located in separate sites.

 

Drilling into the Publishing Sub-Sites

Recall that we created 3 sub-sites for HR, IT and Finance.  What does the navigation experience look like when we drill into these sites?  Here is what our HR site looks like:

image

What happens if we create a page physically in this site?  Well, SharePoint 2013 actually forces the issue – if you are using managed navigation, it will create the page physically at the top site instead of if in our HR site, even though we are in the HR site.  You can see this if you click on Add Page:

image

If we go around the default behavior, we can force SharePoint 2013 to create a physical page in one of our sub sites but it won’t show up in the navigation unless you explicitly link to it.  I created these pages physically by going into the Pages library of the Finance site:

image

The only page that shows up in the navigation is our default because we explicitly linked to it, but none of the other pages show up dynamically.

Why is this a problem?  One word: Security!  If we want to create a secure site, its hard to secure these pages by their level in the hierarchy because they are physically all kept at the top level.

Drilling into our Collaboration Sites

Let’s look now at the navigation experience in our Collaboration Sites.  Here is what it looks like by default:

image

So can we reflect that our IT Collaboration Sites are part of a bigger hierarchy that links back into our Publishing Sites?

The first thing to notice is that Managed Navigation is not available in Site Settings – this is because it is a Publishing feature and not available in Collaboration sites.  However, we could add in some global navigation links and left hand navigation links to mimic our Publishing sites.

Another feature available is the ability to change the link order.  Here is my global navigation changed to reflect the same global navigation in our Publishing Site Collection:

image

If we click on one of our collaboration sites, it works as expected and our revised global navigation shows up in the sub-sites:

image

Turning on Managed Navigation in Collaboration Sites

Our collaboration site navigation doesn’t mimic the Publishing Site Collection exactly.  For example, the navigation only supports one level in the navigation where our Publishing Sites have multiple levels because they are driven from the term store.  It’s also hard to maintain – if someone decides to change the Global Navigation in our Publishing Site Collection, it won’t reflect automatically in our Collaboration Sites.

How about we turn on the same managed navigation feature in our Collaboration Site?  That way we can use the same term store to drive our navigation across both Publishing and Collaboration Site Collections.  At least for our global navigation, that might be a better solution than manually trying to imitate the Publishing Site Collection’s global navigation.  We can leave our left hand navigation to be collaboration centric and display the lists, document libraries, and other content items that are in typical collaboration sites.

If we go into Site Collection Settings –> Site Collection Features, we can activate the SharePoint Server Publishing Infrastructure feature:

image

Re-Using the Existing Navigation Term Set

Once you activate this feature, you can now turn on Managed Navigation for the Global Navigation and select the same term set.  However, you will receive this error when you select the same term set as your Publishing Site Collection:

image

If you click OK, your Collaboration Site has now taken over the term set and if you click on one of the links, you get this error in our Publishing Site:

image

We can address this challenge by creating a new term set and pinning existing terms (instead of selecting Create Term select Pin Term with Children to re-use the existing terms) from the global navigation to our new term set.  This still means we have two navigation term sets, but by reusing the existing terms, we get the benefit of re-usability at least for each term:

image

SharePoint 2013 will allow you now to point to your new Term Set which then re-uses terms from the original Global Navigation term set.

Challenges with Managed Navigation in Collaboration Sites

Managed navigation only allows links to pages, so you cannot link to a document library directly in a collaboration site.  If you try you will get this error:

image

Another problem is that URLs will only work across site collections if they are absolute.  By default the URL when you add a page in a publishing site will be relative, so they don’t show up in the Collaboration Site.  SharePoint 2013 automatically removes the links from the navigation instead of generating an error.

image

image

The top navigation is the original Publishing Site Collection navigation, the second one is our Collaboration Site Collection.  The Finance News link doesn’t show up because it is a relative page URL that was created when we created that page.  The Collaboration Site Collection cannot find the page so it doesn’t display the link.

I created a page in the Collaboration Site Collection (because we turned on Publishing, we can now create pages in Collaboration Sites) and put an absolute URL in the navigation  and it works in both Publishing and Collaboration Site Collections:

image

image

 

Sort Order in Navigation

One other minor issue – if you notice in the above pictures, the sort order of the links is different.  That’s because in the Collaboration term set, our sort sort is set to default (which is alphabetical) and in the Publishing Site Collection its custom (it defaults to the order in which you create the links).  We can change either term set to default or custom and reorder the term so they are consistently ordered:

image

Once we have re-ordered the terms consistently, our finished global navigation is the same on both Publishing and Collaboration Sites:

image

image

Office 2013 Preview Environment is Down for Maintenance

I logged into my preview environment and received the following error:

image

My assumption is that this means that the environment is being upgraded to the latest SharePoint 2013 RTM bits from the early beta – looking forward to seeing if there are any improvements!

Issues with SharePoint 2013 Term Store Driven Navigation

In hooking up the SharePoint 2013 navigation to the term store, I found a few bugs at least in the current early preview version (I’m using the Office 2013 cloud version, let me know if you find the same behavior in a local install).

  • The term driven navigation ONLY seems to work with publishing sites – if you try it with a collaboration site, the navigation doesn’t appear at all.
  • There seems to be some caching going on between the term store and the site.  I created a term called “test” in my term set, deleted it, and it was still showing up in the Navigation.  I had the same experience when I switched the page linking from the term from the default Page Not Found to a specific page – it took a few seconds to work from the navigation.
  • In refreshing the page, I was able to generate this error below:

image

  • While SharePoint 2013 automatically generates a term in your navigation term set if you create a page, it doesn’t work the other way around.  If you click on any term without hooking it up to a page, you will get a page not found by default, or the page inherited from its term set parent.  This means that if I have a large number of terms and I want to create pages for each term, I have to create each page manually, link them up in the term set (under the navigation tab) and populate the content.  This seems like a very tedious task for cases where I have an existing catalogue of items (think for example of creating a product catalogue).

Using the SharePoint 2013 Term Store to Drive Navigation

One of the cool new features in SharePoint 2013 is the ability to use the Term Store to drive navigation.  In my previous post, I created a Term Set called Diseases.  Let’s use this to now drive the navigation for our site.

image

We can now use this term store to create multi-level navigation within our site.  Lets create a clean sub-site to start:

 

The sub-site creation function has been slightly buried in 2013 – its under Site Contents instead of being directly in the Site Actions menu as it was in 2010.

So let’s create a top level disease site and we’ll then create pages to correspond with our term store hierarchy. 

image

Here is my newly created Disease Site.  We can now enable the Term Store driven navigation for this site by going under Site Settings –> Navigation and selecting “Managed Navigation” for either the global navigation (the top navigation) or the current navigation (the left navigation).   Let’s do this for the global navigation for this site:

image

Choose the root node where you want to start your navigation.  There are two cool features enabled by the checkboxes below the term store:

  • Add new pages to navigation automatically: if this item is checked, SharePoint 2013 automatically creates terms in your term set every time you create a new page.
  • Create friendly URLs for new pages automatically: if this item is checked, SharePoint 2013 will use your term store to create friendly URLs based on your terms.

With these enabled, it allows you to very quickly generate a site navigation AND the associated pages based on your term set hierarchy.

Here is my site with the new navigation:

image

As you can see, the term store is hierarchical, which automatically creates hierarchical navigation for the global navigation.

Another cool feature is the page that is linked to is inherited within the term set.  So for example, let’s imagine that we want to have the same dynamic page for all the cancer terms.  Instead of creating a separate physical page for each term, we will point all terms to the same page and generate the content dynamically.  The term set navigation configuration allows us to do this by setting the linked page at the term cancer and then every sub-term underneath will automatically link to the same page unless specified within that sub-term.  So in my example, I have set the Disease term to link to a page:

image

If I drill into one of the sub-terms, it inherits the target page link unless I change it:

image

I can also specify the target link for all children of this page which is also by default inherited from the parent but can be overridden at any level of the term set.

Very cool stuff, this stuff solves a fundamental problem with navigation in SharePoint 2010 – the need to have a physical page for every navigation element.  Now I can have hundreds or even thousands of terms in my term store that simply link to a single page that dynamically serves up content based on the URL and the current term selected!

Creating new Term Sets In SharePoint 2013

The SharePoint 2013 term store is a “farm” level repository of hierarchical term sets and terms used by SharePoint for both metadata and navigation.

If you are using the Office 2013 preview environment, by default the term store administrator is blank – this prevents anyone from creating new terms.  You can change this by going into the SharePoint administration section and selecting term store:

image

In order to create new groups and then assign permissions to other people to manage the group and/or contribute term sets to the group:.

image

Once you have configured these settings, you should now be able to create and manage new groups and term sets.

To create a new term set hierarchy, you can first create your own group:

image

In this sample, we’re going to create a list of diseases for use in a medical term set.  We create first a group called “Diseases” and then a Term Set called “Diseases”:

image

There are a few interesting settings in the term set configuration:

  • Owner: This is the person who “owns” the Term Set
  • Contact: email address of someone to contact about the Term Set
  • Stakeholders: users assigned as Stakeholders will be notified when the Term Set changes
  • Submission Policy: dictates whether end users can add new terms (for example, in a folksonomy context) or whether the term set is controlled by metadata managers
  • Available for Tagging: the term set is available to end users for tagging content
  • Use This Term Set for Site Navigation: makes this term set available to be used to site navigation
  • Custom Properties: allows you to store additional metadata to describe your term set.

Creating Terms is easy – just start creating your terms as a hierarchy through the term store tool:

image

 

You can also add translations of these terms into multiple languages if you have turned on the working languages in the Managed Metadata settings:

image

Once you have turned on a new language, you can switch between languages in your term store and supply the translations to your terms:

image

One of the cool features in SharePoint 2013 will be the automatic translation feature – however, when I tried it in preview it failed to work:

image

Creating a Custom Page Layout in SharePoint 2013

In my last article, I documented how to create a Master Page in SharePoint 2013.  Master Pages define the global chrome elements of your web site.  This article explains how to create custom page layouts in SharePoint 2013.  For more information on the SharePoint 2013 page model, see this Microsoft article.

 

Planning Out Your Page Layout

For this example, we’re going to recreate a chunk of a page on our web site (www.navantis.com):

image

In our previous article, we created Master Page that defined the header, footer and global style sheets for this page.  Now we’re going to create a page layout that follows this basic format.  The content will be dynamic so that you could create as many pages as you like based on this layout. 

In our page layout, we’re going to define the following areas as “field controls”.  We’re going to create them all in a single content container and lay them out explicitly in order to reflect our design:

image 

The breadcrumb on the top left we can use SharePoint’s breadcrumb trail and we will embed the newsletter subscription into the page layout because we don’t want this to be explicitly defined into the layout.

Defining Your Content Type

So before we do the HTML work, let’s create a content type (a definition for content fields) that defines each of these fields for our page.  Based on the above plan, we need the following fields:

  • LargeHeadline
  • RightHandBlurb
  • LeftLinkList
  • LeftColumnTitle
  • LeftColumnText
  • RightColumnText

In each case, these will be HTML controls.  SharePoint 2013 allows you to define other types of content for these fields such as images.  Images in SharePoint 2013 can be rendered in specific dimensions and SharePoint 2013 will dynamic render any image to that specified to ensure they fit nicely into your defined layout.

To create a content type, go to Site Settings –> Site Content Types (under Web Designer Galleries).  If you look at Page Layout Content Types you will see existing ones for Article, Catalog, Welcome Page, etc.  We’re going to create a content type for our layout.  Click on Create and type in a name for your new content type:

Under Parent Content Type, you can select the parent your content type will inherit from.  If you look at the existing page layout content types, they inherit from the content type Page.  Page is in the group Publishing Content Types.  You can also specify the group you want to place your new content type – you could add it to the existing Page Layout Content Types group or create your own custom group.

image

 

When you have created your new content type, SharePoint 2013 will display the columns that were inherited automatically from the Page content type.  Lets add some new ones to represent our custom fields.  Click on the Add from new site column and let’s add each field:

image

For each column, we can specify the type.  For those fields we want to explicitly style, we can use the Single Line of Text option to have the content author put in plain text that will be formatted by the template.  For those fields that we want to provide more control to the content author, we can specify the field as Full HTML content and then content author will be able to put in any HTML using the rich text editor.    For our fields, let’s use this approach:

  • LargeHeadline – Single line of text
  • RightHandBlurb – Multiple lines of text
  • LeftLinkList – Full HTML
  • LeftColumnTitle – Single line of text
  • LeftColumnText – Full HTML
  • RightColumnText – Full HTML

image

For each field, create a site column.

Now we have fields to store the content, let’s now create a Page Layout.

Creating a Page Layout

To create a page layout, go to the Design Manager and Click on 6. Edit Page Layouts.  Click on Create a Page Layout.  Give your page layout a name, pick your master page and your content type you just created.

image

If you preview your page layout, you will see it doesn’t look like much – we need to update the HTML around the field controls to properly format the layout.

Publishing Your Page Layout

Before you can use your page layout, it has to be published.  To publish your page layout, go to Site Settings –> Master pages and page layouts.  You will see two files – one is HTML and one is ASPX.  in SharePoint 2013, the HTML is now the master and you can edit it using an HTML editor.  SharePoint 2013 then generates the ASPX file automatically.  To publish your layout, click on the HTML file and then Publish:

image

This will publish both the HTML and ASPX files, now making them available to create a page based on your layout.

Creating a Page

To create a page based on our new layout, go to New Page. 

image

If you then go to Page –> Page Layouts you will find our new Page Layout in the list of available Page Layouts.  When you switch the page layout, you should now see all the fields that we created earlier in our content type.

You can fill in your content either by typing it in or copying and pasting it from either your existing web site or from office documents such as Word.  The copy and paste has improved dramatically over previous versions!

Here is my content now filled out:

image

Now we can publish our page…

image

Our content is there, but the layout doesn’t reflect what we want…so now edit the HTML to update our layout.

Customizing Page Layouts

Page layouts in SharePoint 2013 are just HTML files with a lot of additional markup to specify where the controls are going to be injected.  We can now customize the HTML file through the design manager.  You can simply grab a copy of the HTML file, make your changes and re-upload your file and SharePoint 2013 will do the rest.  There are two ways to grab the file:

  • Go to Design Manager –> 3. Upload Design Files and map a network drive to your master page directory.
  • Go to Site Settings –> Master pages and page layouts and you can download your file.

After iterating a few times with the page layout and moving the snippets provided by SharePoint 2013 into the appropriate spots, we now have a nicely formatted page:

image

All the content within the main page area is fully managed by SharePoint can be easily changed by a content author.

image

Creating a new Master Page in SharePoint 2013

This article explains how to create a Master Page in SharePoint 2013 from an existing HTML page with associated graphics, scripts, CSS files, etc.  This article is targeted primarily at designers who want to start customizing their SharePoint 2013 site with minimal fuss.  In SharePoint 2013, designers can now use HTML, CSS and JavaScript to create dynamic pages where in previous versions it required an ASP.NET developer.  This article shows a step by step example.

For this example, I have used our own web site as a starting point: 

http://www.navantis.com/Portals_Collaboration.html

image

We’re going to convert this page into a master page for use in SharePoint 2013.

 

Planning Out Your Master Page

A Master Page in SharePoint represents the chrome elements of a page, e.g. those areas of the site that stay the same from page to page and the associated master styles, scripts, fonts, images, etc. that should be included on every page of your site. 

For our page, we want these chunks of content in our master page as well as all the governing style sheets, JavaScript, images, etc.:

image

 

image

 

The content in the middle of the page is what will governed dynamically by SharePoint using a combination of Page Layouts and dynamic content.

Before moving to SharePoint, create a stripped down HTML file that has the chrome isolated with the appropriate images, CSS, JavaScript, etc. in folders.

image

The dynamic content is going to go where it says, “Dynamic content will go here”.  My folder structure looks like this:

image

Ok, now that we’re organized, we can create our Master Page in SharePoint 2013.

 

Creating a SharePoint 2013 Account

Currently, you can download and install the SharePoint 2013 beta software locally, or you can create a cloud based account.  I have used the cloud based account route because its easy and free for the moment.  Go to http://www.microsoft.com/office/preview/en/office-365-enterprise to signup for an account and you will have your own SharePoint 2013 environment in the cloud.

The same instructions should work on a local version of SharePoint 2013 as well.

Creating a Publishing Site Collection

When you are first granted a SharePoint 2013 account, you are allocated a public facing web site and a collaboration site.  You can use your public facing web site, but I recommend you create a separate Publishing Site Collection for development purposes as Microsoft only allows one public facing web site in the current cloud environment.  To create a new Publishing Site Collection, go to Admin –> SharePoint –> Site Collections and click on the New Private Site Collection button. 

image

 

Now that you have a Publishing Site, you can start to customize it with your new Master Page.  Your default home page will look like this:

image

The Design Manager

If you click on “Design your site”, this will bring you to SharePoint 2013’s new Design Manager:

image

 

You can also reach this screen by clicking on the settings menu at the top right hand of the page and clicking on Design Manager

image

 

Mapping to the Master Page Directory

Click on 4. Edit Master Pages and you will see a screen like this:

image

We’re going to Convert an HTML file to a SharePoint master page.  Click on that link and you will see this dialogue box:

image

This directory is the folder containing Master Page and Page Layouts as well as their dependent assets (CSS files, scripts, images, etc.).  The easiest way to manage this folder is to map a network drive in Windows to this folder.  To do this go to Windows Explorer, right click on your computer and select Map Network Drive.  Copy and paste the URL for the location of this directory (it’s at the top of this dialogue box) and put in your login credentials.  You should then get a drive letter that maps to this folder and you can copy and paste files from your local machine into SharePoint directly.

NOTE: You will get an error when you map the network drive if you don’t have the “Keep me signed in” checkbox selected when you sign into Office 2013.  Sign out, delete your cookies, and re-authenticate with this box checked and it will work. 

image

 

With a mapped network drive, we can simply copy our template and dependent files into this folder. 

NOTE: SharePoint 2013 will allow you to create folders in this directory, so this might help in keeping organized to create a separate folder as the root of your master page and its files. 

NOTE: If you cannot map the drive, you can also upload files through the UI by going to Site Settings and Clicking on  Master pages and page layouts.

image

When you click on this you will access the same master page library that is used by the Design Manager. 

image

If you click on files you can then upload documents and create folders through the browser UI.

 

Creating a Master Page from HTML

Now that we have uploaded our files, we’re going to create a Master Page.  SharePoint 2013 can take your HTML file and convert it into a ASP.NET Master Page automatically.  When it does this, it will link the HTML and Master Page together so that if you change your HTML file it will sync these changes into the Master Page.  This allows designers to now work in their comfort zone with HTML, CSS, JavaScript, etc.

Go to the Design Manager.  Click on 4. Edit Master Pages and then click on Convert an HTML File  to a SharePoint master page.

image

Select your HTML file and click insert. 

If you go to the Design Manager, you will also now see your Master Page in the list of Master Pages:

image

NOTE: SharePoint 2013 expects your HTML to be XML Compliant. If you have older or non-compliant HTML you will get an error. Fix your file and try again.

If you click on the Master Page, it will take you to a preview page.  At the bottom of the page you will see a Yellow Box that represents the place holder where dynamic content is going to be inserted…We’re going to now move that place holder into where we want it to replace our dummy text in the middle of the page.

Download the HTML file from the SharePoint 2013 environment (you can just copy and paste it if you have a mapped network drive) and open it in your HTML editor and you will see that SharePoint 2013 has decorated your HTML with a number of tags.  These tags are used by SharePoint 2013 as markup to specify where to put to insert content when it generates the Master Page.  You can edit and add HTML around them and add new snippets to the HTML to add dynamic navigation, content containers, metadata etc. 

In your newly improved HTML file, you will see tags in the header (used to insert metadata, title and other header information), at the top of the body (used to insert the ribbon), and at the bottom you will find a div called “ContentPlaceHolderMain”. 

This is a content place holder and is used by the Page Layout to inject content dynamically.  You can move this place holder into the appropriate spot in your HTML to insert the content correctly.

image

Publishing Your Master Page

The last step is we need to publish our master page – its currently in draft.  If you don’t publish it you won’t see it in the Site Master Page Settings drop down menu.  To publish your page, go to Site Settings –> Master pages and page layouts and then find your HTML file.  Hit the publish button on the ribbon. 

NOTE: If you try to publish the master page itself you will get an error because it is linked to the master HTML file.  If you publish the HTML file, the master page is automatically published as well.

Assigning Your Master Page to your Site

Now that your master page is published, you can assign it to your site.  All pages in your site will adopt this new chrome.  Publish sites have two types of pages: 1) publishing pages and 2) system pages.  Publishing pages are traditional web pages and System pages are views of lists, document libraries and other administrative pages.  You can assign your master page to either type of pages.

To assign your master page, go to Site Settings –> Master Page (under Look and Feel) and select your master page from the drop down list (if its not there then you probably didn’t publish it successfully or it has errors).  Your site will now adopt your new look and feel!

Here is my default site with the Master Page site assigned.

image

Watch Data Transfers with Microsoft Azure–they can cost you money!

We have a client that is hosting their site on Microsoft Azure.  It is a basic content managed site with a SQL Azure backend.  When our client got their monthly hosting bill, we discovered a significant transfer cost that couldn’t be easily explained (it was almost 100 gigabytes a month!).  When we investigated the problem, we found a couple challenges:

  • Our CMS was constantly polling the database to synchronize the azure SQL database with its in memory cache.  This seemingly innocuous polling was racking up transfer activity on a continual basis.
  • The Azure storage was in one Microsoft data center and our staging environment was in a second Microsoft data center.  We discovered that when this is set up that way, we ended up being charged double because Microsoft charges both for the external data going out one data center and the incoming data entering into the second data center.

Here is the interesting thing: in a traditional hosting infrastructure, these issues wouldn’t generate any additional cost.  It’s the “pay as you go” model that cloud provides that causes the increased costs on the customer’s monthly bill.

So if you are building Azure based (or any other cloud based for that matter), you will need to focus on optimizing the impacts of performance, data transfers, and storage in ways that you could get away with in a traditional hosting environment as these are highly metered and cost money for every poor line of code, bad configuration, increased need for processing power, etc..

SharePoint 2013 First Impressions: Creating a new Site Collection

In the new SharePoint 2013 preview environment (sign up for an Office 365 Developer Site and you can create your own environment) you get a very nice “Central Admin” type tool for managing all your site collections.  By default, you get the following site collections:

  • A public facing web site
  • A private intranet site
  • A private search site
  • A private my site

In the preview site, you restricted to a single public facing web site, but you can create more site collections.  One good example would be to create a publishing site collection from scratch – just create one as a private collection and you can have a ready deployable WCM style publishing site.

One big warning though – creating a new site collection takes a very long time!  On my instance, it took over an hour to create a site collection!

Powered by WordPress | Maintained by: Navantis