Using JQuery in custom fields

Mark — Thu, 18 Feb 2010 17:27:38 +0000

At the moment I’m creating a custom field for tagging content items. I prototyped my custom field in html using JQuery. But when I wanted to convert this to the actual custom field I ran into a problem. As you might know Sitecore uses the Prototype library for all of it’s javascript. And prototype uses the same dollar sign for all of its functions and variables as JQuery does. But JQuery provides a noConflict function where you can reassign the default $.

But then came the next challenge. I needed to use the noConflict function before all other javascript was called. Luckally I remembered that I have seen it before in other custom fields that are on the Shared Source environment. So I started browsing the source code of Alexey Rusakov’s project (Sitecore Fieldtypes) and I found the InjectScripts class which provides an option to add HTML to the section of the Content Editor. There I just added a reference to my JQuery library and off course calling the .noConflict funtion.


namespace Sitecore.SharedSource.Taxonomy
{
class AddScripts
{
public void Process(PipelineArgs args)
{
if (Sitecore.Context.ClientPage.IsEvent)
return;

HttpContext context = HttpContext.Current;
if (context == null)
return;

Page page = context.Handler as Page;
if (page == null)
return;

Assert.IsNotNull(page.Header, "Content Editor  tag is missing runat='value'");

string[] scripts = new[]
{
"/sitecore modules/Shell/Taxonomy/jquery-1.4.1.min.js"
};

foreach (string script in scripts)
{
page.Header.Controls.Add(new LiteralControl("".FormatWith(script)));
page.Header.Controls.Add(new LiteralControl(""));
}
}

}
}

So now I can call my JQuery by using “jQuery” in stead of “$” and the field works.

In my opinion this is just an example of how the Shared Source environment can help you. So if you have created a module, field or any thing else please put it on the Shared Source environment so others can benefit from it.

Embedding video in Sitecore items

Mark — Fri, 07 Aug 2009 12:26:33 +0000

These days streaming video on the web is quite popular. In almost every project we do at Evident Interactive the customer wants to embed video in content items. Off course they can do that by copy-pasting the embedding code in a Sitecore field or in the rich-text editor. But that is not the most user-friendly method. I thought it would be nice if an end-user could just copy-paste the url of the page and let an custom control do the rest. So I created a custom field, webcontrol, some xsl extensions an a addition to the flashmanager. Let’s say that we want to embed this video from YouTube. I go to the content editor and paste the url in a field of the type “Video Embed”.

When I want to double check if I pasted the correct url I can click preview. A popup appears with the embedded video.

Then I can save my item and publish it to the web database. The only thing saved in Sitecore is the url to the page containing the video.

But sometimes you want to embed video in to an rich text field. For this I wrote an extension for the flashmanager. It works the same as the custom field, the only thing different is you get a preview inside the tab and the embed code will be copied to to rich-text editor value.

To show my video in the frontend of the site I need to add an custom control to my layout or sublayout. The custom control is included in the package.

You need to add a page directive to your layout or sublayout

<%@ Register TagPrefix="video" Namespace="Sitecore.SharedSource.VideoEmbed" Assembly="VideoEmbed" %>

Then you can add the custom control. You can set the height and width of the embed code. When those are left blank a default size of 240 for the height and 320 for the width will be used.

And here is the result of the control

At the moment the solution works for YouTube, Vimeo and Google Video (international and dutch version). I will contribute this to the Shared Source section of Sitecore as soon as Jimmie is back from holiday and can give me access.

Mark van Aalst » Custom field

Using JQuery in custom fields

Embedding video in Sitecore items