Power Platform Community Forum Thread Details

Hi @Anonymous ,

It sounds like you want to implement a feature in your Power Portals application that allows a specific logged-in user to change the language by clicking an icon on the home page, rather than going through the user profile form. This involves customizing the user experience in Power Portals. Here's a general approach you can follow:

Set up a custom entity in Power Apps portal to store language configurations (code and display name).
Edit the home page to add a language icon or button using HTML or Liquid templating.
Use JavaScript or Liquid templating to fetch the logged-in user's language preferences.
When the icon is clicked, show a dropdown or list of language options from the Language Configuration Entity.
Handle language changes by updating the user's language preference in the backend or custom entity.
Use Liquid templating or JavaScript to dynamically adjust the content on the home page based on the selected language.
Store the user's language preference for persistence across sessions using methods like cookies, browser local storage, or backend storage.

I can provide you with a basic outline of the code you might use for this scenario.

Add Language Icon to Home Page:

<!-- Add this HTML code to your home page template -->
<div id="language-selector">
 <button id="language-icon">🌐</button>
 <ul id="language-options" style="display: none;">
 <!-- Dynamically populate language options using Liquid or JavaScript -->
 <li><a href="#" data-language="en">English</a></li>
 <li><a href="#" data-language="fr">Français</a></li>
 <!-- Add more language options as needed -->
 </ul>
</div>

JavaScript Logic:

// Add this JavaScript code to handle language selection
document.addEventListener("DOMContentLoaded", function() {
 const languageIcon = document.getElementById("language-icon");
 const languageOptions = document.getElementById("language-options");

 languageIcon.addEventListener("click", function() {
 languageOptions.style.display = "block";
 });

 languageOptions.addEventListener("click", function(event) {
 const selectedLanguage = event.target.getAttribute("data-language");
 // Call a function to change user's language preference
 updateUserLanguage(selectedLanguage);
 languageOptions.style.display = "none";
 });
});

function updateUserLanguage(languageCode) {
 // Use Power Portals API or custom backend logic to update user's language preference
 // You'll need to pass the user's ID or unique identifier along with the new language code
}

Liquid Templating for Dynamic Content:

<!-- Use Liquid templating to display content based on selected language -->
<div>
 {% if user.language == 'en' %}
 <p>Welcome to our website!</p>
 {% elsif user.language == 'fr' %}
 <p>Bienvenue sur notre site web !</p>
 {% endif %}
</div>

I hope it helps you. Please mark my post as solution to help others. And give a thumbs up.

Thanks,