Change logged in user's language preference through widget (Button click)

[kevinbruneau]

Hi all,

I'm trying to create a widget where a user can switch language by clicking on it. Then the page would reload in the proper language.

Here's my widget's HTML :

<div>
<!-- your widget template -->
    <!-- If the logged in user has English as its prefered language -->
  <span ng-if="c.userLanguagePref == 'en'">
  	<button ng-click='c.changeUserLanguage()'>Français</button>
  </span>
  <!-- If the logged in user has French as its prefered language -->
  <span ng-if="c.userLanguagePref == 'fr'">
  	<button ng-click='' id="languageButton">English</button>
  </span>
</div>

and here's my client script :

api.controller=function($scope) {
/* widget controller */
var c = this;

c.userLanguagePref = g_lang;
	
// Function to change the user's preferred language
  c.changeUserLanguage = function () {
	
	if(c.userLanguagePref == 'en'){
		alert('Switching to French.');

		// Change the logged in user's language

		// Refreshing the page to apply the new chosen language
		location.reload();
	}
	else{
		alert('Switching to English.');
	}
    
  };
};

I tried checking online and asking chat gpt how I could do that, but nothing worked. I know that there's a language selector that comes OOTB, but we would like to make it simpler by just having a 1 click switch for the users (We're only using English & French)

Any ideas?

Thank you very much!!

Kev

[Michael Jones - · Accepted solution]

In keeping with your simple example, here is one way of implementing this: Note I made some changes to what you posted and included server side code, which you'll need in order to update the user record with the selected language. 

HTML:

<div>
    <!-- If the logged in user has English as its prefered language -->
  <span ng-if="data.userLanguagePref == 'en'">
  	<button ng-click='c.changeUserLanguage("fr")'>Français</button>
  </span>
  <!-- If the logged in user has French as its prefered language -->
  <span ng-if="data.userLanguagePref == 'fr'">
  	<button ng-click='c.changeUserLanguage("en")' id="languageButton">English</button>
  </span>
</div>

Server:

(function() {
	//Determine which langugae the user currently has selected.
data.userLanguagePref = gs.getSession().getLanguage();

	//Check for input, validate it is one of the expected values, then update the user record.
	if(input) {
		if(input.lang == 'en' || input.lang == 'fr') {
		 var thisUser = new GlideRecord('sys_user');
			thisUser.get(gs.getUserID());
			thisUser.preferred_language = input.lang;
			thisUser.update();
			return;
		}
		
	}

})();

Client:

api.controller=function($scope, $window) {

  var c = this;
	
	//Send the language to set to the server
	c.changeUserLanguage = function(lang) {
		var input = {};
		input.lang = lang;
		c.server.get(input).then(function(response) {
			$window.location.reload();
		});
	}
	
	
};

The result is pretty much a toggle button that sets the language and then reloads the page. 

[kevinbruneau]

Thanks Michael, that works!

If I want to add it to my header, would that be through the Menu or the Header itself?

I saw a few examples online saying a few different things and none of them seem to work 😕

[kevinbruneau]

Hi Michael, this worked! Thank you!

Is it possible for me to add it to the header part instead of a page?

Thank you again!

Kev