A country flag corresponding to an existing page translation appears on the top right menu when visiting a page

Description

Here is an option that shows when visiting a page a country flag with a corresponding translation for that current page. This can be used on a multilingual wiki, and in my example I added English, Deutsch and French as supported languages and French as default language on the wiki, from the wiki administration.

I used the steps from the UIExtension Module to write a simple UI Extension, to which I added a starting code from a documentation on adding new icons on the top right menu:

• Create a new page. In my example, I created DynamicLanguageSwitchTopRightMenu with an empty Parent field of the new page in order to place it at top level. You can choose to hide the page or to make it available only to yourself through rights.
• I attached two country flags images to the page. I picked the UK flag for English and the Germany flag for Deutsch. You can pick any images or icons that you prefer to differentiate between languages.
• Edit the page in object mode and add a new XWiki.UIExtensionClass object.
• In the Executed Content I added the code below. You will notice the condition #if(!$isGuest) ... #end which I used as my wiki is private and Guests (Unregistered wiki visitors) would only see a login page when they would access my wiki. Feel free to remove it or add different conditions that apply to your use case.

{{velocity}}
#set($urlen = "$doc.getURL()?language=en")
#set($urlde = "$doc.getURL()?language=de")
#set($flagMap = {"en" : "UKflag.jpg", "de" : "Germanyflag.jpg"})
{{html clean="false"}}
#if(!$isGuest)
#if($doc.getTranslationList().contains('en'))
  <li>
    <a href="$urlen" class="icon-navbar"><img src="$xwiki.getAttachmentURL("DynamicLanguageSwitchTopRightMenu.WebHome", $flagMap.get("en"))" alt="UK Flag"></a>
  </li>
#end
#if($doc.getTranslationList().contains('de'))
  <li>
    <a href="$urlde" class="icon-navbar"><img src="$xwiki.getAttachmentURL("DynamicLanguageSwitchTopRightMenu.WebHome", $flagMap.get("de"))" alt="Germany Flag"></a>
  </li>
#end
#end
{{/html}}
{{/velocity}}

• For the following fields I picked: no for Asynchronous rendering, yes for Cached, Request URL from Context elements.
• Extension Point ID: org.xwiki.platform.topmenu.right
• Extension Name: any name would be fine but I followed a rule for this EP, just to follow the documentation - "platform.topmenu.right." + the name of my extension - platform.topmenu.right.dynamiclanguageswitchtopmenu
• Extension Parameters: target=XWiki.DynamicLanguageSwitchTopRightMenu
• Extension Scope: I picked Global as I wanted it to be visible for a whole wiki farm, but you also have the options: only in the current wiki (default value), or only for the current user (ie. you, the user who wrote the extension).
• Save or Save & View the page and then visit pages from your wiki to see where it would show a country flag for a corresponding translation.

• The results would be the following:

  • when your wiki would have English pages already by default, it would not display the UK flag.

    
    Result default language English with German translation

  • when your page would have as original language for example French and its' content has been translated in English it would display the UK flag. If its' content has also been translated in Deutsch, it would display as well the German flag next to the UK flag.

    
    Result default language French with available English and German translations

  • when there is no translation available for the page, no flag would be displayed on the top right menu.

    
    Result default language French with no English or German translations

    
    Result default language English with no German translation