localised title using treeattribute - Extending Umbraco and using the API

Micha Somers 134 posts 597 karma points

Apr 20, 2016 @ 18:51

Localised title using TreeAttribute for custom TreeController in custom Section

Hi all,

I have create a custom section (Umbraco v7.4) and use a custom TreeController providing only one menu item (Import); no child nodes. Code looks like this:

[PluginController("umbCustomSection")]
[Umbraco.Web.Trees.Tree("umbCustomSection", "umbProductsExtensionTree", "Products", iconClosed: "icon-doc")]
public class UmdProductsTreeController : TreeController
{...}

This results in a custom section with a root node titled "Products" (=the 3rd parameter of the TreeAttribute used in the above code).

How can this title be localised, such that when I change my language, this title will show the translated text (eg. "Producten" for nl-NL )?

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Apr 20, 2016 @ 19:21

I did that in Formulate. I have a tree controller much like your own: https://github.com/rhythmagency/formulate/blob/b4145be9c54b8b8dad0e73de59d10ec6633e6dd5/src/formulate.app/Trees/FormulateTreeController.cs#L33

[Tree("formulate", "formulate", "Formulate", "icon-folder",
    "icon-folder-open", true, sortOrder: 0)]
[PluginController("formulate")]
public class FormulateTreeController : TreeController
{/* ... */}

All I have to do is add a language file that contains the translation: https://github.com/rhythmagency/formulate/blob/b4145be9c54b8b8dad0e73de59d10ec6633e6dd5/src/formulate.app/App_Plugins/formulate/Lang/en-GB.xml

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<language>
  <area alias="sections">
    <key alias="formulate">Formulate</key>
  </area>
</language>

Note that this will only work for new versions of Umbraco. You can find details here: https://our.umbraco.org/Documentation/Extending/Language-Files/Language-Files-For-Packages/

Copy Link

Micha Somers 134 posts 597 karma points

Apr 20, 2016 @ 19:54

Hi Nicholas,

Thanks for your answer. I am not sure how I would get this to work in my case. Your example looks quite a lot like mine including the usage of the language files. One remarkable difference is that your first parameter (appAlias) and second parameter (alias) are exactly the same.

Maybe that's the trick to get both section and treenode translated?

In my case, my section and treecontroller are named differently. So, I get a neat translation for the section, but the root node is not translated and will named Products (the 3rd parameter) for all languages I choose.

Any special things I need to pay attention to get this working in my situation?

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Apr 20, 2016 @ 20:11

I've actually just begun to add localization support for the tree nodes for Formulate in my most recent commit on the develop branch: https://github.com/rhythmagency/formulate/commit/80f146efa703ca3e8588eb802074fadcd6decf0a

As you can see, I create multiple root nodes, and the only way I could get that working was to "manually" create them: https://github.com/rhythmagency/formulate/blob/80f146efa703ca3e8588eb802074fadcd6decf0a/src/formulate.app/Trees/FormulateTreeController.cs#L217

            var validationsNode = this.CreateTreeNode(
                ValidationConstants.Id, id, queryStrings,
                LocalizationHelper.GetTreeName(ValidationConstants.Title),
                ValidationConstants.TreeIcon, hasRootValidations,
                string.Format(formatUrl, "validationLibrary", ValidationConstants.Id));
            nodes.Add(validationsNode);

That looks like this:

Nodes

That has "Validation Nodes" (from the above code snippet).

You can see there I'm calling my helper function, LocalizationHelper.GetTreeName to get the translated version of the tree node.

However, in your instance, if you want to avoid doing that, maybe there is a better way. I note that the code language files contain this section:

  <area alias="treeHeaders">
    <key alias="cacheBrowser">Cache Browser</key>
    <key alias="contentRecycleBin">Recycle Bin</key>
    <key alias="createdPackages">Created packages</key>
    <key alias="dataTypes">Data Types</key>
    <key alias="dictionary">Dictionary</key>
    <key alias="installedPackages">Installed packages</key>
    <key alias="installSkin">Install skin</key>
    <key alias="installStarterKit">Install starter kit</key>
    <key alias="languages">Languages</key>
    <key alias="localPackage">Install local package</key>
    <key alias="macros">Macros</key>
    <key alias="mediaTypes">Media Types</key>
    <key alias="member">Members</key>
    <key alias="memberGroups">Member Groups</key>
    <key alias="memberRoles">Roles</key>
    <key alias="memberTypes">Member Types</key>
    <key alias="documentTypes">Document Types</key>
    <key alias="relationTypes">Relation Types</key>
    <key alias="packager">Packages</key>
    <key alias="packages">Packages</key>
    <key alias="python">Python Files</key>
    <key alias="repositories">Install from repository</key>
    <key alias="runway">Install Runway</key>
    <key alias="runwayModules">Runway modules</key>
    <key alias="scripting">Scripting Files</key>
    <key alias="scripts">Scripts</key>
    <key alias="stylesheets">Stylesheets</key>
    <key alias="templates">Templates</key>
    <key alias="xslt">XSLT Files</key>
    <key alias="analytics">Analytics</key>
  </area>

Perhaps if you add a key to the treeHeaders area, Umbraco will know how to translate it?

Copy Link

Micha Somers 134 posts 597 karma points

Apr 21, 2016 @ 08:38

Hi Nicholas,

Appreciate your input very much!

Meanwhile I have setup and run Formulate on my machine ... out of curiousity (interesting stuff!) and to see how your code works with regards to translating the specific text.

Unfortunately, it really looks like you have the same need I have...

... That is, the FORMULATE text that is shown above the nodes

Forms,
Layouts,
Data Source,
Data Values,
Validation Library

is not translated.

In Spanish for example, it will remain FORMULATE and will not be translated to FORMULATE (ES) as defined in your es-ES.xml.

I will search further (and hopefully receive some new thoughts from the community) on this.

Guess that a solution might be interesting for you as well ;-)

Copy Link

Micha Somers 134 posts 597 karma points

Apr 21, 2016 @ 09:45

Yes, I have found the solution with help from Nicholas!

Part of the solution is Nicholas' comment about adding a key to the treeHeaders area.

So first make sure to add a key (with alias = name of the Custom TreeController; umbProductsExtensionTree in my case) to the translation files.

For example, in en-US.xml :

  <area alias="treeHeaders">
    <key alias="umbProductsExtensionTree">Products (en-US)</key>
  </area>

This is part one of the solution.

Next, make sure that the provided title text in the TreeAttribute above the custom TreeController is empty!

Otherwise it will not be translated!

Example:

[PluginController("umbCustomSection")]
[Umbraco.Web.Trees.Tree("umbCustomSection", "umbProductsExtensionTree", "", iconClosed: "icon-doc")]
public class UmdProductsTreeController : TreeController
{...}

These two changes finally gave me the translated text instead of the hardcoded text.

Hopefully the Umbraco team will document this rather "hidden" feauture.

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Apr 21, 2016 @ 15:20