Skip Main Navigation
Page Content
This event has ended

Save This Event

Event Saved

Black Magic Solutions for White Hat SharePoint

Ticket Information

Type Remaining Quantity
If a Brit stumbles in a jQuery forest, does anyone hear his cries? 3 Tickets Free  
Navigation Enhancements in SharePoint: The Superfish Model Sold Out Free  
SharePoint in Agile: Managing an Agile Development Project Sold Out Free  
Build an HTML5 Video Library: Filters, Search, Pagination and Display 11 Tickets Free  
jQuery Mobile: Create a Mobile-friendly SharePoint Blog 14 Tickets Free  
Build a Content Slider Web Part: Dynamic Displays of Pictures and Text Sold Out Free  
Build Solid Script Libraries for your Enterprise Sold Out Free  
... and now, the REST of the story: jSON, Fiddler and SharePoint 4 Tickets Free  

Share Black Magic Solutions for White Hat SharePoint

Event Details

How would you like to participate in the creation of a new book?

Nine experienced authors from NothingButSharePoint got together and decided we want to self-publish a unique SharePoint book without having to go through the formal process of a traditional publisher. We want to do a solutions based book where people can select projects of interest to them. We don't want a bunch of geek speak; just real world solutions that people can use to enhance their SharePoint sites.

That's where you come in.

Each author will be writing one chapter for the book. We want the book to be as compelling as possible, so we need reviewers from the community to act as proof-readers and copy editors for each of the chapters. You will work with a selected author to review their work, test their solutions, and give feedback for possible enhancements. Each of the solutions are described below.

Your obligation? Look at the chapter from a users perspective and let the author know:

  • Does the solution work?
  • Is it something you would consider using?
  • Are there extensions to the solution that you would find interersting?
  • Does the language flow, does it have correct syntax?
We are interested in people who want to participate in an author's project, You may select multiple chapters to review, but priority is given to those who select one single chapter. If the chapter you would like to review is full, you will see a "Sold Out" or "N/A" sign next to the chapter.

The first draft of the chapters will be finished on April 30th. You will work with the author during the draft period and then help with testing the final code and demos during the first week of May.

Please select one, with a maximum of two chapters in order to be considered as a reviewer.

What's in it for you?

What you'll get for your efforts is twofold. First, you will be listed in the credits of the book as a technical reviewer for the project. Second, you'll have pre-release access to a chapter of the book. 

The solutions will be built and demoed in a SharePoint 2010 environment, but most chapters will also talk about how to implement them in 2013, when appropriate.

How does that sound? If you've got the time and the inclination, check out the abstracts below, select one chapter you'd like to review and let's get started. If the chapter you'd like to select is marked with "Sold Out" or "N/A", that means we have enough reviewers for that chapter.


Authors and Abstracts 

Build an HTML5 Video Library: Filters, Search, Pagination and Display
Ben Tedder

In this chapter we’ll dive into creating and maintaining a video library for your users. When it comes to video in SharePoint, you aren’t given many options out of the box, so this solution will guide you through creating an interactive, filterable, instantly-searchable, paginated, asynchronous listing of videos that play in HTML5 format (phew, that’s a mouthful!).

One of the great parts of this solution is that it’s built on just a couple of SharePoint lists and libraries, making it very easy for an entry-level user to maintain the library with minimal training.

So what does it do? When the page loads, videos are piped in from SharePoint using SPServices. They’re displayed in a grid format that is paginated, with the user being able to choose how many videos show on a page. When the video grid loads, each thumbnail is loaded asynchronously in the background. This means that the user doesn’t see any lag in their browser, and can continue to filter, page, and search without the UI freezing up.

A couple of additional features packed into this solution: a search-as-you-type text box, drop-down menu of categories (dynamically pulled from SharePoint), and a tooltip with the description as you hover over each video.

When the user clicks on the video they’ll be shown a modal dialog window that loads the video itself. The video loads in an HTML5 player that uses a flash fallback for older browsers. The benefit of how this solution holds videos is that videos can be sourced from anywhere (as long as they are in the standard HTML5 formats (mp4, WebM, and OGV)).

I hope that this solution will show more than just how to bring in videos in HTML5 format. The assortment of filters will show the user many different ways to interact with data from SharePoint using jQuery and javascript.

Possible Extensions:
* integrate this solution with jQuery mobile for a full mobile video browsing solution
* allow users to rate videos


jQuery Mobile: Create a Mobile-friendly SharePoint Blog
Josh McCarty

Although SharePoint has built-in mobile support, the actual output of mobile pages is not very exciting. Words like “functional” and “utilitarian” come to mind. If you are using SharePoint 2007, the mobile experience is virtually non-existent. When I was recently tasked with building a mobile-friendly website using an existing SharePoint 2007 extranet, I quickly turned to jQuery Mobile as a front-end solution while SharePoint provided the back-end content management functionality.

One of the key features of the website is a standard SharePoint blog. Content owners use the blog to post news and important announcements to the visitors of the website. They can use the familiar SharePoint web UI or Microsoft Word to publish content, and visitors access the content on their mobile device using jQuery Mobile’s touch-friendly UI. This solution can be implemented a number of ways, but for my implementation I chose to create plain old HTML files in a document library that used jQuery, SPServices, and jQuery Mobile to access and render all content. This gave me total control over the markup on the page.

The final solution includes a home page with posts sorted by publish date, a navigation menu that links to archives of each blog category, archives of each author, a page to display each blog post (with comments), and a comment form with client-side validation. Each page uses SPServices to grab the content (via the appropriate CAML query), then I output that content in the DOM and initialize jQuery mobile to render the content in a touch-friendly way. Comment submissions are done via AJAX using SPServices with basic validation for required fields.

Possible Extensions:
1) Add a “Featured Image” field to the Posts list and display that image as a thumbnail in jQuery Mobile; grab the first image tag in the post and display that image as a thumbnail; fallback to a default thumbnail (or random choice from several default thumbnails). I’ve done this kind of thing with WordPress themes many times and it works nicely for ensuring that every post has some sort of image/thumbnail on the home page, which can increase reader engagement, or at least that’s what it’s supposed to do.

2) Add additional fields to the comment form automagically as they are added to the Comments list.

3) Add a search field and search results page.  

If a Brit stumbles in a jQuery forest, does anyone hear his cries?
Dave Coleman

Over the years I have read many technical books but rarely do you find the steps needed to accomplish the very first part of the journey. Most begin with the climb from Basecamp Seven, which precludes beginners. The path to jQuery heaven can be a difficult one to tread, but in this chapter I will act as your guide and sherpa to begin your journey. 

Now I am no jQuery expert but my fellow authors are experts on the subject so I thought a perfect start to any jQuery book is the knowledge to complete the first steps which is what my chapter will cover. 

So sit back relax and lets enjoy this journey together…


Build a Content Slider Web Part: Dynamic Displays of Pictures and Text
Wendy Neal

Take your SharePoint site from boring to awesome! SharePoint has web parts for displaying data from lists and libraries such as the content query web part; however that can be static and dull. To draw attention to your content you need something a little more exciting and eye-catching. This is where a content slider web part can help.

You've seen them on all the popular blogs and websites - those fancy sliders that shuffle content or images in a slideshow format for visual effect. This solution will demonstrate two different variations of a content slider web part that utilizes data from a SharePoint list using the AnythingSlider jQuery plugin and SPServices. 

The first example is a slider that pulls data from a standard SharePoint announcements list. This could be useful for a company's online bulletin board. The slider will display the announcement title, body, category, and author of those items that have not yet expired. Clicking on the title in the slider will open up that announcement's standard SharePoint view form so that you can see more details.

The second slider example rotates banners stored in an image library with a text overlay and a fade transition effect. This would be great for an Intranet or team site home page to highlight special news items, blog posts, or any other content you wish to showcase.

Both of these solutions use the AnythingSlider jQuery plugin to render the slider and transition effects. I chose AnythingSlider because of its flexibility and ease of use. You can literally display any kind of content, including images, html, even videos. The data displayed by the slider in both examples is retrieved using SPServices and the appropriate CAML query.

Possible Extensions:
1) Explore some of the different AnythingSlider configuration options, such as auto play settings, delay time, button themes, navigation formatting, etc.

2) Add additional cool features such as thumbnail navigation links and a lightbox popup to the image slider. 

3) Additional considerations can also be explored for SharePoint 2013; namely a different way of accessing the data using the REST API instead of SPServices


SharePoint in Agile: Managing an Agile Development Project
Paul Tavares

In this chapter I will show how to bring multiple Lists together to create an integrated user experience while at the same time demonstrating how to achieve several tasks using a Kan-Ban board.

SharePoint, out of the box, contains all of the individual tools needed to manage a development project using an agile methodology. With a little (javascript) glue, a simple site can be turned into a powerful tool that can emulate functionality found only in 3rd party applications. While referencing SCRUM terms, the solution will describe the use of a Backlog, the creation of User Stories, the assignment of Stories to a Sprint and to a Team, as well as the use of a Sprint Log which breaks a story down to work-items that are assigned to individuals.

I will show the power of jQuery UI widgets to demonstrate how sprint planning can be achieved visually through the use of drag-and-drop user story “cards” into sprints and assigned them to teams. I will also use Knockout.js along with jQuery’s Deferred objects to create a template driven responsive and auto-refreshing UI components. 


Build Solid Script Libraries for your Enterprise
Marc Anderson

To many traditional SharePoint developers, working with JavaScript feels like taking giant steps backward into the Wild West of coding. While it can take some getting used to, nothing could be farther from the truth. By applying good coding practices to your JavaScript and jQuery work, you can devise solid, reusable script libraries to run huge pieces of the SharePoint functionality across your enterprise.

Drawing on the lessons learned from building and maintaining SPServices over four years and across three SharePoint versions, I'll give you some tips and tricks about how to build better code and to make your life easier in the meantime. Whether you are in an enterprise of one or 100,000, the same good practices can get you where you need to be


Navigation Enhancements in SharePoint: The Superfish Model
Eric Overfield 

Are you tired with the way in which SharePoint renders navigation menus for you? Have you wanted to use a menu library such as Superfish the Suckerfish-style menu for jQuery on your SharePoint site? SharePoint’s top and vertical navigation menus as rendered in HTML that can be branded, but without a lot of additional work you are stuck with the basic functionality SharePoint provides. Using JavaScript you can attempt to override certain aspects of these Out of the Box menus, but how about starting over?

In this chapter we will look at one method of supplementing SharePoint Navigation. We will investigate the HTML produced by SharePoint for a standard top navigation bar with multiple dynamic menus. Using jQuery we will quickly and efficiently parse this menu and place it in our own JavaScript object for reuse. Using this object we will then create two different menu systems.

In our first attempt at reusing the navigation we will create a simple navigation structure that is geared towards the Superfish jQuery plugin. We will create a new container in the DOM, add our menu structure and then finally bind this to our Superfish jQuery plugin.

In our second attempt, we will expand upon our previous example and create a single dropdown navigation for mobile and tablet devices. This second navigation will leverage Responsive Design techniques and Media Queries to provide a navigation menu geared toward mobile devices while desktop devices may still utilize our Superfish menu from our first walkthrough.

Possible Extensions:
1) Extend our script to parse the vertical or “quick launch” menu as well.

2) Supplement all mouseover dropdown menus with clickable dropdown menus for rich menus on touch screens.

3) Consider replacing the parsing engine by using JSOM to access navigation properties directly from the site.

... and now, the REST of the story: jSON, Fiddler and SharePoint
Peter Serzo

It is much easier to make REST based calls via JavaScript than to call into CSOM using the JavaScript libraries that SharePoint provides. All the capabilities of CSOM are exposed as REST calls enabling other platforms to call into SharePoint sites. The CSOM has been extended with new APIs. 

Using jQuery and the REST API in SharePoint 2013, we will create a solution where we pull data and format it via the Microsoft jQuery Template. Our view will comprise of a dashboard of task items across multiple sites and a listing of articles.. In addition we will present data from connected lists, and possibly a calendar.

Our solution will utilize jSON and we will detail how to create the project and debug the project via Fiddler. 
Have questions about Black Magic Solutions for White Hat SharePoint? Contact the organiser

Interested in hosting your own event?

Join millions of people on Eventbrite.

Please log in or sign up

In order to purchase these tickets in installments, you'll need an Eventbrite account. Log in or sign up for a free account to continue.