DynamicTranslation API in ServiceNow | Translate Dynamic text on Portal

Recently, I tackled a fascinating request from a client that pushed the boundaries of language accessibility. They needed a way to automatically translate variable texts—whether a single line or paragraphs—within their service catalog into the user's preferred language. This task opened up a journey into the world of Dynamic Translation in ServiceNow, and I'm here to share that adventure with you. 

The Basics:

Translating Static Data Translating static content in ServiceNow is straightforward, thanks to the "sys_ui_message" table. It allows us to set up translations for various pieces of text based on the user's language. This feature is a fantastic tool for managing fixed texts across your portal. 

For static Translation, you can refer to this ServiceNow Docs.

The Challenge:

 Dynamic Data Translation But what about texts that aren't static? Information entered by users or texts that change based on context poses a unique challenge. This is where the game changes and the DynamicTranslation API comes into play. 

The Solution: 

DynamicTranslation API provides methods that translate text, in real-time, into multiple languages using translation service providers. This API is available for both standard clients and Angular-based Service Portal clients.

For static Translation, you can refer to this ServiceNow Docs.

Note: To use this API you must activate the Dynamic Translation plugin

Steps I follow to add this feature:-

• Create a button or an anchor <a> tag on HTML.
• Add onclick() Function to that button, and call the function inside Client Script, and pass the value/text you need to translate as an argument.
• Inside the Server Script you can fetch the value of user selected Language using "gs.getSession().getLanguage();" and store it into a variable that can pass it to the Client Script.
• Inside Client Script, define the call-back function for translation.

Here is a basic code for this:-

HTML:

<div>

    {{data.text}}

    <br>

    <a class="translate-link" role="button" href="javascript:void(0)" ng-click="c.translateText(data.text)">Translate:-</a>

    <br>

    <p id="trans_area">&nbsp;

    </p>

</div>

Client Script:

api.controller = function($scope, $window, i18n, dynamicTranslation) {

    /* widget controller */

    var c = this;

    c.translateText = function(text) {

        dynamicTranslation.getTranslation(text, {

            "targetLanguages": [c.data.lang],

            "additionalParameters": [{

                "parameterName": "texttype",

                "parameterValue": "plain"

            }],

            "translator": "Microsoft"

        }).then(function(res) {

            document.getElementById("trans_area").innerHTML = res.translations[0].

            translatedText;

            console.log(res.translations[0].translatedText);

        }, function(res) {

            console.log(res);

        });

    }

};

Server Script :

(function() {

    data.text = gs.getMessage("Kaynaklar listelenmelidir");

data.lang = gs.getSession().getLanguage();

})();

I am here using MICROSOFT Translator, From Server Script I am sending a text which is in "Turkish Language" in data.text variable. After clicking on the "Translate" on HTML, it will pass the data to the function definition, and using DOM manipulation I am putting the translated value there.

NOTE: You must inject the dynamicTranslation service into the widget client script function inside the Client Script "api.controller = function($scope, $window, i18n, dynamicTranslation)"

Do refer to this ServiceNow Docs.

If you have any issues or query feel free to reach out - Linkedin