Getting the YouTube ECL Connector to work with DXA

I successfully hooked up the YouTube ECL Connector into Tridion 2013 SP1 a while ago without any problems but it’s taken up until now for me to build the functionality to render out the YouTube videos in DXA.

I thought this was going to be easy but once again I couldn’t find any steps in the documentation on how to do this so I thought I would show you how I did it.

My first thought was to temporarily extend the Item List schema to add in a Multimedia field called eclTest that allowed my ExternalContentLibraryStubSchema-youtube Multimedia Schema.

I then extended the ItemList Model with a new property mapping to my new field and used created as a type of EclItem (which is built in to DXA 1.2)

[SemanticProperty("s:eclTest")]
 public EclItem EclTest { get; set; }

I opened the Component and updated the Ecl Test field to point towards a YouTube ECL video.

I then published the Publish Settings Page which contains the schema field definitions as well as publishing the Home Page which contains this updated Component.

I then updated my view to render out the new field: @Model.EclTest.Url

I then ran my local DXA web application but it unfortunately blew up:

ERROR - Unable to map field 'eclTest' to property of type 'Sdl.Web.Common.Models.EclItem'.
 Sdl.Web.Common.DxaException: Unable to map field 'eclTest' to property of type 'Sdl.Web.Common.Models.EclItem'. ---> System.MissingMethodException: Cannot create an abstract class.

What I didn’t realise is that the EclItem class is an abstract class and what I needed to do is to create a new class that Inherited from ECLItem and update my ItemList Model to use that type. Rick explained this over on Stack Exchange.

So I created a public class called YouTubeEclItem and then mapped the entity to the stub schema that is created in the CME

[SemanticEntity(CoreVocabulary, "ExternalContentLibraryStubSchema-youtube")]
 public class YouTubeEclItem : EclItem
 {
 }

I can then update the field in the ItemList Model to be a YouTubeEclItem instead:

[SemanticProperty("s:eclTest")]
 public YouTubeEclItem EclTest { get; set; }

I then ran the application and it worked! I had a YouTube URL rendered out!

I hope this helps anyone else out that go stuck with this too.

Getting the YouTube ECL Connector to work with DXA