You are viewing limited content. For full access, please sign in.

Question

Question

Google Translate in Forms Version 11

asked on August 15, 2023 Show version history

Has anyone figure out how to use Google Translate on their forms in version 11? I know you could do it in the classic designer, but I am pretty new to LF and cannot seem to figure out how to do it in version 11.

1 0

Answer

APPROVED ANSWER
replied on January 31

Hi everyone. I was able to get with Zachary and get a copy of the solution he created. I created a video that walks through the basics of how it works (with Zac's permission). You will want to go to the actual YouTube video as there is a link to download the Forms processes talked about in the video from the video description.

4 0
replied on February 1

Here is part 2 of this solution:

1 0
replied on April 10

The links to download the forms does not work. Can you provide a new link please? Thanks!

0 0

Replies

replied on August 29, 2023

Which languages do you need to support? We are implementing a feature that should allow you to update all text elements on the form that will be released in Q4 of this year for self hosted systems. Unfortunately, this still does not enable you to use the Google Translate widget out of the box, and instead requires you to setup the translations yourself.

 

Like another commenter suggested, you can use the Classic designer to implement this still. This is on my use case list to look into though so stay tuned

3 0
replied on October 11, 2023

@████████ Any updates on this feature? Thanks

0 0
replied on October 11, 2023

It looks like they just released it for LF Cloud, so Self-hosted systems should be next.

1 0
replied on January 12

Did this end up getting implemented in the latest version to use in the new designer.

0 0
replied on January 12

Yes, the ability to update text elements was included in Forms 11 Update 5.

0 0
replied on January 18

Is this part of the HTML or the JS.  I can't seem to get the translate element to work in Modern.  

This is what I was using in classic.  

$.getScript("//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');

0 0
replied on January 18

You are still not able to use that method. The method that Zachary was referring to is that there were new interfaces within the LFForms object to change the field labels, which can in turn be used to change a field label to a different language. I haven't seen any examples of code on how to accomplish this yet though.

0 0
replied on January 18

Also, jquery is not available in the new form designer, I would recommend using the JS fetch method directly to interact with Google's API. The general flow I designed was

  1. Finalize form design
  2. Establish the languages I want to support
    1. Include these languages in a radio/dropdown on the form
  3. Run the form and fields through the Google translate API to the desired languages, including english
  4. save these values to the form JS in the form of a JSON object that allows you to simply map the fields and ids back to their various settings 
    {
       "en": {

            39: {
                "label": "Contract Upload",
                "subtext": "",
                "tooltip": "",
                "buttonLabel": "Choose files"
           }

       }
    }
  5. disable the translation
  6. run code on field change of the language field to parse the saved JSON onto the form field settings
     

A video of the solution that I built was shown in the cloud release video here
https://doc.laserfiche.com/releases/Content/2023.10.htm at the 2:50 mark

 

We do at some point hope to have more native support for designer defined languages without scripting but we believe this feature filled as a stop gap for those that needed the feature asap. Please do let me know if you need help or if this does not quite meet your needs!

0 0
replied on January 18

Will this work on Custom HTML as well as fields?

1 0
replied on January 18 Show version history

@████████, would it be possible to not even use the Google Translate API now? For example, if you had a radio button where each option was a Language value (English, Spanish, and French). And when the radio button value is changed, update the field labels accordingly using the changFieldSettings? Granted you would have to manually set each value instead of using the Google API to do it. If yes, are you able to share some code of how that would work?

 

1 0
replied on January 18

Also, if you are able to share the code for using the Google Translate API that is shown in the video, that would be great. The video doesn't show the full code because of the width of the screen and it stops short of scrolling to the bottom.

0 0
replied on January 18

Yes you could definitely build the JSON yourself instead of relying on Google's translations to generate the JSON. It is just a matter of making sure you format it properly so you can easily parse it.

Let me locate the code and I will email it to you.

1 0
replied on January 18

can you send it to me too please?

0 0
replied on April 10

Zachary, could you send me the code as well? The youtube video has an old link to the forms that does not work.

0 0
replied on April 10

The link from the YouTube video works when I try it. Are you getting an error?

0 0
replied on April 11 Show version history

Doesn’t work for me either. Just opens a new tab that immediately closes. No download

 

The email I have for you doesn’t work anymore 

0 0
replied on April 11

It worked for me using Microsoft Edge but gave a warning that it couldn't be downloaded securely. Google Chrome just opened a new tab and closed it immediately. Either way I have updated the link in the video, and it should work correctly regardless of which browser you are using.

0 0
replied on April 11

Thanks guys!

0 0
replied on August 16, 2023

I think you'd be hard pressed to make this work in the Forms Layout Designer (the Modern Designer).  It requires adding a widget to the body of the form, which you can do with the Custom HTML field element, and then it requires running a script on the page that interacts with that widget in the Custom HTML field element, which is where things get difficult.  Because the Javascript is running within a sandboxed iFrame, it cannot directly access the components of the form or fields, so it can't coordinate with the widget directly - it also wouldn't be able to access all the parts of the form to actually translate the text.

I messed with it for a while trying to make it work but without any success.

I'm guessing this is one that isn't going to be possible without some sort of built-in integration from Laserfiche.

1 0
replied on August 16, 2023

Wow, thank you Matthew. I was afraid of that kind of answer. I suspected someone had to have seen this as well.

1 0
replied on January 31

@████████ please take a look at the marked answer and let me know if it works for you!

0 0
replied on January 31

I am going to be upgrading to Forms 11 Update 5 soon and will try this. Right now we are on update 4.

0 0
replied on January 31

Fantastic, looking forward to hearing how it goes!

0 0
replied on August 17, 2023

@laserfiche, FWIW this has blocked adoption by three of our larger municipalities.

0 0
replied on August 21, 2023 Show version history

Just to clarfy what Matthew mentioned.

Laserfiche 11 has 2 forms Designers: Classic and Modern Designer. The Google translate configuration as Matthew describes works great under LF 11, just use the classic designer.

1 0
replied on January 18

@████████ Can you take a look at my answer detailed here and let me know if it would work for you and these municipalities? If not I would be interested to pick your brain about the use cases and what a solution would look like.

0 0
replied on March 25 Show version history

Thanks for all the hard work on this solution! And the packaging by Blake :)

I'd like to echo @████████ and ask about if this works with custom fields? Or what do we need to think about to accomplish that?

How does this work on the input values of the fields? Will it change the characters if say, it is set to Russian?

 

What about the content of existing inputs? Say there is a field that is populated prior to getting to the translate form, with the value in the field input also get translated?

 

Thanks!

0 0
replied on March 26

This won't work on custom HTML if that is what you are asking.  I just had to create an English and Spanish version for all my custom HTMLs and show/hide based on the language selected.  I only have two languages though, so it would be a lot if you have more.  

Values are not translated with this setup.  All the fields get translated up front like in Blake's video.  If you need to make changes, add or delete fields you will have to adjust the JS manually or rerun the API translation.  

Default values don't translate either.  Its essentially tabs, heading, field names, text below fields, and pagination.

0 0
replied on March 26

Correct, although self hosted installations do support changing options in checkbox/radio/dropdowns I felt it slightly overcomplicated the setup of the whole translation form JS supporting cloud and self hosted environments. The best way to accomplish this would be with a lookup rule right now.

It does look like Google Translate supports HTML markup so that might be an easy addition to this solution

2 0
You are not allowed to follow up in this post.

Sign in to reply to this post.