How to sort language list and show language flags in Sitecore Content Editor

In a project that I’m working we have quite few languages installed – more than 50 in fact. But also the project has multiple websites and each website it’s using maximum 2-3 languages, so it’s a nightmare for administrators and support team to jump from one language to another one in Content Editor.

This project that I’ve made my customization are with Sitecore XP 8.1 rev 160519, but according to this post the customization to the language drop-down from are possible starting with Sitecore XP 8.1 rev. 160302.

For me was not enough to use the setting ContentEditor.SortLanguages on true from Sitecore.config, as this will sort the languages Sort Order field of each Language item.

So in fact this is one the problems, having lots of languages and poor access to the ones that has the current item has versions on. And not being able to see the language flags – problem number 2.

Both problems are solved by customizing “\sitecore\shell\Applications\Content Manager\Galleries\Languages\Gallery Languages.xml

At the end I want to sort the languages following this rule: show at first the languages that the current item has a version – alphabetically, and the rest of the languages that the current item has no version but also ordered alphabetically.

Initially the languages list looks like this:2017-10-19_16h58_29

And then, after the customization – both sorting and show of the flags the language list  looks like this:

2017-10-19_17h12_37.png

Looks much better now.

So, for the technical part.

I’ve made changes to “\sitecore\shell\Applications\Content Manager\Galleries\Languages\Gallery Languages.xml” and I have replaced the call to GalleryLanguagesForm (Sitecore.Client.dll) in the CodeBeside tag with my own class containing the custom code. Btw, I’ve took the Sitecore’s original code for this functionality by using a decompiler 😉

In “\sitecore\shell\Applications\Content Manager\Galleries\Languages\Gallery Languages.xml” I had to remove the part that hides the flags/icons by removing this part:

        div#Languages img {
        display: none;
        }

as the html code is already prepared to display the icon.

Also in the code I’ve assigned the icon for each language

public static string GetIcon(Language language, Database database)
{
    Assert.ArgumentNotNull(language, "language");
    Assert.ArgumentNotNull(database, "database");
    var icon = language.GetIcon(database);
    if (string.IsNullOrEmpty(icon))
    {
        var languageDefinition = LanguageDefinitions.GetLanguageDefinition(language);
        if (languageDefinition != null)
        {
            icon = languageDefinition.Icon;
        }
    }
    if (string.IsNullOrEmpty(icon))
    {
        icon = "Flags/16x16/flag_generic.png";
    }
    return icon;
}

That function GetIcon from above I’ve took it from Sitecore 7.5 from Sitecore.Globalization.LanguageService from Sitecore.Kernel.dll because in Sitecore 8.1 the function returns all the time a flag_generic.png.

I guess this is change that was made in Sitecore 8 in order to improve the speed of Content Editor as in Sitecore 7 we were able to see the icons for languages in the language selector.

Since we wanted to sort our list of languages into a specific way I had to write a new Comparer for the Language object.

public override int Compare(Language lang1, Language lang2)
{
    Assert.ArgumentNotNull(lang1, "lang1");
    Assert.ArgumentNotNull(lang2, "lang2");
    if (lang1 == lang2)
    {
        return 0;
    }
    using (new SecurityDisabler())
    {
        var item1 = workingItem.Database.GetItem(workingItem.ID, lang1);
        var item2 = workingItem.Database.GetItem(workingItem.ID, lang2);
        var length1 = item1.Versions.GetVersionNumbers(false).Length;
        var length2 = item2.Versions.GetVersionNumbers(false).Length;

        // if both have 0 versions, then sort alphabetically.  
        if (length1 == 0 && length2 == 0)
        {
            var val1 = string.Compare(lang1.CultureInfo.DisplayName, lang2.CultureInfo.DisplayName, StringComparison.OrdinalIgnoreCase);
            return val1;
        }
        // if one has 0 version then put those that have a version on top
        if (length1 == 0 || length2 == 0)
        {
            var val2 = Math.Sign(length2.CompareTo(length1));
            return val2;
        }

        // then if both have more than 0 versions then sort them alphabetically
        var val3 = string.Compare(lang1.CultureInfo.DisplayName, lang2.CultureInfo.DisplayName, StringComparison.OrdinalIgnoreCase);
        return val3;
                
    }
}

All the entire coding is added here, into a gist.

Since Sitecore 9 was just lunched, I’ve checked how the GalleryLanguagesForm was implemented, and without a surprise its more or less the same implementation as is Sitecore 8, including same implementation for GetIcon from Sitecore.Globalization.LanguageService.

Later one I will try to see if any customization can be done into the Language selector in Experience Editor, as it looks that its implemented in a different way.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.