Do you need to make your Canvas App bilingual or multilingual?
In Canada, English and French are both official languages, making this requirement very common.
Here’s how I do it.
Read on or watch the video here:
I use two SharePoint lists: one for storing supported languages and the other for storing the actual text translations.
Some people use Excel spreadsheets for storing translations, but using SharePoint Lists has many advantages.
First of all, the list can be secured with permissions.
Secondly, translators can work on different languages simultaneously, while reviewers can have read-only access to the translations. This is particularly important in organizations where bilingual support is regulated.
Additionally, the SharePoint List is in the Cloud, where it can be managed better than in some obscure location.
The Languages list has Language and Locale columns. Locale is the column we will be using in the Canvas App.
The Translations list has the following columns:
Screen: Power App screen name. Depending on the size of the app, screen differentiation can be helpful in some cases.
Control: The control that needs translation.
Label: The actual translation.
Language: The language, such as 'en' for English or 'fr' for French.
AccessibleLabel: If your Canvas App must comply with accessibility requirements, you need to ensure that the screen reader can read in either language to assist users with visual impairments.
Now we need to add these SharePoint Lists as Data Sources to the Canvas App.
Go to the Data section and select Add Data to open the Data Sources panel.
Expand the Connectors section and scroll down to find the SharePoint connection.
Click on the SharePoint connection to select it.
The panel on the right side of the screen will open where you will be able to connect to the SharePoint site where you stored the SharePoint Lists for translations.
Choose both SharePoint Lists that you created.
Each SharePoint List is now added as your Data Source.
Additionally, we will use two Collections. We will retrieve data from the SharePoint Lists Data Sources and store them in the respective Collections. We will use these Collections in our app to grab the translations for each control.
Let's use OnStart event of the app to create these Collections.
ClearCollect(colLanguages, 'Project Rating Languages');
The snippet above will load a content of your Languages SP List Data Source into the colLanguages collection.
Set (CurrentLanguage, "en");
Note that I just set the language to ‘en’.
However, you can use the user’s preferred language when the app starts. It gets a bit more complicated because there are OS language settings, browser settings, preferred language in the M365 profile, etc. You will have to figure out what will work best for your users.
ClearCollect(colTranslations, ShowColumns(Filter('Project Rating Translations', Language = CurrentLanguage), ID,Control,Label,Language,Screen, AccessibleLabel));
This will load values from the Translations SP List into colTranslations collection, but it will load only the English translation, because we just set the CurrentLanguage to English.
Users need the ability to change the language from a dropdown list.
Add the control and assign the Items property to the colLanguages collection, which holds all supported languages.
Add the following code to the control’s OnChange event:
Set(CurrentLanguage,Left(First(cboLanguages.SelectedItems).Locale, 2));
ClearCollect(colTranslations, ShowColumns(Filter('Project Rating Translations', Language = CurrentLanguage), ID,Control,Label,Language,Screen, AccessibleLabel));
Next, we need to make each control aware of the text it needs to display. For each control on your Canvas App screen, go to its Text property and add the following code:
LookUp(colTranslations, Control = "btnCreateNew", Label)
Remember that the 'Label' is the column in the SharePoint List in my example, that holds the translation for the control.
Change the Control property for each control respectively, for instance, “btnBrowse”, “btnExit”, etc.
Additionally, if you have to meet accessibility requirements, for each AccessibleLabel of the control, add the following code:
LookUp(colTranslations, Control = "btnCreateNew", AccessibleLabel)
Power Automate Flow and Microsoft Translation Services
The clients I’ve worked with use designated translators due to regulatory requirements. These translators enter the values themselves or supply the values for manual entry into the Translation SharePoint List.
However, if you don’t have to go through the formal translation and approval process, you can use Microsoft Translation services to automate the translation process.
You will need to create a Power Automate Instant Cloud Flow, which you manually trigger only once for each language that you need translations for.
You will then configure your Flow to walk through the SharePoint List that has the controls and English labels.
For each item it finds, it will create an item for, let’s say, Spanish translation and will put that translation into the Label column and into AccessibleLabel if you use it to meet accessibility requirements.
Note that you will need to pay for Translation Services, but it will be much cheaper and faster than hiring a translator, particularly if you have a large app with a lot of text.
Comments