App Maker多语言适配：自建翻译数据模型替代谷歌翻译

Great plan to build a custom translation model instead of relying solely on Google Translate—this gives you full control over accuracy, which is critical for avoiding awkward mistranslations in your app. Let’s break down how to implement this effectively in App Maker, including handling that reusable header fragment you mentioned:

First, create a new data model (let’s call it TranslationLookup) with these fields to store all your localized content:

• FieldIdentifier (string, required): A unique, consistent key for each UI element (e.g., "customer_name", "btn_submit", "search_placeholder")—this is how you’ll link your components to their translations.
• FieldDisplayName_EN (string, required): Default English field display name (your current text).
• FieldDisplayName_DE (string): German translation for field display names.
• FieldDisplayName_FR (string): French translation for field display names.
• FieldDisplayName_IT (string): Italian translation for field display names.
• LabelText_EN (string, required): Default English label/text for UI components (like menu buttons, search placeholders).
• LabelText_DE (string): German translation for component labels.
• LabelText_FR (string): French translation for component labels.
• LabelText_IT (string): Italian translation for component labels.

Add two server-side functions to fetch translations dynamically based on the user’s locale. This keeps your code DRY and easy to maintain.

For Field Display Names #

function getTranslatedFieldName(fieldKey) {
  var userLocale = Session.getActiveUserLocale(); // Pulls the user's active locale (e.g., "de", "fr", "it")
  var translation = app.models.TranslationLookup.query.filters.FieldIdentifier._equals(fieldKey).run()[0];

  // Fallback to the English version if no translation exists for the locale
  if (!translation) return fieldKey;

  switch(userLocale) {
    case "de":
      return translation.FieldDisplayName_DE || translation.FieldDisplayName_EN;
    case "fr":
      return translation.FieldDisplayName_FR || translation.FieldDisplayName_EN;
    case "it":
      return translation.FieldDisplayName_IT || translation.FieldDisplayName_EN;
    default:
      return translation.FieldDisplayName_EN;
  }
}

For UI Component Labels (Buttons, Search, etc.) #

function getTranslatedLabel(labelKey) {
  var userLocale = Session.getActiveUserLocale();
  var translation = app.models.TranslationLookup.query.filters.FieldIdentifier._equals(labelKey).run()[0];

  if (!translation) return labelKey;

  switch(userLocale) {
    case "de":
      return translation.LabelText_DE || translation.LabelText_EN;
    case "fr":
      return translation.LabelText_FR || translation.LabelText_EN;
    case "it":
      return translation.LabelText_IT || translation.LabelText_EN;
    default:
      return translation.LabelText_EN;
  }
}

For Fields #

Go to each field’s properties panel, find the Display Name field, and replace the static text with a script call:
getTranslatedFieldName("customer_name") (replace "customer_name" with the matching FieldIdentifier from your model).

For Reusable Header Fragment Components #

Since your header is a fragment, you can apply the same logic to its elements:

• For menu buttons: Set the Text property to getTranslatedLabel("menu_dashboard") (use the appropriate key for each button).
• For search boxes: Set the Placeholder property to getTranslatedLabel("search_placeholder").

To save time, export your current English text into a CSV file with columns matching your TranslationLookup model, then import it into App Maker. Example CSV structure:

FieldIdentifier,FieldDisplayName_EN,FieldDisplayName_DE,FieldDisplayName_FR,FieldDisplayName_IT,LabelText_EN,LabelText_DE,LabelText_FR,LabelText_IT
customer_name,Customer Name,Kundenname,Client,Nome cliente,,Search here,Suchen Sie hier,Recherchez ici,Cerca qui
menu_dashboard,Dashboard,Dashboard,Tableau de bord,Dashboard,,,,,,

Once imported, you can fill in the translated values directly in the App Maker data editor.

• Keep English fields marked as required—this ensures there’s always a default if a translation is missing.
• Build an admin-only page to edit translations: This lets you update or add new languages later without touching UI code.
• Test with different locales: Use App Maker’s preview settings to switch user locales and verify translations load correctly.

内容的提问来源于stack exchange，提问作者Johan W.