Multilingual support in Canvas Apps Using Microsoft Translator

[maqsoftware]

Problem Statement: Multilingual support remains a significant challenge for organizations developing applications in PowerApps. Without an efficient solution, users from different linguistic backgrounds may struggle to understand the application interface, leading to reduced adoption rates and inefficiencies. 

Solution: By leveraging the Microsoft Translator Connector within PowerApps, organizations can effectively address the challenge of multilingual support. Here's a streamlined approach: 

Implementation Steps: 

1. Navigate to https://make.powerapps.com 
   1. Click Apps 
   2. Click New Apps --> Page Design 
      
      
2. Click Data Source at the Left Side and Search MICROSOFT TRANSLATOR
   
   Now in On Start of App write Below Code to get the Language of User (based on Browser) 
   Set(selectedLanguage,"en")
   
3. Add dropdown for selecting any language from it
4. In Items of dropdown write below Code to get all the languages which is available in Microsoft Translator: 
   MicrosoftTranslator.Languages() 
   
5. Select following fields for dropdown 
   
6. Now in OnChange of dropdown write Below Code to get the Language of User: 
   Set(selectedLanguage,comboBoxLanguages.Selected.Code) 
   

7. Use below format for .Text property of label, button, other supported controls to see the translated text based in selected language: 
   MicrosoftTranslator.Translate("your text", selectedLanguage) 

8. Example:  
   Added multiple labels in Power App as shown in image and their corresponding value of Text property are: 
   

   

   Label	Text Property
   LabelPageHeader	MicrosoftTranslator.Translate("Multilingual Support", selectedLanguage)
   LabelSelectLanguage	MicrosoftTranslator.Translate("Select Language:", selectedLanguage)
   LabelAboutPowerPlatform	MicrosoftTranslator.Translate("About Power Platform:", selectedLanguage)
   LabelPowerPlatform	MicrosoftTranslator.Translate("The Power Platform provides organizations…", selectedLanguage)
   LabelAboutMSTranslator	MicrosoftTranslator.Translate("About Microsoft Translator:", selectedLanguage)
   LabelMSTranslator	MicrosoftTranslator.Translate("Microsoft Translator lets…”,selectedLanguage)

9.  Change the language from dropdown, Microsoft Translator will convert the text to desired language and same will be displayed on page 
10. Refer below screenshots: 

    English	French

11. Note: With Microsoft Translator, you gain access to over 60 languages, and the flexibility to incorporate any language of your choice 

[ramanujama]

Thanks for sharing the article.

It saves time by translating the text dynamically, without the need for hardcoding.

[saurabh31]

The article demonstrates a time-saving approach to dynamically translating text, eliminating the need for manual hardcoding.

[babloosingh5556]

I'm amazed by the seamless integration of multiple languages in this PowerApps creation. It's truly a testament to modern technology and the commitment to inclusivity. Well done!

[jela]

Hello, this looks really ease to setup with Microsoft Translator. Since I cannot add Microsoft Translator but only Microsoft Translator 2, I tried this approach but when trying to set property .Text for label with:

MicrosoftTranslatorV2.Translate(varCurrentLanguage, "any text")

I am getting error 

ps. varCurrentLanguage was set at App OnStart 

Does anyone knows how to use this with MicrosoftTranslatorV2?

[babloosingh5556]

1. Setting Up MicrosoftTranslatorV2

First, ensure that you have added the MicrosoftTranslatorV2 connector to your Power Apps environment.

2. Configuring MicrosoftTranslatorV2

You need to make sure you are correctly using the Translate function provided by MicrosoftTranslatorV2. Here’s how to use it properly:

1. Add the connector:

   • Go to Data -> Add data.
   • Search for MicrosoftTranslatorV2 and add it.

2. Setting up a variable for the current language:

   • In the App's OnStart property, set up a variable for the current language.
     PowerApps

     Set(varCurrentLanguage, "en");

3. Using the Translate function:

   • Use the Translate function to translate text. Here is how you can set the Text property of a label to a translated string:
     PowerApps

     MicrosoftTranslatorV2.Translate(varCurrentLanguage, "any text")

3. Example Implementation

Let’s say you want to translate the text "Hello World" to the language specified in varCurrentLanguage and display it in a label:

1. OnStart Property:

   PowerApps

   Set(varCurrentLanguage, "fr"); // French language code

2. Label Control:

   • Add a Label control to your screen.
   • Set the Text property of the Label control to:
     PowerApps

     MicrosoftTranslatorV2.Translate(varCurrentLanguage, "Hello World")

4. Error Handling

If you encounter an error, ensure:

• API Key Configuration: Make sure the API key for the MicrosoftTranslatorV2 service is correctly configured in your connector.
• Network Issues: Ensure there are no network issues preventing access to the Microsoft Translator service.
• Language Code Validity: Ensure the varCurrentLanguage contains a valid language code supported by Microsoft Translator.

5. Troubleshooting

If the error persists, try the following steps to debug:

1. Direct API Call: Test the translation by making a direct call in the Power Apps formula bar:
   PowerApps

   MicrosoftTranslatorV2.Translate("fr", "Hello World")
2. Variable Check: Ensure that varCurrentLanguage is set correctly and is not null or empty:
   PowerApps

   Set(varCurrentLanguage, "fr"); // Ensure this is in the OnStart property
3. Connector Status: Check the status of the MicrosoftTranslatorV2 connector to ensure it is properly connected and authenticated.

By following these steps, you should be able to set up and use the MicrosoftTranslatorV2 connector in your Power Apps application without encountering errors. If you have any further issues or specific error messages, please share those details for more targeted assistance.

[babloosingh5556]

@jela 

1. Set Up the Translation in a Behavior-Based Property: You need to call the MicrosoftTranslatorV2.Translate function in a behavior-based property and then store the result in a variable. This is typically done in the OnVisible property of the screen or the OnSelect property of a button.

2. Bind the Result to the Label: Bind the Text property of the label to the variable where the translation result is stored.

Example Implementation

Let's walk through a simple example:

1. Setting Up the Variable for the Translation

• Go to the OnVisible property of the screen where you want to display the translation.
• Set up the translation and store it in a variable using the Set function.

PowerApps

// OnVisible property of the screen Set(varTranslatedText, MicrosoftTranslatorV2.Translate(varCurrentLanguage, "Hello World"));

2. Bind the Variable to the Label

• Add a Label control to your screen.
• Set the Text property of the Label control to the variable.

PowerApps

// Text property of the Label varTranslatedText

Detailed Steps

1. Initialize the Variable for Language:

   In the App's OnStart property, initialize the language variable:

   PowerApps

   Set(varCurrentLanguage, "fr"); // French language code

2. Set Up the Translation on Screen Load:

   In the OnVisible property of the screen, call the translation function and store the result in a variable:

   PowerApps

   Set(varTranslatedText, MicrosoftTranslatorV2.Translate(varCurrentLanguage, "Hello World"));

3. Display the Translation in a Label:

   In the Text property of the Label, use the variable:

   PowerApps

   varTranslatedText

Summary

• Behavior functions like MicrosoftTranslatorV2.Translate should be used in behavior-based properties (OnSelect, OnVisible, etc.).
• Store the result in a variable using the Set function.
• Bind the variable to the Text property of your label or any other non-behavior property.

By following these steps, you can use the MicrosoftTranslatorV2 service to translate text and display it in your app without encountering the error you're seeing. If you have any further questions or need more specific assistance, feel free to ask!

[jela]

@babloosingh5556 

I was hopping that I could avoid the variable in between and thought that it is possible to set translation directly to label.Text but thought that I was doing something wrong.

Thank you, you confirmed that this is the only correct way to do it. 🙂