Extensibility | List Translators

If you are working on list extension, there is one little thing which you should know about.

This tiny thing is a list column translator.

Might sound simple, but in fact it is a very-very powerful tool when you want to change your list representation.

List Columns Translators are the client side translators, which are used as well as List dictionaries, but when you need translations depending on your client-side context.

From previous video tutorial you can find out how to extend list columns in general.

To recap, you should add column extension to your list definition extension in configuration and define @translate attribute.

In @translate attribute you should specify Javascript function whih will be doing translation itself.

Functionally translators themselves are very simple, you have one parameter which is the result of definition xPath selection by @selector attribute. And the return result, which will be pasted as innerHTML(!) to this column value container.

Let`s create a simple Translator which will calculate the vowels percentage of item title and put this column next to Title column.

Then, you have to create a group which will contain a reference to the file with implementation.

And associate it with one of the existing groups through resource extension.

And see what vowel percentage your items has.

Title Percenage


Let`s add some charm.

Let`s visualize it!

To do so, add a new column with one more translator:

Put the translator implementation:

And see the result.

Item percentage visualization

Pretty simple, right?

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA image

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>