Portal language selector

Modern Development/Service Portal Widgets/Language Selector/README.md

@@ -0,0 +1,24 @@
+# Language Selector with Flags
+
+A language selector widget for the Portal.  
+The user can change the instance language without having to leave the Portal.
+
+<img width="255" height="95" alt="image" src="https://github.com/user-attachments/assets/af130ec4-d724-4b07-a38f-afd858b7eba2" />
+<img width="234" height="195" alt="image" src="https://github.com/user-attachments/assets/a2de8161-a922-4376-904d-b16f81dcc573" />
+
+
+## What it does
+- Displays a dropdown with flags and language names.
+- Automatically updates the user's language in the `sys_user` table.
+- Reloads the page to apply the new language immediately.
+
+## Files
+- **HTML Template:** renders the dropdown with flag emojis and labels.  
+- **Client Script:** handles language selection and sends the PATCH request.  
+- **Server Script:** provides the current user ID and stored language.  
+
+## Example
+When the user selects **🇪🇸 Spanish**, the widget updates their user record and reloads the Portal in Spanish.
+
+## Prerequisites
+- The language selected **must be installed and active** in the instance.  

Modern Development/Service Portal Widgets/Language Selector/language-selector.client.js

@@ -0,0 +1,22 @@
+function($http) {
+  var c = this;
+
+  c.languages = [
+    { code: 'en',    label: 'English',             flag: '🇬🇧' },
+    { code: 'pb', 	 label: 'Portuguese (Brazil)', flag: '🇧🇷' },
+    { code: 'es',    label: 'Spanish',             flag: '🇪🇸' },
+    { code: 'fr',    label: 'French',           	 flag: '🇫🇷' },
+    { code: 'de',    label: 'German',            	 flag: '🇩🇪' },
+    { code: 'it',    label: 'Italian',           	 flag: '🇮🇹' }
+  ];
+
+  c.userId = c.data.user_id;
+  c.selected = c.data.language || 'en';
+
+  c.changeLang = function() {
+    $http.patch('/api/now/table/sys_user/' + c.userId, { preferred_language: c.selected })
+      .then(function(response) {
+        location.reload();
+      });
+  };
+}

Modern Development/Service Portal Widgets/Language Selector/language-selector.css

@@ -0,0 +1,13 @@
+.lang-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+select, button {
+  padding: 6px 8px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+}
+button {
+  cursor: pointer;
+}

Modern Development/Service Portal Widgets/Language Selector/language-selector.html

@@ -0,0 +1,6 @@
+<div class="lang-selector">
+  <select ng-model="c.selected"
+          ng-options="l.code as (l.flag + ' ' + l.label) for l in c.languages"
+          ng-change="c.changeLang()">
+  </select>
+</div>

Modern Development/Service Portal Widgets/Language Selector/language-selector.server.js

@@ -0,0 +1,9 @@
+(function() {
+  var user = gs.getUser();
+  data.user_id = user.getID();
+
+  var grUser = new GlideRecord('sys_user');
+  if (grUser.get(data.user_id)) {
+    data.language = grUser.getValue('preferred_language') || 'en'; 
+  }
+})();