SharePoint 2010, CSS3, HTML5, jQuery & The JavaScript Client Object Model

Sunday, February 19 2012

WHAT & WHY:
It’s been a while since my last post.  If, like me, you’re in a hurry or impatient, you may choose to jump ahead to the “HOW” section  of this post– I won’t be offended.  This post begins what will be series regarding SharePoint 2010 and how to squeeze the most out of the platform.   SharePoint, a server product of the Microsoft Office Product Suite, is a terribly-complex and wonderfully-simple product.  I know, that’s a contradiction.   One of the key objectives of SharePoint is to allow the “Knowledge Worker” (business user) to automate and organize their work processes without the need to engage IT at every step and wait in line in the overflowing queues.  SharePoint has succeeded because of its ability to empower the end-user to create their own solutions to every day business challenges.  The reason for that success is that it is reasonably simple for the end-user to learn and use.  The effect of that “wonderfully-simple” product for the end user, is the “terribly-complex” multi-tier, multi-server, multi-technology infrastructure that is maintained by the IT staff.  SharePoint has a long and steep learning curve for the SharePoint admin and developer.

 

Today, we are seeing some unifying technologies that promise to extend the capabilities of SharePoint while simultaneously improving user experience and simplifying the job of the SharePoint Developer.  I’ve discussed JavaScript and jQuery in previous blogs, and will not be providing an introduction to these important technologies.  We will however,  be investigating how to integrate and leverage JavaScript, jQuery, CSS3, HTML5, and the SharePoint 2010 JavaScript Client Object Model.  Obviously, the undertaking is more than will fit in one post and it would be too much to consume in one bite.  Instead, we will take smaller bites with each post so that you can create your SharePoint developer template(s) and start playing with these empowering tools.  The rich benefits of the effort include easier DOM manipulation, less post-backs, better performance,  and better visual appeal and user acceptance.

 

To begin, I’ll first explain my strategy in setting up a development environment.  SharePoint 2010 is a force to be contended with.  There is little you will do while customizing SharePoint that will not have exciting (unexpected) side effects.  A part of our challenge as SharePoint Developers, is to minimize the number of surprises (gotcha’s).   SharePoint, even before our modifications, is rich in its use of JavaScript.  jQuery is a very rich JavaScript library and, if you don’t already, you should take the opportunity to leverage the power of this library in your applications.   We will want to include this libraries and other resources (we’ll identify those in a minute) once and only once in your application so that they can be accessed everywhere and not degrade performance or unnecessarily consume memory.  A natural solution to this requirement is to place these references in our masterpage(s).  That of course leads us right into the discussion of SharePoint Branding and the other resources used by the masterpage and the rest of your site.  Styles (CSS style sheets) and images are some of the other resources that are best loaded within our masterpage template(s), and we will be looking at integrating these resources in a “Sandboxed” solution so that they remain compatible with SharePoint Online and other hosted multi-tenant SharePoint Implementations.

 

I won’t profess to be a graphic web designer and the samples shown here are not as exciting as many of these award winning SharePoint Sites, these techniques, however, will allow the more graphically adept SharePoint Web designers to more easily leverage the latest technologies to create their eye catching effects.  But Before we explore how, lets demonstrate a very simple example of what and why. The sites below are the same site and content but are leveraging just one of the many CSS3 features – “border-radius” .  By applying this feature through style sheets, we can change the “feel” of the site with very little effort.  The many  capabilities of CSS3 are beyond the scope of this post, but you should get a sense of the power CSS3 can add to SharePoint for a minimum effort.

 

image

The image to the left is an example of what can be done with “vanilla” out-of-the-box SharePoint and a little bit of effort at styling.  It looks … well,it looks like SharePoint.  imageThere is a lot that can be done to change that look and feel, as we saw with the award winning sites, but at what expense and effort.  SharePoint’s glamour is its ease of use, cost and speed of deployment.  So it would make sense to maximize the look and feel of our site without sacrificing  ease, cost, or speed of deployment.  The Image on the right uses only the “border-radius” effect to soften and “de-institutionalize” the experience for the end user.  There are many additional CSS3 features that could be incorporated, but, for example, that picture and border (regardless of your opinion of the effect) was done with just this tiny piece of CSS code added to the style sheet.  image   This is a tiny effort when compared to some of my earlier border radius attempts that included multiple stitched graphic images and a lot of trial and error and “tweaking” .  I’ll explain that little tab on the left navigation panel  in a later post.

 

WHEN:

HTML5 and CSS3 are browser(client-side) technologies.  Even though these technologies emerged much later than SharePoint (in fact, the technologies are far from mature and standardized in browsers today),  there is much we can do to begin enjoying their benefits.  For the Microsoft Internet Explorer, you will need Version 9.0 or later.  For Version 8 users, the content would look much like it does on the left image above.  To provide the best and most reliable experience for IE 9.0 users, SharePoint 2010 Service Pack 1 should be deployed.  For development, Visual Studio Web Standards Update and Expression Web 4 Service Pack 1 should be downloaded and installed.  You will find articles online on how to select the new schema for HTML5 and CSS intellisense to work in Visual Studio 2010 and Expression Web 4 SP1.   As far as coding HTML5 in SharePoint Designer 2010,  avoid it.  SPD2010 has a nasty habit of removing anything it doesn’t like, and it doesn’t understand HTML5 schema.  I place the CSS3 styling in style sheets and apply it through classes.  I would guess the safest way to handle HTML5 features like canvas is to inject the markup with jQuery so that SharePoint Designer doesn’t see it.  Perhaps Microsoft will publish an upgrade for SharePoint Designer.  Although less than perfect, using some of these advanced features can be done today.  So, the answer to WHEN is NOW!
(In future posts we’ll discuss more of the differences in browsers and versions and what can be done to craft a “cross-browser” consistent experience, but if you are in a hurry to begin tackling some of these challenges, I strongly recommend Manning: HTML5 in Action.)

HOW:

 

 STEP1 – Open a COPY of your masterpage in your editor of choice

Now, let’s begin the fun part of this journey -- setting up our first masterpage so that we can begin to experiment (play) with HTML5 and CSS3. imageThe first step is to create a copy of your preferred masterpage. Whether you prefer to start with “minimal.master”, v4.master, or an already branded masterpage of your own, you will want to create a copy to which you will be making some modifications. I perform most of my masterpage edits in SharePoint Designer 2010 so that I have access to the SharePoint Server and the results are at least reasonably rendered in the split-screen mode of the editor. Because of the limitations of that editor (not understanding the HTML5 schema and removing potentially risky code – as in all your HTML5 and CSS3 code) I set the default editor for CSS inside that editor as Expression Web 4 with SP1. This provides me the intellisense when working with the new CSS3 schema in my style sheets.

 

STEP2 – Modifying our document type declaration

In the illustration above, you can see one of the wonderful changes that came with HTML5.  The DOCTYPE declaration is easy to remember.  Browse to the DOCTYPE declaration in your new masterpage and change the line to read “<!DOCTYPE HTML>” (no quotes).  That’s really al we need to alert the browser that we are interested in using the new HTML5 schema when rendering our page – EXCEPT for one more tiny “gotcha” .  If you scroll down into the <Head> tag of your page, you should find this line –’ <meta http-equiv="X-UA-Compatible" content="IE=8"/>’.  This line instructs the browser to use IE8 mode when rendering your content.  As mentioned previously,image IE9 or higher is required to take advantage of our HTML5 markup.  What we need to do is change that “IE8” to “IE9” or “IE10” depending on the browser you will be targeting with your page.  I chose “IE9” for the purposes of this post and the result looks like this illustration.

 

STEP3 – Create our Resource libraries in SharePoint.

This is where the more advanced SharePoint Developers may choose to diverge a little from the path, but the concepts remain the same whether imageyou are deploying these resources through the UI, SharePoint Developer, or Visual Studio.  What we will be doing next is creating our folders for JavaScript libraries and files, CSS Style sheets, and any images that we need.  I have chosen to NOT deploy these resources to the SharePoint Root (14) folder as a farm solution.  My reasoning was to maintain compatibility with SharePoint Online and allow “tenant” solution activation and use of the masterpage solution from anywhere in the Site Collection.  As a result, I used Visual Studio and provisioned my folders under "the “Site Assets” library.  Regardless of your method of deployment, if you want to maintain compatibility with SharePoint Online, and/or reap the benefits of SharePoint monitoring and controlling your scripts that is available only for “sandboxed” solutions, then your resources should be deployed as a site scoped solution and stored in the content database.

 

STEP4 –Deploy your content (JavaScript, CSS, Images).

Using your preferred method (UI,SPD, VS2010), Deploy your content resources to the newly created folders.image This will allow us to point our links and references to these assets from within our masterpage.  You will have a different set of resources, but the concept remains the same.  There is one file that you may find particularly interesting – test.js.  I created this file to allow a way to determine if I was successfully accessing these resources from my masterpage.  Because browsers generally fail “gracefully”, we want a way to determine whether our scripts have errors or whether they are perhaps not being included at all in the rendered content.  I chose a very simple JavaScript alert function which I can call from my pages as a test.  The simple JavaScript is below:

function

doit(){
     alert(
"Hi there ... this loaded from the SiteAssets/js Folder");
}

We’ll get into the details later, but, by including this link and calling my function, I can test whether my function was loaded successfully by SharePoint

  <SharePoint:ScriptLink language="javascript" name="~site/SiteAssets/js/test.js" runat="server"/>

STEP5 –Gluing it all together in your masterpage

Now we need to change our masterpage to include all those resources that we uploaded to our folders.  If you followed my folder structures, you can use the examples from my masterpage as a guide in defining the paths to your content.

Custom CSS Registration

First we’ll reference our CSS files.  By including <SharePoint:CssRegistration ID="CssRegistration1" name="/SiteAssets/css/pTech.css" After="corev4.css" runat="server"/> within the head tag of our masterpage, we are instructing SharePoint to insert our custom CSS file, pTech.css , after the default coreV4.css.  This allows us to override the default styles with our definitions.  Certain values may need an “!important”  attribute to override the same attribute in coreV4.css.  

Linking JavaScript Files and Libraries

The SharePoint namespace provides us a method to link our custom JavaScript  to SharePoint – SharePoint:ScriptLink.  The syntax is as shown below.  Remember, we are storing these assets in the content database, so the “~site/”  placeholder communicates to SharePoint to retrieve these assets from there.

<SharePoint:ScriptLink language="javascript" name="~site/SiteAssets/js/jquery-1.7.1.min.js" runat="server"/>
<SharePoint:ScriptLink language="javascript" name="~site/SiteAssets/js/jquery-ui-1.8.17.custom.min.js" runat="server"/>
<SharePoint:ScriptLink language="javascript" name="~site/SiteAssets/js/pTechmaster.js" runat="server"/>
<SharePoint:ScriptLink language="javascript" name="~site/SiteAssets/js/test.js" runat="server"/>

Linking images

In most cases, you will probably be linking your images from your custom CSS file.  In my case, that was the pTech.css file.  In my experience, the most reliable way to access these images is similar to the approach below, which is the style that sets the pattern behind the s4-Title area.

.s4-titletext

{
background-image:url('../../SiteAssets/Images/pattern3.png');
}

 

STEP6 –Activating & setting your new default masterpage.

If you used Visual Studio and did not activate the solution, you will need to activate it now from the  Site Solutions Gallery.image And if you did not set it as the Site Default Masterpage in the Web Solution Package, you will need to do that now.  The easiest way to set and reset the Default Masterpage is through SharePoint Designer 2010.  Select Master Pages from the left navigator, and in the right pane select the row by clicking anywhere except the file link.  Once the row is selected, right-click the row and chose Select as Default Master Page from the drop down.  if you browse to the home page in your browser and refresh the display, your new masterpage should be active and any new styles should be applied.  If you have any difficulties, check to make sure the solution (if you deployed it as a solution) is activated.  Then verify that you paths to your script files are being accessed.  You can use the Test.js doIt() to test this.  Finally, using your favorite browser tools, such as IE Developer Tools, verify that your styles are being applied and not overridden by the defaults.  If time allows, I’ll package up modified solutions and WSP files of both the v4.Master and minimal.Master masterpages to make the effort a little easier for those folks facing challenges.

 STEP7 –Learn, Play, Provide Feedback, and Extend.

That pretty well wraps up our first post.  You should be able to start experimenting with HTML5 and CSS3 in you new masterpage and any pages that reference it.

For the next post, I intend to discuss what features work and which don’t work and what resources we can use to help provide the missing functionality until our selected browsers support it.  We’ll be exploring Modernizr and PolyFill libraries to fill those gaps.  If you get either eager or impatient, I strongly recommend  Manning: HTML5 in Action.   

I hope you found this post helpful and informative and I hope you stop back for the follow-up blogs where we’ll dive deeper into using these newer technologies in combination with the JavaScript Client Object model to create some SharePoint Unfettered applications.