Add Google Translate On SN Instance

[david_hreben]

Recently I was researching on a method to make translations easier on ServiceNow instead of tranlating each element on my instance. I thought it was time consuming so I wanted to make that easier with a different approach. I came accross with "https://translate.google.com/manager/website/" where they offer you the tranlation box to add on all the websites. So I managed this by reusing the code provided and added it to a UI Script to make show just next to the lock icon on the main page. Also used part of a code I used to create the Export to Excel button on the report area. Seems to be working fine, I had not tested this on any other SN version but Geneva but please let me know if you find anything wrong or any other issue. I am sharing this with you and am hoping it helps to stimulate your knowledge if there is not anything better out there.

Global UI Script:

API Name: Whatever you like

Global: True

Code:

addLoadEvent(addButton);

function addButton() {

  if ($('nav_header_stripe_decorations')) {

      var sp1 = document.createElement('div');

      sp1.setAttribute('id', 'google_translate_element');

      sp1.setAttribute('onLoad', 'googleTranslateElementInit();');

      sp1.setAttribute('style', 'display: inline-block; visibility: visible;');

      sp1.style.background = "#29d";

      var sp2 = document.getElementById('elevated_privilege_span');

      var parentDiv = sp2.parentNode;

      parentDiv.insertBefore(sp1, sp2.nextSibling);

  }

}

function googleTranslateElementInit() {

  new google.translate.TranslateElement({

      pageLanguage: 'en',

      layout: google.translate.TranslateElement.InlineLayout.SIMPLE,

      autoDisplay: false

  }, 'google_translate_element');

}

(function() {

  var d = "text/javascript",

      e = "text/css",

      f = "stylesheet",

      g = "script",

      h = "link",

      k = "head",

      l = "complete",

      m = "UTF-8",

      n = ".";

  function p(b) {

      var a = document.getElementsByTagName(k)[0];

      a || (a = document.body.parentNode.appendChild(document.createElement(k)));

      a.appendChild(b)

  }

  function _loadJs(b) {

      var a = document.createElement(g);

      a.type = d;

      a.charset = m;

      a.src = b;

      p(a)

  }

  function _loadCss(b) {

      var a = document.createElement(h);

      a.type = e;

      a.rel = f;

      a.charset = m;

      a.href = b;

      p(a)

  }

  function _isNS(b) {

      b = b.split(n);

      for (var a = window, c = 0; c < b.length; ++c)

          if (!(a = a[b[c]])) return !1;

      return !0

  }

  function _setupNS(b) {

      b = b.split(n);

      for (var a = window, c = 0; c < b.length; ++c) a.hasOwnProperty ? a.hasOwnProperty(b[c]) ? a = a[b[c]] : a = a[b[c]] = {} : a = a[b[c]] || (a[b[c]] = {});

      return a

  }

  window.addEventListener && "undefined" == typeof document.readyState && window.addEventListener("DOMContentLoaded", function() {

      document.readyState = l

  }, !1);

  if (_isNS('google.translate.Element')) {

      return

  }(function() {

      var c = _setupNS('google.translate._const');

      c._cl = 'es-419';

      c._cuc = 'googleTranslateElementInit';

      c._cac = '';

      c._cam = '';

      c._ctkk = eval('((function(){var a\x3d3314446584;var b\x3d-2175750672;return 405830+\x27.\x27+(a+b)})())');

      var h = 'translate.googleapis.com';

      var s = (true ? 'https' : window.location.protocol == 'https:' ? 'https' : 'http') + '://';

      var b = s + h;

      c._pah = h;

      c._pas = s;

      c._pbi = b + '/translate_static/img/te_bk.gif';

      c._pci = b + '/translate_static/img/te_ctrl3.gif';

      c._pli = b + '/translate_static/img/loading.gif';

      c._plla = h + '/translate_a/l';

      c._pmi = b + '/translate_static/img/mini_google.png';

      c._ps = b + '/translate_static/css/translateelement.css';

      c._puh = 'translate.google.com';

      _loadCss(c._ps);

      _loadJs(b + '/translate_static/js/element/main_es.js');

  })();

})();

//End of code

Note: If it does not work, you might need to register(just provide URL where you want to use it) on the URL provided above.

[nimerkawwa]

Here is the Global UI Script code that will work in UI16:

function google_translate ()

{

if (typeof jQuery === 'function' && typeof top.$j === 'function') {

jQuery(document).ready(function () {

var top = window.top;

if (typeof top.google_translate_loaded != 'undefined') {

return;

}

top.google_translate_loaded = true;

var googleTranslate;

googleTranslate = '<div id="google_translate_element" class="navpage-header-content">' +

'</div>' +

'<script>' +

'function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: "en", layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, "google_translate_element");}' +

'</script>'+

'<script>' +

'</script>';

top.$j('#sysparm_search').parents('div.navpage-header-content').first().before(googleTranslate);

}

);

}

}

google_translate();

[jyotilandage]

Hi David,

Thank you for this useful information.

I have tried your solution. It works fine on UI15 but does not on UI16 in Instanbul version. Please help me to acheive it on UI16 in Instanbul Version.

Thanks in Advance

Regards

Jyoti Landage.

[Mussie]

Hi Guys,

Check this thread Adding Google Translate to the Header of Service Portal - Istanbul on how to added Google Translate to Service Portal.

Mussie

[nimerkawwa]

Here is the Global UI Script code that will work in UI16:

function google_translate ()

{

if (typeof jQuery === 'function' && typeof top.$j === 'function') {

jQuery(document).ready(function () {

var top = window.top;

if (typeof top.google_translate_loaded != 'undefined') {

return;

}

top.google_translate_loaded = true;

var googleTranslate;

googleTranslate = '<div id="google_translate_element" class="navpage-header-content">' +

'</div>' +

'<script>' +

'function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: "en", layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, "google_translate_element");}' +

'</script>'+

'<script>' +

'</script>';

top.$j('#sysparm_search').parents('div.navpage-header-content').first().before(googleTranslate);

}

);

}

}

google_translate();

[arunkumardharma]

Hi nimerkawwa,

The above code is not working for me in UI 16. Is this the complete code? Could you please help me with this?

Thanks in advance.

Regards,

Arun