Design patterns using XSL to generate web part user interfaces

Paul Galvin, SharePoint MVPSlalom Consulting (www.slalom.com)

Welcome to Houston Techfest 2011

Thank you for being part of the 5th Annual Houston Techfest

Please turn off or set all devices to vibrate.

Thanks to our Diamond sponsors.

Houston Techfest 2011

Design patterns using XSL to generate web part user interfaces (DEV300)

Paul GalvinBrightStarr

(www.brightstarr.com)

Welcome to SharePoint Saturday—The Conference

Houston Techfest

Agenda• About Paul and Slalom (brief)• What’s the End Goal?• Code Review

• Setup (“Pretend Announcements”)• Announcements Collection and individual announcements• Web part structure and properties• XSL helper class• Review actual XSL• Demonstrate debug, simple and “fancy” XSL views• Demonstrate using XSL from a document library

• Wrap-up

Slalom Consulting is a national business and technology consulting firmwith more than 1,500 employees across 10 offices in North America.

Houston Techfest

About Paul Galvin• Microsoft MVP since July 2008• Just completed book on SharePoint Designer

Workflow• “Paul Galvin Workflow” on Amazon.com

• Working with SharePoint since January 2007(MOSS just came out)

• Twitter: @pagalvin• Email: galvin.paul@gmail.com• Blog: www.mstechblogs.com/paul

Houston Techfest

About Slalom

Houston Techfest

Slalom is Hiring• Pick up some glossies

Houston Techfest

Concept - XSL• XSL is “extensible style sheet”• XML goes in …

• A parser consumes the XML and emits transformed XML.

• Whatever you want comes out• In this case, HTML comes out

• Other uses:• XSL to generate / supplement XML messages• Microsoft BizTalk

Houston Techfest

Demo Setup• Visual web part

• Could be old style web part• “Pretend” Announcements

• Announcements collection of individual announcements• The collection and the individual announcements

“know” how to generate an XML representation of themselves as strings

Houston Techfest

The XML<AllPretendAnnouncements Count="3"> <AnAnnouncement> <title>SharePoint Saturday India</title> <location>Virtual Event</location> <description><![CDATA[<a target=_new href='http://www.sharepointsaturday.org/india/default.aspx‘>Click here to view the event details.>]]</description> </AnAnnouncement> <AnAnnouncement> <title>BrightStarr Cookout</title> <location>New Jersey, USA</location> <description>BrightStarr is holding its annual summer cookout.</description> </AnAnnouncement> <AnAnnouncement> <title>Test Announcement</title> <location>Test location</location> <description>This is a test announcements.</description> </AnAnnouncement></AllPretendAnnouncements>

Houston Techfest

<![CDATA[ … ]]>• What is that token for?

Houston Techfest

Web Part Properties• XSL File

• URL• As you’ll see, this can be in “layouts”, a document library

or any URL to which the user has access at runtime

• Encode results? • If true, results are html-encoded• This is useful for debugging

Houston Techfest

Helper Class• Method for pulling XSL files into a string• Method to transform XML into HTML using

that XSL

Houston Techfest

Demo Time• Let’s do a demo

• Review the code• Run the code• Try out different XSL files and links

Houston Techfest

Summary• Use XSL because…

• It separates the user interface from the c# logic• It makes you think about the data first, which is always helpful• You can separate roles.

• Developers to do the hard C# coding• Designers and even end users to edit and manage XSL

• XSL can do more…• Embed jQuery• Embed advanced CSS • Reference nodes, attributes, sort results, define variables

Houston Techfest

Questions?Paul’s contact information:• galvin.paul@gmail.com• Twitter: @pagalvin• www.mstechblogs.com/paul

Houston Techfest

Thanks to our sponsors