Custom Field Localization (beta)

[TimG]

Status

This feature is currently in beta . Please reply to this post with questions and feedback!

Requirements

Currently, level localization requires using our React SDK

Usage

Localization for Custom Fields works in a very similar manner to our field level localization, with the difference being that custom field localization setup will be handled on the model level. To add localization to a custom field, find your way to the model you want to update, and open the Custom Field input

You will see the new Localized toggle, set to off by default. When you toggle it to On you will see input fields displayed below. You can add more locales by clicking the Add locales here link, which will bring up the add local modal

Here you can enter any locales that you use in your app. This value will now be added as a possible input field for that custom field. You can enter in a default value for that input field for each locale as well. When you have added all locales and defaults, don’t forget to save your model!

Now, navigate to the content entry you would like to author or edit.

For Data model entries, the fields will appear as fields in the content entry page.

For Section and Page models, these custom fields will appear in the Options tab on the content page

Accessing localized data

These entries will then be available on the content entry as an object. So, for example, say we have an article data model that we have pulled onto a page. If we look at a article in our content inspector, you can see:

Within your code, you could access the same article entries with something like:

const content = await builder.get('article', { ...options });
const localizedDescription = content.data.description[locale];

And that should do it! Custom fields should now be available within your content blocks to access localized content authored within Builder.

To manage locales go to builder.io/account/space and choose the pencil button next to “Custom targeting attributes” and you can add and remove locales next to the locale field

Follow Ups and More Info

As with any beta features, we would love to hear your thoughts! Please provide any feedback or bugs you may have found in the comments below!

For more info on localization for an entire content entry, see our forum post here: Localization in Builder

For more info on standard input field localization, see our forum post here:
Field Level localization: Field level localization (beta)

[radikris]

Hi @TimG!

Bind dynamically localizedlist item's value

Hello! I would like to know how to bind a localized list item’s value to an element. Here is my symbol: It has two input field: [image] A data reference, and a locale, so when I add this symbol to my page, I can pick dynamically the reference and the locale (symbol localization+custom field localization is my goal) On my page you can see that: [image] For your help, my data entry has 4 property, but only two of them is localized: As you can see, in the symbol I could bind a simple pr…

Here I wrote a detailed issue with it.

[Zak]

@TimG

level localization

Hi
I am doing the same steps to translate my custom fields, but the locale variable is undefined.
I did the same steps as yours “sate.data.description[locale]” and when I go to the preview mode I got “undefined” and when I remove the [locale] from the state then I got [object, object] on the webpage.

FYI, I am using the Angular SDK and I am updating the locale within the option object

    this.translate.onLangChange.pipe(untilDestroyed(this)).subscribe((e) => {
      this.options = {
        data: {
          locale: e.lang
        }
      };
    });

[TimG]

hey @Zak do you have any content links within Builder whereI can take a look to make sure your setup is correct? Just the URL from a page within Builder, something like Builder.io: Drag and drop Visual CMS

[Konstantindev]

Hi Tim,

I’m currently having some issues with the custom field localisation for us at PetlabCo with Graphql. It looks as though the locale option works fine with normal models, but not in other scenarios.

There seems to be an issue when we are using models with localised fields as references inside of other models. In this scenario, the localisation option does not work in conjunction with the includeRefs: true or noTraverse: false options to include the referenced model data in the initial request.

Do you know why this is and how we can fix it? As this is a really important feature in our work.

Side note: Is there a way to have referenced data not be so nested when using includeRefs? Reason being is 1. it’s not great when having to access the data. 2. Our graphql typescript codegen only recognises the data as JSON and cannot get to the fields that are nested in the referenced data. Leading to our types not working as expected .

Thank you in advance!

[Ivan.1]

Hello,

@TimG

I believe very recently the visual representation of the Localized field has been changed.

Previously it was showing you values for all languages but now there is a dropdown select with locales instead. Select is small and it is quite annoying to switch back and forth to check values.

I would suggest having “show all checkbox” and/or changing select to “tabs/chips” (to change locale in one click instead of being forced to choose from the list).