Pro SharePoint with jQuery - Springer

Pro SharePoint with jQuery

■■■ Phill Duffy

Pro SharePoint with jQuery Copyright © 2011 by Phill Duffy All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN 978-1-4302-4098-3 ISBN 978-1-4302-4099-0 (eBook) Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. President and Publisher: Paul Manning Lead Editor: Kate Blackham Technical Reviewer: Anthony Pounder Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan Gennick, Jonathan Hassell, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Coordinating Editor: Rebecca Freed Copy Editor: Kim Wimpsett Production Support: Patrick Cunningham Indexer: SPi Global Artist: SPi Global Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science+Business Media, LLC., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. For information on translations, please e-mail [email protected], or visit www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is available to readers at www.apress.com. You will need to answer questions pertaining to this book in order to successfully download the code.

Dedicated to Pip, my family, and all those who go out of their way to help others.

Contents at a Glance About the Author ........................................................................................................ x About the Technical Reviewer ................................................................................... xi Acknowledgments .................................................................................................... xii Introduction ............................................................................................................. xiii ■Chapter 1: Introduction ........................................................................................... 1 ■Chapter 2: Integrating jQuery into SharePoint ........................................................ 7 ■Chapter 3: Common jQuery Features, Actions, and Methods ............................... 27 ■Chapter 4: Debugging jQuery ................................................................................. 75 ■Chapter 5: Viewing SharePoint Data Using jQuery ................................................ 85 ■Chapter 6: Building a Task List Viewer Application Page.................................... 107 ■Chapter 7: Adding Controls to Create, Edit, and Delete Tasks ............................. 133 ■Chapter 8: Enhancing SharePoint with jQuery..................................................... 153 ■Chapter 9: Using jQuery Plug-ins to Enhance SharePoint ................................... 177 ■Chapter 10: Extending jQuery .............................................................................. 227

Index ....................................................................................................................... 255

iv

Contents About the Author ........................................................................................................ x About the Technical Reviewer ................................................................................... xi Acknowledgments .................................................................................................... xii Introduction ............................................................................................................. xiii ■Chapter 1: Introduction ........................................................................................... 1

A Bit About SharePoint....................................................................................................... 1 Web Parts ................................................................................................................................................. 1 Office 365 ................................................................................................................................................. 2 Application Pages ..................................................................................................................................... 2 Framework ............................................................................................................................................... 2 SharePoint Lists........................................................................................................................................ 2 Web Services ............................................................................................................................................ 3 Self-Service .............................................................................................................................................. 3

jQuery: The “Write Less, Do More JavaScript Library” ...................................................... 3 Where Do You Get jQuery From? .............................................................................................................. 4

Summary ........................................................................................................................... 6 ■Chapter 2: Integrating jQuery into SharePoint ........................................................ 7

Deploying jQuery to SharePoint ......................................................................................... 7 Deploying Using a WSP (SharePoint Solution Package) ........................................................................... 8 Deploying jQuery Directly to a Document Library ................................................................................... 16

v

■ CONTENTS

Making jQuery Available to the SharePoint Page............................................................. 17 Using the Content Editor web part (CEWP) ............................................................................................. 17 Using a Custom Action............................................................................................................................ 19 Using the AdditionalPageHead Delegate Control .................................................................................... 21 Adding the Script to the Master Page ..................................................................................................... 24 Adding a Script Reference from Within an Application Page.................................................................. 24 Adding a Script Reference Dynamically Through Code .......................................................................... 25

Summary ......................................................................................................................... 26 ■Chapter 3: Common jQuery Features, Actions, and Methods ................................ 27

Hello World ...................................................................................................................... 27 jQuery Basics ................................................................................................................... 29 The jQuery() Function ............................................................................................................................. 29 Common jQuery Actions and Methods.................................................................................................... 43

Summary ......................................................................................................................... 73 ■Chapter 4: Debugging jQuery ................................................................................. 75

Creating the JavaScript File to Debug ............................................................................. 75 Alert: It’s Not a Debugger but It Can Help! ....................................................................... 77 Console ............................................................................................................................ 78 Stepping Through Your Code ........................................................................................... 79 Stepping Through Code Using Visual Studio .......................................................................................... 80 Stepping Through Code Using the Browser ............................................................................................ 81 Inspecting Objects .................................................................................................................................. 82 Checking Whether jQuery Has Loaded ................................................................................................... 83

Using a Logging Framework ............................................................................................ 84 Moving to Production ....................................................................................................... 84 Summary ......................................................................................................................... 84

vi

■ CONTENTS

■Chapter 5: Viewing SharePoint Data Using jQuery ................................................ 85

Creating a jQuery Web Part to View Images from a Picture Library ................................ 86 SharePoint Sandboxed Solutions ..................................................................................... 95 SharePoint Web Services................................................................................................. 96 SharePoint 2010 Managed Client Object Model ............................................................ 103 SP.js...................................................................................................................................................... 103

Summary ....................................................................................................................... 105 ■Chapter 6: Building a Task List Viewer Application Page.................................... 107

Planning the Task List Viewer ....................................................................................... 107 Task List Viewer Requirements ............................................................................................................ 108 Task List Viewer Prerequisites ............................................................................................................. 109

Creating the Task List Viewer Application Page ............................................................ 109 Adding an Application Page .................................................................................................................. 109 Adding the HTML to Display Tasks ....................................................................................................... 111 Styling the Task List ............................................................................................................................. 112

Creating the jQuery JavaScript ...................................................................................... 114 Viewing Tasks....................................................................................................................................... 116 Viewing Task Details ............................................................................................................................ 123 Changing the Task Status ..................................................................................................................... 124

Summary ....................................................................................................................... 131 ■Chapter 7: Adding Controls to Create, Edit, and Delete Tasks ............................. 133

Deleting a Task .............................................................................................................. 133 Adding the HTML .................................................................................................................................. 133 Adding the CSS ..................................................................................................................................... 135 Adding the jQuery Code ........................................................................................................................ 136

vii

■ CONTENTS

Adding a New Task ........................................................................................................ 141 Adding the HTML .................................................................................................................................. 142 Adding the CSS ..................................................................................................................................... 142 Adding the jQuery ................................................................................................................................. 143

Editing an Existing Task................................................................................................. 145 Adding the HTML .................................................................................................................................. 146 Adding the CSS ..................................................................................................................................... 147 Adding the jQuery ................................................................................................................................. 148

Summary ....................................................................................................................... 151 ■Chapter 8: Enhancing SharePoint with jQuery..................................................... 153

SharePoint Enhancement Considerations when Using jQuery....................................... 153 Adding Functionality to the SharePoint UI ..................................................................... 153 Expanding and Collapsing from Quick Launch ..................................................................................... 154 Showing SharePoint List Data As a Graph ............................................................................................ 162 Using jQuery from the SharePoint 2010 Ribbon ................................................................................... 167 Filtering Quick Launch .......................................................................................................................... 171

Summary ....................................................................................................................... 175 ■Chapter 9: Using jQuery Plug-ins to Enhance SharePoint ................................... 177

Using a jQuery Plug-in ................................................................................................... 177 Working with jQuery UI .................................................................................................. 178 Deploying jQuery UI .............................................................................................................................. 178 Getting Started with jQuery UI .............................................................................................................. 182 Using jQuery UI Interactions ................................................................................................................. 185 Adding jQuery UI Widgets ..................................................................................................................... 201 Adding jQuery UI Effects ....................................................................................................................... 212

viii

■ CONTENTS

Third-Party Plug-ins....................................................................................................... 216 SPServices............................................................................................................................................ 216 Content Slider ....................................................................................................................................... 217 Lightbox ................................................................................................................................................ 222 jQuery Mobile........................................................................................................................................ 225 Other Plug-in Types .............................................................................................................................. 225

Summary ....................................................................................................................... 226 ■Chapter 10: Extending jQuery .............................................................................. 227

Creating Your First Highlighter Plug-in .......................................................................... 227 Creating a More Complex Plug-in with Parameters....................................................... 235 Creating a jQuery Function ............................................................................................ 244 Writing the Latest List Function ............................................................................................................ 244

Summary ....................................................................................................................... 253 Index ....................................................................................................................... 255

ix

About the Author ■Phill Duffy is a product manager at Lightning Tools, Ltd., who lives in the amazing city of Bristol, England, with his gorgeous partner, Pip, and wonder-dog, Billy. Phill’s passion for speaking has allowed him to talk at conferences in London, Boston, San Diego, and San Francisco on SharePoint, jQuery, and the SharePoint BCS. He runs the South West England SharePoint User Group and has a Microsoft Community Contributor Award, as well as an MCTS: Application Development for SharePoint 2007 and 2010 certification.

x

About the Technical Reviewer ■Tony Pounder is a director of Intelligent Decisioning Ltd., a SharePoint-focused solutions provider based in Nottingham, England. He has worked in a development-focused role for his whole career and holds numerous Microsoft certifications, including the recently launched SharePoint Beta 2010. He has been involved with SharePoint since 2004, working on many SharePoint projects for both public- and private-sector companies. Tony is a keen runner and has completed numerous half-marathons and the London Marathon twice, and he enjoys other running events such as the P Coy challenge: 10 miles in military boots wearing a 35-pound pack and traversing “challenging” ground! He is usually found organizing or taking part in #sprunners events wherever SharePoint people get together. Contact Tony at www.id-live.com, www.twitter.com/WorTony, or www.anthonypounder.com.

xi

Acknowledgments My loving fiancée, Pip, was so patient with my late nights, early starts, busy weekends, and all the time I spent in the study that I feel she should be thanked first. Pip has encouraged and supported me all the way through writing this book; she made sure I was looked after as I whiled away the hours with my laptop. Pip took the dog out, fed me, and simply gave me the reason to succeed. She’s the perfect partner in crime for writing a book—I couldn’t wish for anyone better. To my loving family, I have to say, “Look, I’ve written a book!” because I know how proud they are—and how proud of them I am too. Being able to work with two of the best people you could wish for has been a great honor and has really helped with writing this book. To Brett and Nick, I want to say a massive thank-you for the advice and support and for encouraging me constantly to achieve. Their support has helped me do so many things that a younger me could have only dreamed of, such as talking at conferences and writing this book. I would also like to thank the rest of the guys at Lightning Tools who all have been amazing inspirations to succeed. There are people you meet along the way that really make a difference. I consider myself to be lucky to have met three such people who have given me so much of their time, wisdom, and drive. Mr. Brown taught so much more than the lessons he delivered: he urged me to fulfill my potential and inspired me. In hindsight I’m very happy to have been given that gift. Mr. Brown is also the person who first suggested that I purchase Visual Studio 6 when I was 16—one of the best suggestions ever. In my first job as a data entry bod, I had the great pleasure of working with a great friend of mine, Stephen Bouchereau. Stephen spent countless hours listening to me talk about what I wanted to do with my career. Stephen is one of those people who oozes ability, and to have him mentor me was a real boost. He even took to learning MySQL with me, just so I’d have someone to help me through it. A nicer person would be hard to find. At that same data entry job, I was also lucky enough to meet another great friend of mine, Rob Funnell. I later went off to work with Rob as a second/third-line support engineer, and since Rob knew I wanted to become a developer, he gave me every possible opportunity to learn more development skills. Without him, my first step into the world of programming would have been a much tougher one, so I want to give him a big thank-you. He is also a great person to know...and to have beer with. A great big thank-you to Tony Pounder for doing an excellent job as the technical reviewer for this book. Tony is a first-class guy, and I am grateful to him for being part of the team. This book has been such a positive challenge for me, since I’ve only ever contributed to books before. I wasn’t aware of everything that goes into making a book possible. I would like to thank Apress for giving me the opportunity to put my thoughts and experiences down into this book and also all of the editors and backstage hands involved in turning my ditherings into the book you’re looking at. A big thank-you to Jonathan Hassell for seeing the potential in my conference talk. Becca Freed has been a true legend; she has been an absolute joy to work with as the project manager of the book, and as much as I have deviated from the schedule, Becca has been there to reassess and help me get back (nearly) on track. Finally, I want to thank the both the SharePoint and jQuery communities, which are constantly helping, sharing, and pushing forward everyone’s knowledge. The people who really put themselves out there in the community are truly superstars, and I thank you for all of your hard work in making both technologies a great place to be

xii

Introduction In 2009, Lightning Tools decided to take one of its best-selling products, a desktop application, and put it into the browser as an application page in SharePoint—which turned out to be quite a challenge. When we were looking at technologies to use, jQuery stood out as something that could be really helpful. We spent a lot of time trying to understand how to make SharePoint and jQuery work together initially, and then we started to learn what jQuery actually could do. Finding the information we needed was often a struggle (not as many blogs on the topic were available at the time), but ultimately we successfully created our product. I learned so much about jQuery that I jumped at the chance to talk about SharePoint and jQuery when the opportunity arose to speak about them at SPTechCon. I knew that so many people have needed, and will continue to need, to create a client-side solution in SharePoint using jQuery, and I wanted to share the benefit of my experience. In my talk I tried to communicate where to start and how to explore what SharePoint with jQuery can do—and the feedback from the full room at SPTechCon was positive. When I was approached by Jonathan Hassell to write this book at SPTechCon in Boston in 2011, I leapt at the chance. I wanted to write the book that I really could have used when I first started. I hope your experience with this book is like learning to ride a bike: taking you from your first time in the seat and getting acquainted with the controls to doing a lap around the neighborhood without training wheels.

Who This Book Is For This book is primarily written for SharePoint developers who are looking to expand their knowledge into working with jQuery. SharePoint and jQuery is for intermediate programmers interested in building rich, interactive web parts, application pages, and more using the combined power of jQuery and SharePoint. jQuery is one of those technologies that has been around for a few years, and the kind of functionality it offers is really quite amazing. Many of the “slick” web sites these days have a splash of jQuery in their mix; if you want to bring this kind of dazzle to SharePoint, then this book is for you.

How This Book Is Structured Pro SharePoint and jQuery will introduce to you some of the basics of jQuery, starting with what jQuery is and looking at some of the advantages it offers over writing pure JavaScript. Then you will see some of the different ways that jQuery can be deployed to your SharePoint environment. Activating jQuery to make the library available on the page to your jQuery-consuming solutions is another task that can be done in a multitude of ways; with this book, you will be able to compare them and figure out which one suits your requirements. If you’re like me, wading into some examples and seeing how they work is a great way to learn. That’s why there are lots of tasks to work through: from simply viewing information in SharePoint with jQuery to building a complete Task Viewer application that demonstrates some key principles of working with SharePoint and jQuery. Once you have learned the fundamentals, you will learn how to work with plug-ins such as the jQuery UI library, and then you’ll go on to create your own.

xiii

■ INTRODUCTION

Coding Conventions When writing production-standard code, you should always make sure that you handle exceptions correctly and log errors when required. This book omits these steps for brevity. The examples in this book are complete and will allow you to get a functional result that you can use for further experimentation.

Prerequisites You should be familiar with concepts such as SharePoint solutions, features, the SharePoint root, lists, and libraries. You should also have some knowledge of working with JavaScript. C# developers will see that jQuery is not too different from C#, but it is worth knowing where the differences are. Readers will also need to have some experience working with Visual Studio, because it is used for most of the development work.

Downloading the Code The source code is available on the Apress web site (www.apress.com). Simply navigate to the book and click the Source Code/Downloads tab.

Contacting the Author If you have any questions regarding this book’s source code, are in need of clarification for a given example, or simply want to offer your thoughts regarding SharePoint with jQuery, feel free to drop me a line at [email protected] , Skype me at phill.duffy, or even follow me on Twitter at http://twitter.com/phillduffy. I’ll do my very best to get back to you as soon as possible; I’ll let you know that I’ve received your message, but it may take a little time for me to respond in full. Finally, thank you for buying this book. I hope you enjoy reading it and putting your newfound knowledge to good use.

xiv