Help with language in the app

API & Customization
1

i need create a app multi language,with somehow when the user chooses in a multiselect a language all the information you see on the screen change to the language I select, any idea how to do this? I would be very grateful if you could help me

2

This is awesome, thank you all for figuring this out. I think I can use this.

3

Hi Manuel,

It does help a lot!
I managed to do it in the app and it is really great!

Thank you very much!!

4

Hi Mathilde Chevallier
you do copy this in the API&Code

$(document).on('knack-scene-render.any', function(event, scene) {

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"; //JavaScript Code 2 - Load .js file from google apis //
document.body.appendChild(script);
});
$(document).on('knack-scene-render.any', function(event, scene) {
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en',layout:google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');}"; //JavaScript Code 1 - Actual JavaScript Function//
document.body.appendChild(script);
});

this is same code of Ajay Gupta, for show the dropdown with the idioma option you do create a rich text in the view that you wish and in the part html copy this

<p><span id="google_translate_element"></span>
</p>

I hope i have been helful, and i am sorry for my english i am not speak this idioma

5

Hi Ajay Gupta,

I am also looking for a mean to translate my app! I have multiple languages in my record and I would like to have all of them in English.

Your solution looks great, however, I did not manage to make it work in my app. May I kindly ask you a bit of help please?

This is what I pasted in my API&Code Settings:

$(document).on('knack-scene-render.kn-scene_156', function(event, scene) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"; //JavaScript Code 2 - Load .js file from google apis //
document.body.appendChild(script);
});

$(document).on('knack-scene-render.kn-scene_156', function(event, scene) {
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT, multilanguagePage: true},
'google_translate_element');}"; //JavaScript Code 1 - Actual JavaScript Function//
document.body.appendChild(script);

Thank you,

Mathilde

6

Hi Ajay Gupta This is just what I was looking for thank you very much it seems that sometimes it fails a little but it does not matter I thank you very much if you get more advances I would appreciate you to let me know

7

Manuel

I left this attempt in half way a while ago but after seeing your post I managed to create a reasonable work around using JavaScript and Google Translate for Websites. Here are the steps.

Step 1: Go to google translate for website and create your code snippet by filling a simple form. https://translate.google.com/manager/website

You will get a code snippet something like this /*See Explanation*/

<div id="google_translate_element"></div> /*For HTML Embed in your knack app*/

<script type="text/javascript">
function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en',layout:google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');}
</script> /*JavaScript Code 1 - Actual JavaScript Function*/

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> /*JavaScript Code 2 - Load .js file from google apis */

Step 2 - In your API & Code Settings, paste following code

$(document).on('knack-scene-render.any', function(event, scene) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"; //JavaScript Code 2 - Load .js file from google apis //
document.body.appendChild(script);
});
$(document).on('knack-scene-render.any', function(event, scene) {
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en',layout:google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');}"; //JavaScript Code 1 - Actual JavaScript Function//
document.body.appendChild(script);
});

Step 3 - Now you are good to go with JavaScript, all you need is embed this html code in any view of your app. Most of the time knack don't allow you to use <div> tag in rich text field. So you can use <span> or <p> tags also make sure you give the right id.

<div id="google_translate_element"></div> 
or
<span id="google_translate_element"></span> 
or

<p id="google_translate_element"></p>

Optional - If you want to have all pages to have a language select button you can change ID of any permanent element of the app Like I replaced .kn-current-user-intro text (i.e. "logged in as") with the google translate HTML code above. So now a language select drop-down is on every page right next to settings and other user pages. I did that with this JavaScript Code

$(document).on('knack-page-render.any', function(event, page) {
 $(".kn-current-user-intro").text('')//to replace text to blank//;$(".kn-current-user-intro").attr('id','google_translate_element');//to assign element id google_translate_element// 
});

Screen Shot

Hope this helps. Feel free to comment. I am still testing this may be it can be improved. My JavaScript is not so good.

Ajay

8

Manuel

I am searching way to do this in knack from more than a year. So far no luck.