Tridion GUI Extensions : How to load a JavaScript without showing a GUI element

Posted byalbertromkesPosted inTridion

A while ago I was struggling with the above mentioned challenge: I wanted to load some JavaScript into the Tridion Content Manager GUI, but without showing a corresponding GUI element (Button, list, etc).
I searched the online documentation portal, the good old forum, searched all the Tridion blogs, but could not find it.
With no other option left, I turned to the experts. Since not too long, they can also be found here.
(And while you’re there, why not join us?)

It took precisely 3 minutes and I had my answer. Since I could not find it, I assume you also cannot find it. That’s why I share it here.
But not without mentioning the one who gave me the answer: Frank. Thanks.

For adding a JavaScript to extend the Tridion Content Manager GUI, but without showing a button or list or whatever, the following configuration is needed:

1. Add the following configuration to your ‘Editor.config’ (config file to configure your GUI Extension):

<cfg:groups>
<cfg:group name="MyGroupName">
<cfg:domainmodel name="MyName">
<cfg:fileset>
<cfg:file type="script" id="MyId">/Relative/Path/MyJavaScript.js</cfg:file>
</cfg:fileset>
<cfg:services />
</cfg:domainmodel>
</cfg:group>
</cfg:groups>

This piece of configuration makes sure that your javascript file is loaded for the complete GUI. This might not be what you want.
Let’s say you only want to load your methods/classes for a certain view, let say the Component-edit screen. You can achieve this by adding the following code to your
JavaScript file:

//If you only want your code to affect certain screens/views, you should listen to Anguilla events like this:
$evt.addEventHandler($display, "start", onDisplayStarted);

// This callback is called when any view has finished loading
function onDisplayStarted() {

    $evt.removeEventHandler($display, "start", onDisplayStarted);

    if ($display.getView().getId() == "ComponentView") {
            //Work your magic!
       }
}

It’s easy once you know how đŸ˜‰

5 thoughts on “Tridion GUI Extensions : How to load a JavaScript without showing a GUI element”

  1. Indeed, the mentioned configuration part defines the Domain Model group and system will make sure that all Domain Model groups are added to any view with Tridion Manager on it. Except for the pages, where Tridion Manager node contains "ExcludeModels" attribute set to true. In this situation Domain Model groups will not be added at all.

    In any case, adding group to all views when you want it only on the one of them – is not optimal. If you want your group to be added on certain view – you can always extend the group for that specific view.
    For example, if you want your files only on Component-edit screen, you can extend "Tridion.Web.UI.Editors.CME.Views.Component" group.

    Here is the definition for extension group and for the files group itself (in 'Editor.config'):

    <resources cache="true">
    <cfg:extensiongroups>
    <cfg:extensiongroup name="[Name of the extension group]">
    <cfg:extension target="Tridion.Web.UI.Editors.CME.Views.Component">
    <cfg:insertafter>[Name of the group with files]</cfg:insertafter>
    </cfg:extension>
    </cfg:extensiongroup>
    <cfg:groups>
    <cfg:group name="[Name of the group with files]">
    <cfg:fileset>
    <cfg:file type="script">/Script.js</cfg:file>
    </cfg:fileset>
    </cfg:group>
    …
    </cfg:groups>
    </resources>

    And you need to register your extension group, so it will be applied (at the bottom of 'Editor.config'):

    <settings>
    …
    <resourceextensions>
    <resourceextension>[Name of the extension group]</resourceextension>
    </resourceextensions>
    </settings>

    Reply
  4. Pingback: Tridion 2011 GUI Extension, how to include css file? | PHP Developer Resource

  5. Great post Albert, you saved me some time here, thanks.

    It may also be worth putting a Try-Catch around the getId(). I found it can error if used in a context where the ID is unavailable.

    var myId = null;
    try{
    myId = $display.getView().getId();
    }
    catch(error){
    console.log(“Error:” + error);
    }
    if (myId == “ComponentView”) {
    console.log(“Im a component!”);
    }
    if (myId == “PageView”) {
    console.log(“Im a page!”);
    }

    Reply

Leave a comment