Some time ago a customer approached us with a problem they had with a very extensive Umbraco website in different languages which was managed by several editors. They had lost complete track of which pages were translated into the different languages and which were not. It turned out to be an almost endless task to check all pages in every language for a translation, because the content tree was so extensive. When a new website had to be added in a new language, it gave the necessary challenge and of course effort. We were asked to come up with a suitable solution.

In short, the problem came down to the following points:

• In Umbraco translations have no relationship with each other
• It is not visible which translations are available per page
• There is no insight into which pages have (not) been translated.

George Herbert: "The eyes have one language everywhere"
Eyes maybe, but websites don't!

Solution

After hard work we present a solution, which we return to the community in the form of a package: the Novaware Multilingual Tools.

The Multilingual Tools package in short, lets you get a grip on your translations in Umbraco. It allows users to get an overview of the translation status of Umbraco websites. The package not only provides an overview, but also offers possibilities to:

• establish relationships between translations on a multilingual website
• give the user (partly) automated suggestions for possible translations
• easily manage these relationships or translations
• quickly navigate to translations
• create new translations

Novaware Multilingual Tools is built in several layers for optimal overview, reusability and extensibility of the code. The code itself is written with the SOLID principles in mind and the key elements of the code have been extensively tested for performance. For example, the package contains a nice solution for establishing relations between pages in multiple languages. When establishing such a relationship, it is important that it is stored in an efficient manner. Retrieving and manipulating it should have a low algorithmic complexity. It is also important that the package uses as much as possible of the possibilities that Umbraco already offers.

In order to store relations, we chose to use the 'Relation Service' Umbraco makes available through the API code. This service offers possibilities to save a relationship between 2 pages and to retrieve them as well. However, with that service it is difficult to link and read more than 2 pages. In order to offer this functionality, we created a data structure where 1 translation of a page is designated as 'master'. 'Master' is nothing more than a nameplate on a content page with which it is said that all translations are connected with this 'master' and therefore not mutually.

A stored procedure was used for reading this data structure. This stored procedure contains logic to retrieve all translations from any given page. This is also possible with the service of Umbraco, but it is too slow to use for the purpose of retrieving translations. In addition, a stored procedure can contain logic to retrieve a whole set of translations from each page.
Thanks to this efficient way of saving, the package is always quick to retrieve and store translations. The use of an Umbraco service for storing relationships also guarantees better compatibility.

Tools

Novaware Multilingual Tools consist of a Dashboard and an Actionbar. The Actionbar is for quick action. It shows in a minimalist overview which translations of a page are available and allows you to quickly add translations. The Dashboard is to provide more insight. This is done in an extensive full-screen overview that shows the translations of all the pages under the selected node/page where you view the Dashboard. This way you can see the translation status of your entire content tree in one go. 

In a few cases you can skip the whole process of adding translations. In such cases it is possible to connect translated pages with each other and capture this. That can save you a lot of work, especially in an environment with an existing multilingual website. Just use the 'Relate copied nodes' option.

 

Actionbar

One of the handy components of the package is the Actionbar. This allows you to quickly add translations and navigate back and forth between the linked websites.

It is also possible to link pages in different languages ​​via the Actionbar. Don't you like to select all that manually? Fine, the system gives you a helping hand by giving you suggestions for possible translations of the page you have opened. By ticking the suggestions you can then accept them and add them as a translation.

Of course you can also add translated pages manually. This can be useful when the system cannot find a translation while it is there. In such case you simply designate a page as a translation of the currently opened page.

Does the page not exist yet? If this is the case, you can also create a new page directly as a translation via the “add” option.  This page will then be created in the content tree of the chosen language.

It is also possible to unlink translations. This can be useful if you have accidentally added a wrong page as a translation.

Dashboard

The Dashboard is perfectly suited for the bigger picture. Once a website has translations, you can open the Dashboard. Add this Dashboard to a Document Type on which you want to have access to the Dashboard. On the Dashboard you will find all pages and the translations are shown per page. On the left you always see the pages of the opened website. The translations of these pages are shown in the columns on the right.

If a page has been translated and the translation is stored in the system, it is represented by black text. When a page cannot be found, three dots are displayed (...). Consequently you have the option to manually select a page by hovering over the dots and then clicking on the link icon.

Suggestions

The system gives suggestions about possible and present translations that can be linked. These suggestions are shown in blue, just like on the action bar. A suggestion can be linked by hovering the cursor over the page name and clicking the accept icon. If the suggestion is not correct, another page can be added manually as a translation.

Filters

Another option available on the Dashboard is the filter. It can be used on pages that are already linked or on pages where actions have to be taken.

The “Todo” filter filters the Dashboard on pages where one or more translations are missing. It is easy to create translations from this overview.

The “Done” filter only shows pages where all translations are present. Columns can be made visible or invisible with the language filter options. This is useful when there are many languages.

Alternatives 

The great thing about our community is that we all try to make Umbraco great. So, off course there are other packages that will help you with translations and multilingual websites. But it's difficult to compare packages, because each package has its own way of working and providing solutions for specific parts of the language spectrum. For example Translation Manager by Kevin Jump. Translation manager is more focused on providing a workflow for content translation. Multilingual Tools on the other hand is solely made to provide insight and handy tools for content editors to manage multilingual content pages. Do you have good alternatives? Please, share them below in the comments!

Where to go from here?

All in all our client was very happy with the result: a great tool to manage their multilingual website. The package was also valued during DUUGFest, the annual festival of the Dutch Umbraco User Group. We received the third prize in the competition for new packages. That makes it even more interesting to continue with its development! In the near future we will be happy to further develop the Novaware Multilingual Tools.

For now, we offer a first bèta release at Our Umbraco. Try it, test it, vote for it. Whatever you do or think about te package, we are very open for your feedback. So please, do let us know what you think about it!

The package can be downloaded from our.umbraco.org.