As by now you all have gathered, the annual MVP retreat has started and 16 MVPs are currently hard at work in a castle in Óbidos, Portugal. Our team, is working on what was defined on LinkedIn as Custom Editor Screens, for which we chose the working title Tridion Field Behavior Injection (available as open source on Google code of course).

The idea is that by tomorrow we deliver a open source project towards the SDL Tridion community containing a UI extension that can be used to add custom properties (like checkbox options, drop-downs, etc.) to Schema fields. You can use these extended fields to modify the behavior of Component forms (make fields read only for a specific group of users etc.), but probably more important, you can also use the code in this project as an example for developing your own UI extension.

One of the things I’ve worked on is the localization of the labels used in the UI extension. While we are busy checking in the first files, I’ll explain the approach of using .NET resources for localization in UI extensions.

We start with adding a Resources file (.resx) to the Visual Studio UI Editor project (Build Action: Embedded Resource). Give the file a logical name, we used Tridion.Extensions.UI.FBI.Strings.resx and in there we can simply add Name and Value pairs with the English label texts in there. For the other UI languages you can add copies of the .resx file with the language code in there (for example: Tridion.Extensions.UI.FBI.Strings.es.resx and Tridion.Extensions.UI.FBI.Strings.nl.resx).

Next step is to register the Rescources in the Editor configuration, for that we use the localization/cfg:clientresource element. In there we have two attributes clientname and servertype. The clientname gets a value you want to use in your code (a reference), we simply used the filename: Tridion.Extensions.UI.FBI.Strings. The servertype actually points to the .resx file, for this we have to know the project Namespace, the location of the .resx file, its name and the Assembly name. Combining all that brings us to: Tridion.Extensions.UI.FBI.Editor.Resources.Tridion.Extensions.UI.FBI.Strings. Which can be dissected into:

1. Project Namespace: Tridion.Extensions.UI.FBI.Editor
2. Resx location (folder in project): Resources
3. Resx filename: Tridion.Extensions.UI.FBI.Strings

Add to that a comma and the assembly name (Tridion.Extensions.UI.FBI.Editor in our case) and you have the full value, see the fragment below:

Now we can use labels in our controls (.asxc) using the following snippet:

Through the $localization.getResource() method, we can also use these labels in the UI extension’s JavaScript as the following snippet shows:

Probably the most important part is done at the end when your Solution is built and ready to deploy. The Assembly of the Editor project is placed in the ..\Tridion\web\WebUI\WebRoot\bin\ directory and the .resx file(s) go in the ..\Tridion\web\WebUI\WebRoot\App_GlobalResources\ directory.
Note: you only need to copy the .resx files. In your build directory of your Visual Studio project you will also find a .cs file with the .resx, but that can be ignored.