Microsoft Power Apps: Tips for building multi-language apps
A low/no-code approach for building multi-language apps using Microsoft Power Apps and the Canvas App editor.
Globalization in the workplace introduces many challenges when it comes to communication and collaboration. In addition to working and living in different time zones, language barriers can lead to misunderstandings — some of which can have serious consequences.
Addressing this challenge inside of business applications can not only increase effectiveness, but also foster inclusivity.
Pro-developers have standard patterns that they follow for supporting multi-lingual capabilities in their applications. One typical way is to use an external file (JSON, XML, CSV etc.) that would act as a dictionary, containing the language, a unique key, and the translated value as shown below:
Notice that the file is located under the “en” (English) language folder - this allows the app to load the correct dictionary based on the language of the logged in user and then display the correct label or text, using the value that is in the <value> tag.
There are more that I can tell about this subject and the approach to create a muli-language app may vary according to the programing language you are using, but the main goal of this article is to explain how can we create a multi-language app using the Microsoft Power Apps and the Canvas App Editor, and in case you don’t know what is Power Apps, I would strongly suggest you to watch this video:
(584) Charles Lamanna: Microsoft Power Platform Technical Roadmap and Strategy — YouTube
There are some good articles explaining how can we achieve this goal using a combination of Excel file as the dictionary and the LookUp function to load and display the translated text to the user. While I think these articles are valuable, in this article I will cover a different approach that can be even simpler for the developers and that it wouldn’t require them to have a previous knowledge on how to interact with external files and/or how to leverage the Look Up function.
Before we deep dive in to the technique, it is worth to mention that this approach will leverage the Behavior Formulas for Components, which basically gives you the ability to build reusable components that will process and output a value of type Text, Number, Object, Table etc. given a certain input.
The first thing we need to do is create a new Canvas Component using the Canvas Editor, give the component a cool name such as “Translation Component”, and then create 2 custom properties as follow:
Language: An input property of type Text that will receive the current LCID (Locale ID) of the logged in user.
Make sure you checked the option “Raise OnReset when value changes”, since this will call the formula on the OnReset event of the component that we will write later.
Labels: An output property of type Table that will “expose” the translated labels based on the input “Language” property.
Once we have these 2 properties on our component, now we need to create a Table that will be our dictionary of all translations, and to do this, we will need to declare this Table variable on the OnReset event of the component as follow:
As you can see above, the dictionary Table will have an entry for each language that your app supports and each entry will have a “Labels” property of type Object that will contain the translated content of all possible buttons, inputs and labels of your app.
The last thing we need to do now on the component is change the formula of the output property “Labels” we created before to be something like this:
The formula above is just trying to find the right translation entry based on the input “Language” property and in case the language was not set, the formula will use the current logged in user language as the filter, hence the usage of Coalesce function.
With that, we created our Reusable Component that can be the single source of truth for all apps that need to have multi-language support, and we can easily publish this component on the Power Apps Component Library of your organization or your customer’s org, and then we can quickly publish updates of the “Translation Component” and this will automatically affect all apps that rely on its dictionary. Cool, isn’t ?
Lastly, in order to use this “Translation Component” on our apps, the business or pro developers just need to add the component to their apps, make it invisible, and pass the value of the “Language” to the input property of the “Translation Component”. Then, on every single control of your app that needs to be translated according to the current user language, instead of using a static text as the label, the formula should be as simple as this:
With this approach, whenever the user changes the language, the app will automatically change the text of all buttons, inputs, labels etc. as shown below:
That’s all! Thank you and feel free to leave some comments!
