In this Alchemy Training video, I’ll demonstrate how to use the Resource Group Class to easily add CSS and Javascript to your SDL Tridion / SDL Web GUI Extension.

Alchemy Training Video 5: Adding CSS and Javascript to our Tridion Popup Window from Content Bloom.

Here’s the Javascript file that’s used in the video:

Type.registerNamespace("Alchemy.Plugins.SchemaDocumentation.Views");

Alchemy.Plugins.SchemaDocumentation.Views.SchemaDocumentationPopup = function SchemaDocumentationPopup() {
    Tridion.OO.enableInterface(this, "Alchemy.Plugins.SchemaDocumentation.Views.SchemaDocumentationPopup");
    this.addInterface("Tridion.Cme.View");
};

Alchemy.Plugins.SchemaDocumentation.Views.SchemaDocumentationPopup.prototype.initialize = function SchemaDocumentation$initialize() {
    alert("hello from the pop up")
};

$display.registerView(Alchemy.Plugins.SchemaDocumentation.Views.SchemaDocumentationPopup);

….And the Resource Group file:

using Alchemy4Tridion.Plugins.GUI.Configuration;
using Alchemy4Tridion.Plugins.GUI.Configuration.Elements;

namespace SchemaDocumentation.GUI
{
    public class SchemaDocumentationPopupGroup : Alchemy4Tridion.Plugins.GUI.Configuration.ResourceGroup
    {
        public SchemaDocumentationPopupGroup()
        {
            AddFile("SchemaDocumentation.js");
            AddFile("SchemaDocumentation.css");
            AddWebApiProxy();
            AttachToView("SchemaDocumentation.aspx");
            Dependencies.Add("Tridion.Web.UI.Editors.CME");
        }
    }
}