YouTube Video Picker. Part 1 – Introduction

[su_note note_color=”#fafafa”]Now available in the Sitecore Marketplace[/su_note]

Intro

Here at BrainJocks we have recently built two custom field types for Sitecore – Geo Location and YouTube Video. Both fields are “picker” fields with custom controls for Content Editor and Page Editor. Sitecore Marketplace has a few relevant downloads (at least for the location picker) but neither looked complete and good enough.

Building a custom field type with support for Content and Page Editor isn’t particularly hard (when you did it more than once and worked through all the gotchas, that is). That said, I don’t believe there’s a comprehensive end to end guide out there on how to do it and the documentation on all the moving parts involved in the process is rather scarce.  Hopefully, as SPEAK matures and MVC gets deeper into the Sitecore core, this guide will become less and less relevant. In the meantime, however, I hope that you will find it useful.

[su_note note_color=”#fafafa”]
In this series I am going to walk you through the process of implementing a YouTube Video Picker field that:

• Renders itself as a thumbnail image in Content Editor and Page Editor
• Has a nice lookup dialog integrated with Google YouTube Data API
• Supports preview via jQuery fancybox

[/su_note]

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

As I post it I will share the code on github and will also publish a complete solution as a module on Sitecore Marketplace.

Moving Parts

Here’s a list of things that need to come together for the YouTube Video Picker to be a complete* solution:

[su_note note_color=”#fafafa”]

1. New field type definition in the Core database
2. New field type backing class
3. Content Editor control with Select and Clear message handlers
4. XML control (markup and codebeside) that renders the ‘picker’ dialog
5. WebEdit command for Page Editor
6. A renderField pipeline extension to customize how field value renders in Page Editor
7. (and some more bits and pieces here and there to glue it all together)

[/su_note]

All but #4 (and DoRender() of #3) are rather mechanical and will be largely the same for your custom fields. It all will be of course flavored with the specifics of what exactly the field represents but other than that it’s the means by which you make Sitecore aware of your field’s existence and teach your field to be a good Sitecore citizen. The XML (or XAML) control (and the presentation part of the Content Editor control) on the other hand is unique to each custom field. It has to be aware of how Sitecore digests and sandboxes it but other than that you can pretty much do anything you want with it. It is is your playground. Everything else is rules and laws that you have to know, respect and abide by.

My Setup

• Sitecore 7.0 rev. rev. 130918
• VS 2012
• TDS 4.0

Let’s Get To It!

First off, the raw value of our field. We have two options – a string literal or a XML structure. Stick with the literal if you can. A list can be pipe separated. A tuple can be coma separated. For the YouTube Video all we need to store is the ID so literal it is.

Next comes the standalone prototype. It’s way faster to iterate on and test your HTML and JS outside of Sitecore. The Content Editor control is a WebControl so it will have to render all markup directly. XML dialog control gets compiled into C# code and then renders a somewhat different markup that in turn gets injected into a wrapping dialog structures. We will take a very close look at that later but trust me – we are much better off kicking the Sitecore tires with a working and tested prototype.

Interested? Part 2 will cover all the upfront prototyping. Stay tuned!

[su_divider][/su_divider]

• I don’t mean to say that the field has all the features. YouTube Data API alone has tons of things it can do. For this series I measure completeness in terms of how complete the implementation is in terms of its integration with Sitecore. Does it nicely support Content Editor? Does it also work as nice in Page Editor? Is it friendly to DMS?