Translate Javascript strings from Webform

In this article I want to tell you about the problems we encountered with Webform during the development of a project in Drupal 8, and of course, the “temporary” solution.

All this happens, as I have already told you, in the contrib module Webform, and more specifically in the < section a i=3>CSS / JS, within the configuration of a form. It turns out that when configuring the Javascript of a Webform within this section, if you include strings and then translate them, a simple “Drupal->t()” will not be enough. , since the Drupal translation engine will not find your translatable strings, because they are stored in the Webform configuration file.

But then, how do we translate the strings within this javascript?

First of all we have to analyze the possible solutions and which one best suits our case.

1. Ignore the translations: I don't know if this is a solution at all, but if it is not really necessary to translate the strings, you can ignore the translation of these and avoid problems.
2. Do not use webform: perhaps this is the most interesting solution if you need to translate strings through Javascript. To do this, you should rethink the use of the Webform module and if it is easier to create a custom module, with its form and its javascript, which will be loaded in the libraries.yml and, where in this case, you will not have any problem translating strings from the translations interface.
3. Something else… “temporary”: If you absolutely need the use of Webform because your project manages many forms through this module, you can solve it as I will show you below.

It turns out that in the Webform javascript we have the drupalSettings variable, which will be our savior. This variable contains objects and properties that are Drupal's default, others that supply contributed modules, and of course those that we pass in the custom modules. The solution is in the path object of the drupalSettings variable, which always comes by default.

var Currentlanguage = drupalSettings.path.currentLanguage;

Through the “currentLanguage” property we can obtain the language through the url, so that we can know the language in which the user views the site at the time of rendering the webform. With this in our hands, we can simply choose (always depending on our specific case) a range of possibilities and conditionals to translate the string.

(I) If we have only two languages ​​and the default is English, we can apply a simple conditional.

var message;
if ( Currentlanguage == 'pt' ){
 message = 'Obrigado por contactar';
} else {
 message = 'Thank you for contacting';
}

(II) If we have several languages, we can opt for a switch structure.

switch ( Currentlanguage ) {
  case 'pt':
    message = 'Obrigado por contactar';
    break;
  case 'fr':
    message = 'Gracias par contactar';
    break;
  case 'es':
    message = 'Gracias por contactar';
    break;
  default:
    // 'en' is default language.
    message = 'Thank you for contacting';  
    break;
}

Do not forget that the javascript has to be collected using the Drupal.behaviours and not the ready ones, to be able to access the drupalSettings, Drupal… variables (as shown in the following image)

It may not be the best solution, or the most elegant, but it is a valid one until Webform fixes this error, in string translation. I invite you to follow this issue in case better solutions emerge than the ones I propose: https://www.drupal.org/project/webform/issues/3167153

A hug!