SPTechCon San Francisco Session Resources

Heather and I have been having a blast at SPTechCon in San Francisco, and we will be updating this post with resources to share with attendees to our sessions.

Get Ready for HTML5 and SharePoint (Tuesday, 11:30 AM)

Heather and I demonstrated that HTML5 can be used in your SharePoint sites today, and it isn’t rocket science! After a lively discussion with the audience, we started the demos!

First, Heather demonstrated a sample HTML5 page with simple, semantic markup. Then, using the a copy of her “Just the Essentials” Master Page, she added some of the new HTML5 elements like <header>, <nav> and <footer>.

Then, I took the wheel to show how you can get any kind of markup you want from any SharePoint list. Creating a new view of the announcements list (Insert → Data View → Empty Data View), I wiped out the data view and replaced it with my own custom “Baseline DVWP.xsl” file to render the Announcements list with HTML5 markup.

Back At It Again … More CSS Goodness (Tuesday, 4:00 PM)

Here we go again – More CSS goodness for your SharePoint sites! First, Heather brings up this awesome CSS Specificity chart called “CSS Specifishity“.

Based on Heather’s new approach to writing CSS for SharePoint, she showed several samples of writing style statements that simply have a stronger specificity score/weight than what is being applied to a SharePoint component. For example:

a[id$=editPageLink] {
background: red;
}

The above style statement targets the “Edit this Page” link in a SharePoint wiki page by looking for specific text at the end of the anchor’s ID value. There is no need to track down the style statements used by SharePoint and make copies of these long style selectors; that just adds more baggage to your CSS file.  Instead use a tool like Firebug in Firefox to identify and build your own selector. Heather showed style statement samples for editing table views, controlling a web part based on location and a quick trick for controlling form inputs based on type.

Gaining Total Control of your Sites with Data View Web Parts (Wednesday, 3:30 PM)

I was super pumped to do this session. I will blog more about it real soon, but I have come up with a new, and in my view, wildly efficient way to create custom views of your SharePoint data with XSL. While I work feverishly on a detailed post discussing my new “Magic Data View Builder” template, here’s a quick recap:

First, 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 that starter template, I created an HTML5 version of the announcements list, marked up as a series of articles.  Then, I showed how to create a bar chart using the HTML5 Canvas and a tasks list. Finally, a custom view of a Contacts list including embedded HTML5 Microdata in the hCard format. I had a blast, and I will be writing a super-deep dive article soon outlining my new method of creating custom Data View Web Parts – without SharePoint Designer.

Thanks for coming to our sessions!

 

26 thoughts on “SPTechCon San Francisco Session Resources”

  1. Hey Dustin and Heather, thanks for the great presentation on CSS yesterday. Can you remind me what the 10% discount code was again for your online classes?

    1. All of the code is being posted within a few hours of a session wrapping up! We don’t have any slides to post as the sessions were demo only. The sessions weren’t recorded, sorry!

    1. We’ll be posting an HTML5 version of the essentials master page in the future, but the sample page has comments indicating where you could safely use html5 now in your own master pages! 🙂

      1. Hi Dustin,
        I attended your DVWP session yesterday which was great. I was playing around with it a little bit today and I wanted to share with everyone a way to debug the XSLT transformations.

        If you apply the following xslt rule it will simply dump the raw xml into the browser.

        You can then take that raw xml data from Sharepoint and save it as an xml file. Then open that file with visual studio and modify the StyleSheet property of the xml document to whatever your xlst file is. VS comes with an XSLT debugger so that you can step through your xslt code and can also preview the output HTML without the need to constantly refresh the page in Sharepoint.

Leave a Reply

Your email address will not be published. Required fields are marked *