Language translation for Queue

[Giulio Soleni]

Hi everybody,
is it possible to translate the queues names, at least for the Customer portal, according to the language selection of the users?

My goal is to define one queue named, e.g. "Customer Support" and have it displayed like "Supporto Clienti" for Italian customers or "Kundenbetreuung" for German customers and so on...

Simply editing /opt/otrs/Kernel/Language/* files it is not enough ... I would like to know if someone might give me a hint to edit CustomerTicketMessage.dtl template as well for this purpose.
Or else if there is a more simple solution...

Thank you very much in advance,
Giulio

[crythias]

Here's where I'd suggest that per-language queues are better. And only for the reason that it should guarantee (?) that the agents attached to those queues speak that language.

[Giulio Soleni]

Hi crythias,
thank you for your reply.
I may agree with you, but on the other hand, if I need to define 3 or 4 separate queues exactly for the same topic which are different only for the language of their name, that does not seem to me an "elegant" way to proceed... also because of the statistics and reports that should be changed accordingly (for example 'number of open tickets in "Customer Support" queue' stat should become 'number of open tickets in "Customer Support" + "Supporto Clienti" + "Kundenbetreuung" + ... queues').

But these are my personal considerations ... just getting back to the plain technical layer and assuming that OTRS presently does not allow this specific translation, do you know perhaps what are the customizations needed?
Looking at the dtl:block:queue section in CustomerTicketMessage.dtl I see that the queue names in the "To" menu are retrieved from $Data{"ToStrg"} ... maybe I am wrong.
I tryed to define some entries in /opt/otrs/Kernel/Language/it.pm and I changed $Data{"ToStrg"} in CustomerTicketMessage.dtl with $Text{"$Data{"ToStrg"}"} without result ...
... ok, that was a really naive attempt... but do you think that this could be the way?

thank you

EDIT: I see now that in /opt/otrs/Kernel/Modules/CustomerTicketMessage.pm there is the BuildSelectionJSON array that should (I think) specify the different fields displayed on the customer web interface. I know that "Dest" field is that for Queues.
There is tha Translation attribute set to 0 ... I switched it to 1

Code: Select all

        
my $JSON = $Self->{LayoutObject}->BuildSelectionJSON(
            [
                {
                    Name         => 'Dest',
                    Data         => $NewTos,
                    SelectedID   => $Dest,
                    Translation  => 0,
                    PossibleNone => 0,
                    TreeView     => $TreeView,
                    Max          => 100,
                },
                {
                    Name        => 'PriorityID',
                    Data        => $Priorities,
                    SelectedID  => $GetParam{PriorityID},
                    Translation => 1,
                    Max         => 100,
                },

[...cut... ]

Something changed... however I still do not have the result I would like, since queue names arent traslated until they are selected and moreover, their sorting and dependences (queues and subqueues) are messed up.
... still working (and still need help )

[crythias]

re:
$Text{"$Data{"ToStrg"}"}
Consider what $Data{"ToStrg"} is actually creating: an HTML input option list. Yeah. I think you get the problem in translation at that point.

EDIT: I see now that in /opt/otrs/Kernel/Modules/CustomerTicketMessage.pm there is ...

:) I wonder if you'd look for ToStrg within there? :) :) :)

[Giulio Soleni]

re:
$Text{"$Data{"ToStrg"}"}
Consider what $Data{"ToStrg"} is actually creating: an HTML input option list. Yeah. I think you get the problem in translation at that point.

yep, and the problem is actually $Data{"ToStrg"} is a list ... while I need to setup the translation for all the queues one-by-one in /opt/otrs/Kernel/Language/* files

EDIT: I see now that in /opt/otrs/Kernel/Modules/CustomerTicketMessage.pm there is ...

I wonder if you'd look for ToStrg within there?

Let us say I knew there was also a CustomerTicketMessage.pm somewhere ... but yes, my first search was a generic grep ToStrg
... anyhow I really need to investigate on the usage of that "Translation" parameter.

[crythias]

from CustomerTicketMessage.pm:
$Param{ToStrg} = $Self->{LayoutObject}->AgentQueueListOption(

Within Kernel/OutputHTML/LayoutTicket.pm

Code: Select all

sub AgentQueueListOption
...
    if ( $Self->{ConfigObject}->Get('Ticket::Frontend::ListType') eq 'list' ) {
        $Param{MoveQueuesStrg} = $Self->BuildSelection(
            %Param,
            HTMLQuote     => 0,
            SelectedID    => $Param{SelectedID} || $Param{SelectedIDRefArray} || '',
            SelectedValue => $Param{Selected},
            Translation   => 0,
        );
        return $Param{MoveQueuesStrg};
    }

[Giulio Soleni]

Thank you very much crythias! It seems to work!! But I am not sure I perfecly understood your last reply:
just to recap, I need to set Translation => 1 BOTH in /opt/otrs/Kernel/Modules/CustomerTicketMessage.pm here:

Code: Select all

        
my $JSON = $Self->{LayoutObject}->BuildSelectionJSON(
            [
                {
                    Name         => 'Dest',
                    Data         => $NewTos,
                    SelectedID   => $Dest,
                    Translation  => 1,
                    PossibleNone => 0,
                    TreeView     => $TreeView,
                    Max          => 100,
                },

AND ALSO in /opt/otrs/Kernel/Output/HTML/LayoutTicket.pm

Code: Select all

    if ( $Self->{ConfigObject}->Get('Ticket::Frontend::ListType') eq 'list' ) {
        $Param{MoveQueuesStrg} = $Self->BuildSelection(
            %Param,
            HTMLQuote     => 0,
            SelectedID    => $Param{SelectedID} || $Param{SelectedIDRefArray} || '',
            SelectedValue => $Param{Selected},
            Translation   => 1,
        );

correct?
Since it seems to me that if I specified Translation => 1 only for LayoutTicket.pm module, queues sometimes appear with their default (english) name and sometime, after a browser refresh due to another selection, with their translated name... then back to their default name again ... in other words the behavior is a little bit unpredictable.

When, instead, I specified Translation => 1 on both LayoutTicket.pm and CustomerTicketMessage.pm modules the behavior at the Customer web console seems to me more stable and queues appears always translated as expected (well ...indeed at the very first time I open the queue menu, the queue list appears in default-english but it suddenly changes to the "translated version" as soon as I select any queue ... I think my customers can accept this).

Are that above just my impressions?

[crythias]

Are that above just my impressions?

I'm not going to dispute your findings. :) Apparently, the primary list is generated separately from the ajax list, so it would make sense to translate both.

[Giulio Soleni]

Are that above just my impressions?

I'm not going to dispute your findings.

lol ok ... thank you.
then definitely I'm putting a [SOLVED] on this topic.

EDIT: unfortunately these days I noticed a couple of really annoyng side effecs:
- the first: in the queue menu, any parent queue that should not be accessed by the customer (originally grayed out) become accessible when translated.
- the second (even worst I think) the "tree selection" little button beside the dropdown menu for the selection of the queue become useless (cannot be used anymore) with the translated queue.

[Giulio Soleni]

I am still looking for a solution... I am checking 4.0.7 version now but the behavior is the same as it was for 3.3.x
I am wondering if someone may help me on this topic too... or maybe has an idea to answer my question in a different way.
thank you

[eandrex]

Hi,

I would base my solution in pure javascript. In that way the language is changed client side (no side effects like you just mentioned).

Code: Select all

switch(Core.Config.Get("UserLanguage")){
	case "es":
	//get queue  dom object, iterate its options and change language to spanish
	break;
}

after you have built your javascript code, you can enclose it inside

Code: Select all

<!-- dtl:js_on_document_complete -->

tags and place it in CustomerTicketMessage.dtl

Have fun

[Giulio Soleni]

Hallo eandrex, thank you very much for your hint!
Would you be so kind to detail a little bit more your answer?

As far as I could see within CustomerTicketMessage.dtl (in OTRS 3.3.x) the block that should be edited is this one:

Code: Select all

<!-- dtl:block:Queue -->
                <div>
                    <label for="Dest" class="Mandatory">
                        <span class="Marker">*</span>
                        $Text{"To"}:
                    </label>
                    $Data{"ToStrg"}
                    <div id="DestError" class="TooltipErrorMessage" ><p>$Text{"This field is required."}</p></div>
                    <div id="DestServerError" class="TooltipErrorMessage NoJavaScriptMessage$QData{"QueueInvalid"}" ><p>$Text{"This field is required."}</p></div>
                    <div class="Clear"></div>
                </div>
<!--dtl:js_on_document_complete-->

and the related block in OTRS 4.0 ver is:

Code: Select all

[% RenderBlockStart("Queue") %]
                <div>
                    <label for="Dest" class="Mandatory">
                        <span class="Marker">*</span>
                        [% Translate("To") | html %]:
                    </label>
                    [% Data.ToStrg %]
                    <div id="DestError" class="TooltipErrorMessage" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div id="DestServerError" class="TooltipErrorMessage NoJavaScriptMessage[% Data.QueueInvalid | html %]" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div class="Clear"></div>
                </div>
[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
    $('#Dest').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewCustomerTicket'), 'AJAXUpdate', 'Dest', ['TypeID', 'PriorityID', 'ServiceID', 'SLAID', [% Data.DynamicFieldNamesStrg %]]);
    });
//]]></script>
[% END %]
[% RenderBlockEnd("Queue") %]

... if I understood correctly you suggested me to put a script looping on $Data{"ToStrg"} (or [% Data.ToStrg %]) content... isn't it?

Now I am going to test something like ... but I would really appreciate some more details if possible

Thank you very much.
Giulio

[eandrex]

Hi,

I didnt mean that.

What i meant was to edit the HTML after it is fully parsed by OTRS, so you dont have to manipulate .dtl syntaxis or .pm files.

Paste this:

Code: Select all

Core.Debug.Log(Core.Config.Get("UserLanguage"));

after this line

https://github.com/OTRS/otrs/blob/rel-4 ... ge.tt#L236

now go to http://yourdomain/otrs/customer.pl?Acti ... ketMessage and right click -> inspect element and go to "console" tab.. you will se that your selected language is printed there.

after you have understood what i meant, you will get it done quickly.

[eandrex]

In fact, you can paste this instead (as an example of what you could do)

Code: Select all

$("#Dest option").each(function(){
$(this).text("hi, i need to be translated");
});

now, when you are going to create a ticket, all queues will have "hi, i need to be translated" as text

[Giulio Soleni]

I think I am close to a solution (or at least to a workaround...) however there still something more to do...
Taking into account your precious hint, eandrex, I use the following snippet:

Code: Select all

$('#Dest').find('option').each(function(index,element){
var TranslatedText = [% element.text | Translate | JSON %];
alert(element.text + " ... " + TranslatedText);   // ...just to have a popup to check both strings, original and translated
$(this).text(TranslatedText);
 });

I defined a queue called ACME and I set a translation on my it.pm file: 'ACME' => 'ACMEIT'

...but I got an empty queue menu-list (or better a menu-list full of empty values, that is all queues were replaced by an empty value) and the translated part in the popup is always blank.

I got exactly the same result if I replace var TranslatedText = [% element.text | Translate | JSON %]; with

Code: Select all

var TranslatedText = [% Translate(element.text ) | JSON %];

on the other hand if I replace this line with a real string (like 'ACME'):

Code: Select all

var TranslatedText = [% Translate("ACME") | JSON %];

or else

Code: Select all

var TranslatedText = [% "ACME" | Translate | JSON %];

I got a list of queues all translated into ACMEIT.

So it seems that for some reason it is not able to assign any correct value to element.text variable within [% Translate %] template...

[eandrex]

Hi,

I think that the scope of

Code: Select all

element.text

is only for the javascript code, therefore, the OTRS Templating system isnt aware of it

thats why

Code: Select all

var TranslatedText = [% element.text | Translate | JSON %];

does nothing.

Your best bet is using Core.Config.Get("UserLanguage"); in your javascript code.

Here:

Code: Select all

$("#Dest option").each(function(){
 //We are going to translate Queue with ID 5
  if($(this).val=="5"){
    var n_text = "";
    switch(Core.Config.Get("UserLanguage")){
		case "es": //spanish
		n_text = "Hola!";
		break;
		case "en": //english?
		n_text = "Hi!";
		break;
		// add other language codes
		default: //No translation available
		n_text = $(this).text();
		break;
	}
	$(this).text(n_text);
  }
  //translate here more queues..otherwise $.each is too overkill for translating a single queue
});

Btw it is untested

[Giulio Soleni]

Hi,
I have elaborated a little bit your solution as it follows... this way wherever the word "Support" is found it is replaced with Manutención in spanish and Manutenzione ... it's still just a test but more specific to what I would like to get:

Code: Select all

$("#Dest option").each(function(){
  if($(this).text().indexOf("Support") > -1){
    var n_text = "";
    switch(Core.Config.Get("UserLanguage")){
      case "es": //spanish
      n_text = $(this).text().replace("Support","Manutención");
      break;
      case "it": //italian
      n_text = $(this).text().replace("Support","Manutenzione");
      break;
      // add other language codes
      default: //No translation available
      n_text = $(this).text();
      break;
   }
   $(this).text(n_text);
  }
});

However - big issue - all the queues are presented as translated as I access the customer frontend, but at the first refresh of the page, for example right after the selection of a queue itself... they all turn back to the original english definition.

I tried also to put the same js function right after the following lines in CustomerTicketMessage.tt:

Code: Select all

    $('#Dest').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewCustomerTicket'), 'AJAXUpdate', 'Dest', ['TypeID', 'PriorityID', 'ServiceID', 'SLAID', [% Data.DynamicFieldNamesStrg %]]);

where I think the Queue menu is presented for the selection ... however the problem persists.

uff... I think I am so close to the solution.

anyhow a big thankyou to you eandrex!