Add Google Translate On SN Instance

david_hreben · ‎05-04-2016

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',

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.

david_hreben · ‎07-11-2016

This is how it would look like with Horizontal View:

Just change the following lines:

Change

by

Note: You might want to change the line of code 'p1.style.background = "#29d";' to the background color of your SN site.

Mussie · ‎04-03-2017

Hi David,

It is working in the native UI, thanks. Any idea how can have this launched from Service Portal?

Mussie

david_hreben · ‎05-15-2017

Hello Mussie,

I was able to add it to the Service Portal but did not have enough time to play with it. You can create a widget then add it to the portal as such if it works for you. Just go to the widget area, add the code below over "Body HTML Template". Rest of the fields leave them as they are and save it. Then add the widget where you need it. I hope it helps.

Portal Widget Source Code:

Name: Google Translate (optional)

Id: google (optional)

Body HTML Template:

</div>

function googleTranslateElementInit() {

new google.translate.TranslateElement({

pageLanguage: 'en',

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

</script>

sarannian87 · ‎04-04-2017

Hello David,

Thanks for this useful information.

I tried this out in my developer instance and it seems to be working fine in UI15, but it does not seem to be appearing in UI16. Is there anything additional to be done for it to be appearing in UI16, Istanbul version.

Regards,

Saran