Populate form with parent fields before submitting new record

App Development
1

Is there a way to populate a form with fields from a connected parent record BEFORE the form is submitted?

I’m building a multilingual app that uses fields from a “Language” parent table to translate labels to the user’s language. The Language contains the translations, for example:

LANGUAGE TABLE (PARENT)
Language | name_label | email_label

English | Name | Email
French | Nom | Courriel

CHILD TABLE - “Add new” form

If the user is English, the form would display:
Name [child_table_name_field]
Email [child_table_email_field]

But if the user is French, the labels would change to:
Nom [child_table_name_field]
Courriel [child_table_email_field]

The closest I could get is to setup this rule in the child table:
On Create/Edit, Set [Connection field] to Logged in User’s Field [Language]

This rule does create the connection to the parent record but the “labels” are only displayed AFTER the form has been submitted which doesn’t work for me since the user needs to see the labels when filling-out the form. A 2-step form could work by doing the connection in step 1 and displaying the labels in step 2 but the user would have to click a button on an empty form in step 1.

Any ideas? Maybe there’s a way to do this using JS?

Thanks!

2

Hey there @Gaudspeed, welcome to the community.

This is an interesting question. Have you looked at the Google Translate pipe? Maybe this could be useful.

I’m also looking at this but having a hard time implementing it on a page right now - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_translate

3

Thanks @Tim.young, that’s a good idea, I’ll definitely use it on the front end but it doesn’t work to translate my field labels because it’s not always the right translation (google doesn’t have a context).

4

Hey @Gaudspeed and @tim.young

Using the google translate option with a bit extra CSS and JavaScript allows you to automatically select the logged in users “Language configuration”. You may also use a two-step form to change the label of a field depending on the user’s language configuration as well.

I started by adding a table called “Language Configurations” and added a record for each Language I want my users to be able to pick from.

image
image1920×880 64.4 KB

I then added a connection field from the User table to the Language Configuration.

Next, paste the following JavaScript code in the layout’s JavaScript

function googleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'en', 
        includedLanguages: '{loggedInUser.Language Configuration}', 
        autoDisplay: false
    }, 'google_translate_element');
    setTimeout(function(){
        var a = document.querySelector("#google_translate_element select");
        a.selectedIndex=1;
        a.dispatchEvent(new Event('change'));
    },500);
}
function visitorGoogleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'en', 
        includedLanguages: 'en', //Change this to the default languge you want for non-logged in users. for example "fr,iw,es"
        autoDisplay: false
    }, 'google_translate_element');
    setTimeout(function(){
        var a = document.querySelector("#google_translate_element select");
        a.selectedIndex=1;
        a.dispatchEvent(new Event('change'));
    },500);
}
$(function(){
    var googleTranslateElement = document.createElement('script');
    googleTranslateElement.type = "text/javascript";
    if('{loggedInUser.Language Configuration}'){
        googleTranslateElement.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
    } else {
        googleTranslateElement.src = "//translate.google.com/translate_a/element.js?cb=visitorGoogleTranslateElementInit";
    }
    document.head.appendChild(googleTranslateElement);
});

Make sure you update “Language Configuration” in {loggedInUser.Language Configuration} to the name of your field used to connect to that table from the user’s table.

image
image1920×1023 160 KB

I also added the following to the CSS of the layout in order to hide the Google Translate select option.

body {
    top:0!important;
}
.goog-te-banner-frame, .custom-translate, .goog-tooltip, .goog-tooltip:hover, #google_translate_element,.skiptranslate, #goog-gt-tt {
        display: none !important;
}
.goog-text-highlight {
    background-color: transparent !important;
    border: none !important; 
    box-shadow: none !important;
}

Until here, is how to automatically translate all text on the page using Google Translate.

If you’d like to go one step further and use your own translation, you can use a two-step form where in the first step, all you’re doing is connected the record to the logged in user and setting a text field to the logged in users “Language Configuration”. You may then use display rules to change the label text.

I made a short video where I go into this in detail: 10.27.2020-15.00.58

5

:clap: :clap: :clap: :clap:

Very nice

1 Like
6

Wow! This is great, thanks! …but no translation?

I did add the JS and CSS to the layout making sure the “Language Configuration” field was changed, then logged in with a French user (LanguageID = “fr”) but nothing happens.

I noticed there seems to be an issue with the CSS as I get a warning on every line that uses “!important”.

I included screenshots of JS, CSS and Users connection field.

Screenshot6
Screenshot61782×1302 408 KB

7

For the record, the reason it wasn’t working for me is that the following HTML component was missing:

<div id="google_translate_element">&nbsp;</div>

Thanks Chem, all good now!

8

If you’d like it to default to a specific language (for example, French) when a visitor navigates to the page, you can change the JavaScript code to the following.

function googleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'en', 
        includedLanguages: '{loggedInUser.Language Configuration}', 
        autoDisplay: false
    }, 'google_translate_element');
    setTimeout(function(){
        var a = document.querySelector("#google_translate_element select");
        a.selectedIndex=1;
        a.dispatchEvent(new Event('change'));
    },500);
}
function visitorGoogleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'en', 
        includedLanguages: 'fr', 
        autoDisplay: false
    }, 'google_translate_element');
    setTimeout(function(){
        var a = document.querySelector("#google_translate_element select");
        a.selectedIndex=1;
        a.dispatchEvent(new Event('change'));
    },500);
}
$(function(){
    var googleTranslateElement = document.createElement('script');
    googleTranslateElement.type = "text/javascript";
    if('{loggedInUser.Language Configuration}'){
        googleTranslateElement.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
    } else {
        googleTranslateElement.src = "//translate.google.com/translate_a/element.js?cb=visitorGoogleTranslateElementInit";
    }
    document.head.appendChild(googleTranslateElement);
});