How to build a multilingual canvas app using the new AITranslate function

Hello everyone and welcome to my blog. It’s been sometime since I wrote my last blog. Hence I thought of penning something new and interesting.

Whenever we need to roll out enterprise canvas apps across multiple geographies, more often than not, we need to incorporate multilingual capability in our canvas app. Until this time, we had to build a translation component and then store the translated label text for each language.

The method is described aptly in Microsoft docs.

However you can now use the DataVerse AI functions to do all of this in just one line without the need to build a translation component. Without wasting any more time, let’s explore the new feature.

I have created a very simple canvas app for this demo. I have an Input text control where I will provide the original text. On click of the ‘Translate‘ button, I will convert the text into the desired language and show it in a label.

The first thing we should do to use the DataVerse AI functions is to add the Environment data source to the canvas app.

Once it is added, the next step is to use the AITranslate function.

OnSelect of the Translate button, I will use the below formula.

UpdateContext(
    {
        translatedText: Environment.AITranslate(
            {
                TargetLanguage: "fr",
                Text: inputEnglishText.Text
            }
        ).TranslatedText
    }
)

The AITranslate function has two parameters

1. Text: The text to be translated
2. TargetLanguage: The target language code in which the text is to be translated.

In my example, I am translating the text to French and storing the translated text in a variable which I can use for other control text.

Isn’t it great? A wonderful function indeed. Let’s see how we can make the app more dynamic. Currently we are hardcoding the language code. What if I need to translate the text in the local language of the user who is browsing the app?

For that you need to use the PowerApps Language() function. The function will return the language code of the user who is browsing the app and the translation shall happen accordingly. Below is the modified formula with the Language() function.

UpdateContext(
    {
        translatedText: Environment.AITranslate(
            {
                TargetLanguage: Language(),
                Text: inputEnglishText.Text
            }
        ).TranslatedText
    }
)

Hope this helped. You will also like the below posts.

Debajit Dutta