Marcel Lehmann

For me, it was important to find a simple way to build a multilingual app that is also easy to maintain. Because the most common examples require tons of work when adding a new language.

In my example you will learn how to build a multilingual app in just 3 steps and which 2 parameters you only need to adjust to implement your new language.

I have also included the code for you to copy & paste, so you can finish even faster.

Step 1: Create a datasource
Here in this example I have created a SharePoint list which have the columns for the languages (English, French and German). -> en, fr, de

It is important to have a reference column which contains a consecutive number. I use here the automatically generated ID. In addition, one could add columns here, where one enters a remark to the screen (where the text is) and if necessary with the name of the item (e.g. Label1).

Step 2: Define OnStart
In the OnStart of the app you should first read out the language of the respective user or his browser language. You can do this easily with ‘language()’.

In this example I only want the first two letters, because they are identical to the datasource and I can reference them more easily. For this I write this language in a global variable, because then I could easily change it later in the app. (see bonus content)

To make it easier to add a new language later on and to avoid having to adjust every text field, I have used ‘ShowColumns’ for the language to filter the language column and ‘RenameColumns’ so that the language column always has the same name. Here ‘Value’.

Here the formatted code:

Set(
    varLanguage,
    Left(
        Language(),
        2
    )
);
Switch(
    varLanguage,
    "en",
    ClearCollect(
        colTranslations,
        RenameColumns(
            ShowColumns(
                MultiLanguage,
                "ID",
                "en"
            ),
            "en",
            "Value"
        )
    ),
    "fr",
    ClearCollect(
        colTranslations,
        RenameColumns(
            ShowColumns(
                MultiLanguage,
                "ID",
                "fr"
            ),
            "fr",
            "Value"
        )
    ),
    "de",
    ClearCollect(
        colTranslations,
        RenameColumns(
            ShowColumns(
                MultiLanguage,
                "ID",
                "de"
            ),
            "de",
            "Value"
        )
    )
)

Step 3: insert text elements
Here I simply added labels. But this also works with any other text display elements.

By formatting the collection columns in the previous step, it is now very easy to reference the corresponding text here. And the best thing is, when a new language is added, you do NOT have to adjust every field.

Bonus-Step: Include a possibility to change the language
I simply added a dropdown here, which contains a hard-coded table with the language abbreviations. Of course, you can also generate this dynamically.

In the OnChange of this DropDown I have inserted a slightly modified form of the code from Step 2. For this I have simply changed the ‘Set’ of the global variable. So you have an easy way to change your language. This code you can also simply reduce to the minimum, put behind images of the country flags at ‘OnClick’.

Set(varLanguage,Self.SelectedText.Value);
Switch(
    varLanguage,
    "en",
    ClearCollect(
        colTranslations,
        RenameColumns(
            ShowColumns(
                MultiLanguage,
                "ID",
                "en"
            ),
            "en",
            "Value"
        )
    ),
    "fr",
    ClearCollect(
        colTranslations,
        RenameColumns(
            ShowColumns(
                MultiLanguage,
                "ID",
                "fr"
            ),
            "fr",
            "Value"
        )
    ),
    "de",
    ClearCollect(
        colTranslations,
        RenameColumns(
            ShowColumns(
                MultiLanguage,
                "ID",
                "de"
            ),
            "de",
            "Value"
        )
    )
)