SPTechCon 2012 in Boston

Thanks for attending our sessions!

SPTechCon rocked!

SPTechCon is winding down now in Boston, and we had an awesome experience sharing our knowledge with attendees. Heather and I have created this post with resources for attendees of our sessions (and other curious lurkers).

Creating Custom Views with any HTML and JavaScript – It’s Magic (Tuesday, 11:30 AM)

Ah, the Data View Web Part. Not nearly as popular as it needs to be! Here’s a recap of my “magical” Data View Web Part session at SPTechCon 2012 in Boston:

First, I discussed creating your technical requirements before letting SharePoint enter into the picture. In this case, the requirements involved an expanding/collapsing FAQ-style list written as a definition list in HTML and enhanced with jQuery transitions.

Then, I demonstrated replacing a List View Web Part’s “XSL Link” property with the URL to a copy of the Magic Data View Builder template, which I uploaded to a document library. On refresh, you’re given a starter template for your own custom list view.

Using the Magic Data View Builder, I pasted in the HTML for the FAQs and added references to the list’s Title (Question) and Answer fields. The resulting XSL can be downloaded here: FAQs.xsl (keep in mind, jQuery should already be referenced on your site for this one to work)

Then, I created a content slider from an announcements list animated in a cool 3d-like carousel. I used Roundabout, a slick jQuery plugin, for this demo. Again, using the Magic Data View Builder, I updating the list’s view to render a bulleted list that is then processed by Roundabout, and turned the boring announcements list into a rotating carousel of news stories. Cool! Here’s the Roundabout Announcements XSL sample – you’ll need to update the path to the jquery.roundabout.min.js script that you downloaded from the Roundabout site.

A few people hung out after the session, and for the super-adventurous, try creating a new “new” or “edit” form for a Contacts list using SharePoint Designer, and using this custom contacts list form XSL. It requires both jQuery and jQuery UI. A little secret bonus. :)

Learn How to Put HTML5 in Your SharePoint Master Page (Wednesday, 11:30 AM)

Heather and I really enjoyed sharing our HTML5 advice and guidance in today’s SPTechCon session. Some key takeaways:

  • You can use HTML5 markup today
  • There are aspects of the HTML5 APIs that have good browser support
  • IE will pretty much render anything you throw at it, though sometimes you need to trick it with a tiny bit of JavaScript

After a short back-and-forth with the audience, Heather dove into a sample HTML page that was then updated with HTML5 markup in an effort to give more semantic meaning to the code and the content.

More discussion followed, then Heather showed how you can simply and easily update your existing SharePoint Master Page to include some new HTML5 markup elements. The goal? Same as before: Give semantic meaning to otherwise arbitrary markup such as navigation elements or footer content. She used her awesome “Just the Essentials” master page as a starting point. You can also check out the most recent HTML5 SharePoint Master Page along with her commentary!

More Q&A (thanks for the great questions, audience!) and then I jumped in with some developer-side tidbits.

First, I showed how you can add the “contenteditable” attribute to a style element, giving you an in-line style block that can be edited right in the browser. A fun hack! Thanks to a cool post on CSS-Tricks.com to give me something to play with. :)

Then, some Local Storage goodness – I showed how a simple bit of jQuery can make it easy to preserve form values on a SharePoint form. If the browser crashes, you can re-open the form and – BOOM! – your data is recovered from the browser’s Local Storage object. Check out a starter script for Local Storage.

Make SharePoint Look Good! (Wednesday, 3:30 PM)

The final session of the day, and a lot of great content to share!

Heather started out focusing on how CSS used alone can make sweeping changes to the look and feel of a web site, showing the CSS Zen Garden and some various styles posted by recent CSS Zen Garden contributors.

After showing SharePoint naked (no CSS, that is), Heather introduced some of the must-have browser-based tools for SharePoint web developers. Heather and I curate a list of our recommended FireFox add-ons – check it out, give it a thumbs up and don’t forget to follow it!

Next, she gave a quick demo of her amazing SharePoint 2010 CSS Chart, and then demonstrated her process for what I call “selector divination”, or how to create the right CSS selector, keeping in mind that CSS applies rules such that your CSS selector specificity.

Then, on to the new hotness: CSS3. A quick demo of CSS3 Generator, and then some “wow, that was easy” copy and paste to show how easy it can be to re-style SharePoint content. Oooh, rounded corners and drop shadows! Wait, what about gradients? The Ultimate CSS Gradient Generator to the rescue!

But wait … there’s more! How about attribute selectors? Heather showed how attribute selectors can be used to add an icon to a single link in a nav bar based on the value of the link’s URL.

.menu-horizontal li.static a.static[href*="blog"] {
   /* styles here */
}

Then pseudo-selectors – changing styles on hover:

.menu-horizontal li.static a.static:hover {
   /* styles here */
}

How about generated content? Awesome for print views to include the URL that your anchors link to. You can’t click on paper after all.

.menu-horizontal li.static a.static:before {
   content: "(Links to: " attr(href) ")";
}

A nice little bonus – hide the option in SharePoint’s settings page that allows designers to change the colors of a SharePoint theme.

tr[id$="customizeThemeSection"] {
   display: none;
}

Here is the CSS sample code from the session!  As a bonus Heather also is giving away CSS code to style a web part table.

Thanks for coming to our sessions!