{"id":41233,"date":"2025-05-14T12:36:12","date_gmt":"2025-05-14T07:06:12","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=41233"},"modified":"2025-05-14T12:36:12","modified_gmt":"2025-05-14T07:06:12","slug":"enabling-multilingual-support-on-custom-pages-in-model-driven-apps","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2025\/05\/enabling-multilingual-support-on-custom-pages-in-model-driven-apps\/","title":{"rendered":"Enabling Multilingual Support on Custom Pages in Model-Driven Apps"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-41239\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/image-22.png\" alt=\"Model-Driven Apps\" width=\"1925\" height=\"1100\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/image-22.png 1925w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/image-22-300x171.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/image-22-1024x585.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/image-22-768x439.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/image-22-1536x878.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/image-22-660x377.png 660w\" sizes=\"(max-width: 1925px) 100vw, 1925px\" \/><\/p>\n<p>A recent requirement involved adding multilingual support to a custom page within a model-driven app. The objective was to enable users from different regions to interact with the app seamlessly in their preferred languages.<\/p>\n<p>To achieve this objective, Microsoft has provided an excellent guide: <a href=\"https:\/\/learn.microsoft.com\/en-us\/power-apps\/maker\/model-driven-apps\/custom-page-localize\" target=\"_blank\" rel=\"noopener\">Customize pages to support multiple languages<\/a>.<\/p>\n<p>If you follow the step-by-step instructions provided in the guide, you&#8217;ll be able to successfully implement multilingual support for your custom page. Here&#8217;s a breakdown of the process and how you can achieve it.<\/p>\n<h3><strong>Understanding the Requirement<\/strong><\/h3>\n<p>The customer had a custom page that was built to enhance user experience with specific forms and data presentations. However, the page only supported English initially. They needed the labels, messages, and other UI elements to adapt based on the user&#8217;s selected language in the app.<\/p>\n<h3><strong>How to Achieve It?<\/strong><\/h3>\n<p>Here\u2019s a step-by-step overview of Microsoft\u2019s documentation:<\/p>\n<p><strong>1. Preparation<\/strong>:<\/p>\n<ul>\n<li>First, go to the Power Platform admin center and enable multiple languages in your environment settings. This is a crucial step, as your custom page will adopt the same language preferences defined in the environment.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-41234\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/1Model-Driven-Apps.png\" alt=\"Model-Driven Apps\" width=\"1916\" height=\"915\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/1Model-Driven-Apps.png 1916w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/1Model-Driven-Apps-300x143.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/1Model-Driven-Apps-1024x489.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/1Model-Driven-Apps-768x367.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/1Model-Driven-Apps-1536x734.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/1Model-Driven-Apps-660x315.png 660w\" sizes=\"(max-width: 1916px) 100vw, 1916px\" \/><\/p>\n<p><strong>2. Setting Up Localization<\/strong>:<\/p>\n<ul>\n<li>Open the custom page in the Power Apps maker portal.<\/li>\n<li>Use the new localization capabilities to select the text elements\u2014such as labels, buttons, and tooltips\u2014that need to support multiple languages.<\/li>\n<li>Instead of hardcoding text, assign resource keys that are mapped to the appropriate language values.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-41235\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/2Model-Driven-Apps.png\" alt=\"Model-Driven Apps\" width=\"1376\" height=\"316\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/2Model-Driven-Apps.png 1376w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/2Model-Driven-Apps-300x69.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/2Model-Driven-Apps-1024x235.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/2Model-Driven-Apps-768x176.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/2Model-Driven-Apps-660x152.png 660w\" sizes=\"(max-width: 1376px) 100vw, 1376px\" \/><\/p>\n<p><strong>3. Managing Translations<\/strong>:<\/p>\n<ul>\n<li>Power Apps automatically generates the <strong>.resx (resource)<\/strong> file for your custom page.<\/li>\n<li>Download the generated <strong>.resx<\/strong> files to your local machine.<\/li>\n<li>Open and edit the files to add translations for all the required languages.<\/li>\n<li>Once the translations are added, re-import the updated resource files back into your app.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-41236\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/3Model-Driven-Apps.png\" alt=\"Model-Driven Apps\" width=\"1900\" height=\"912\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/3Model-Driven-Apps.png 1900w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/3Model-Driven-Apps-300x144.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/3Model-Driven-Apps-1024x492.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/3Model-Driven-Apps-768x369.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/3Model-Driven-Apps-1536x737.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/3Model-Driven-Apps-660x317.png 660w\" sizes=\"(max-width: 1900px) 100vw, 1900px\" \/><\/p>\n<p><strong>4. Testing the Localization<\/strong>:<\/p>\n<ul>\n<li>Change your user language settings to different languages (such as French, German, and Spanish), and verify that the custom page dynamically updates the UI elements based on the selected language.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-41237\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/4Model-Driven-Apps.png\" alt=\"Model-Driven Apps\" width=\"869\" height=\"223\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/4Model-Driven-Apps.png 869w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/4Model-Driven-Apps-300x77.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/4Model-Driven-Apps-768x197.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2025\/05\/4Model-Driven-Apps-660x169.png 660w\" sizes=\"(max-width: 869px) 100vw, 869px\" \/><\/p>\n<p><strong>5. Final Touches<\/strong>:<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Ensured fallback behavior was in place in case a translation wasn\u2019t available for a particular language.<\/li>\n<li>Test the page thoroughly using various user profiles and language settings to make sure everything functions as expected.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><strong>Key Takeaways<\/strong><\/p>\n<ul>\n<li>The new support for localizing custom pages in model-driven apps is extremely powerful.<\/li>\n<li>Following Microsoft&#8217;s structured approach made the implementation clean and maintainable.<\/li>\n<li>It is thrilled to see the custom page adapting to different languages without needing to rebuild anything from scratch.<\/li>\n<\/ul>\n<p>If you have a similar requirement, it is highly recommended to check out <a href=\"https:\/\/learn.microsoft.com\/en-us\/power-apps\/maker\/model-driven-apps\/custom-page-localize\" target=\"_blank\" rel=\"noopener\">Microsoft\u2019s guide<\/a>. It makes multilingual support much easier and ensures your app is accessible to a global audience!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A recent requirement involved adding multilingual support to a custom page within a model-driven app. The objective was to enable users from different regions to interact with the app seamlessly in their preferred languages. To achieve this objective, Microsoft has provided an excellent guide: Customize pages to support multiple languages. If you follow the step-by-step\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2025\/05\/enabling-multilingual-support-on-custom-pages-in-model-driven-apps\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2576,2361],"tags":[1194],"class_list":["post-41233","post","type-post","status-publish","format-standard","hentry","category-model-driven-app","category-technical","tag-model-driven-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/41233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=41233"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/41233\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=41233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=41233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=41233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}